13. HTML/CSS(Sass)

■ Sass 셋팅

설치

VS Code기준 extension에서 Live Sass Compiler 를 설치하면 됩니다.

 

 

실행

하단의 Watch Sass를 클릭하면 Sass 파일을 CSS 파일로 변환해줍니다.

(Sass 파일 자체를 읽지는 못하기 때문에 CSS 변환이 필요)

Sass 파일의 확장자는 sass 와 scss입니다.

sass에서는 중괄호가 생략이 가능하다는 특징이 있지만 보통 scss 씁니다.

 

 

■ Sass 문법

변수 만들기

$main-color: #2a4cb2;
$sub-color: #eeeeee;
$basic-size: 20px;

.background {
  background-color: $main-color;
  font-size: $basic-size;
}

.box {
  color: $main-color;
  font-size: $basic-size;
}

위와 같이 $작명 : 값 의 방식으로 변수를 만들 수가 있으며,

변수를 만들어 놓으면 작명해 놓은 이름을 가져다 쓰는 것만으로 편하게 지정한 값을 부를 수가 있습니다.

width, font-size 등 자주 쓰지만 기억하기 어려운 값들을 넣으면 편합니다.

 

 

사칙연산

.background {
  background-color: $main-color;
  font-size: ($basic-size * 2);
}

.box {
  color: $main-color;
  font-size: $basic-size + 2px;
}

사칙연산도 바로 가능합니다.

단, 덧셈과 뺄셈은 단위를 맞춰서 계산해야합니다. (px이나 % 등)

곱셈과 나눗셈은 보통 뒤에 단위를 쓰지 않고 정수를 사용하며 괄호 안에 작성해 주는 것이 좋습니다.

 

 

Nesting

.main-bg h4 {
  font-size: 16px;
}
.main-bg button {
  color: red;
}

// Sass는 아래와 같이 관리 가능
.main-bg {
  width: 100px;
  h4 {
    font-size: 16px;
  }
  button {
    color: red;
  }
}

Nesting 문법은 위와 같이 셀렉터에 스페이스를 넣어서 쓰는 것 대신 중괄호 안에 넣어서 쓸 수 있게 바꿔줍니다.

장점으로는 UI들을 합쳐서 관리하기 편하다는 것입니다.

다만, 셀렉터를 길게 나열해서 쓰는 것은 좋은 관습은 아니기 때문에 클래스 하나 선언해서 쓰는 게 제일 좋습니다.

 

 

@extend

%btn {
  font-size : 16px;
  padding : 10px;
  background : grey;
}

.btn-green {
  @extend %btn;
  background : green;
}

extend 문법은 변수와 비슷한데, extend를 사용하고 클래스명을 넣으면 해당 클래스의 모든 내용이 복붙됩니다.

코드도 짧아지고 관리하기도 편하다는 장점이 있습니다.

% 기호는 . 대신에 쓸 수 있는 임시클래스로 CSS 파일에는 변환되지 않는다는 특징이 있습니다.

extend 뒤에는 % 와 . 둘 다 사용 가능합니다.

 

 

@mixin

@mixin 폰트스타일($구멍, $구멍2) {
  font-size: $구멍;
  letter-spacing: $구멍2;
}

.h2 {
  @include 폰트스타일(30px, 1px);
}

mixin은 클래스에 파라미터를 넣어서 더 쉽게 관리할 수 있다는 특징이 있습니다.

사용 방법은

작성: $mixin 작명(파라미터1, 파라미터2) { 원하는 스타일 : 값(파라미터1) ; 원하는 스타일2 : 값(파라미터2) }

사용: 넣고 싶은 곳에 @include 작명(파라미터1, 파라미터2)

 

@mixin 박스스타일($구멍) {
  #{$구멍}: 16px;
}

.h2 {
  @include 박스스타일(width)
}

원하는 스타일도 파라미터 값을 줄 수 있습니다.

단, 값에 들어갈 때와는 달리글자 중간에 변수나 파라미터를 넣을 때에는

#{변수명 or 파라미터} 와 같은 양식에 맞춰 작성해줘야합니다.

 

 

@use

@use 'reset.scss'; /* 다른 scss파일 복붙 가능 */

@use '_reset.scss'; /* 앞에 _(언더바)를 붙이면 CSS 컴파일을 하지 않음 */

reset.$변수명;  /* 다른 파일의 변수쓰는법 */
@include reset.mixin이름();  /* 다른 파일의 mixin쓰는법 */

다른 scss 파일의 내용을 복붙도 가능합니다.

@use '폴더명/파일명.scss' 와 같은 방식으로 작성만 해주면 됩니다.

 

다른 scss 파일의 변수도 가져올 수 있으며 변수를 사용할 때에는 @include 파일명.minin작명(); 과 같이

파일명을 기재해 줘야 인식을 할 수 있습니다.