[Sass] Sass에 대해 알아보자(2) (SCSS 구문)

Seonup·2022년 9월 14일

CSS

목록 보기

10/10

오늘은 Sass에서 제공하는 기능이 어떤 것이 있는지 살펴보면서, SCSS 구문으로 어떻게 표현할 수 있는지 알아보자.

변수 $variable

선언 방법

$variable: value;

// 예시
$hello-1: 1;
$HELLO_2: 2;

전역변수, 지역변수 구분 가능
value에 number, string, list 등 작성 가능
string은 반드시 따옴표('', "") 안에 작성

CSS custom 변수와는 달리, 동적 처리가 불가능함. 정적 처리만 가능.

동적 처리에 CSS custom 변수 사용할 경우 (정상 작동)

li {
	--column: 2;
	width: calc(var(--column) * 20%); // -> width: 40%;
}

@media (min-width: 64em /* 1024px */) {
	--column: 3; // -> width: 60%;
}

동적 처리에 Sass 변수를 사용할 경우

li {
	$column: 2;
	width: calc($column * 20%); // -> width: 40%;
}

@media (min-width: 64em /* 1024px */) {
	$column: 3; // -> width: 40%; Sass 변수는 동적 처리가 불가능하므로 미디어쿼리의 조건에 부합하더라도 $column의 값은 2로 유지됨.
}

CSS 구문에 Sass 변수를 사용하기 위해서는 보간법(interpolation)이 필요함
- 보간법: #{$변수명}
```
```scss
//예시
.col-sm-$i -> .col-sm-#{$i}
```
```

Map 형태로 변수 선언 가능

key: value 형태로 이뤄짐 (자바스크립트의 Object와 비슷)

선언시

$변수명: (
  key1: value1,
  key2: value2,
)

호출시
```
```scss
map.get($변수명, $key);
```
```

At_Rules

at 으로 불리는 @ 를 붙여서 제공되는 Sass 기능으로, 스타일 중첩이나 보간 포함 등이 가능하다.

@use

다른 Scss 파일에서 mixins, functions, variables를 불러오고, 조합할 수 있도록 함
전역이 아닌 지역으로 호출이 가능함

선언 방법

기본값:
```
@use "파일경로";
```
- 호출시
  - 반드시 namespace를 작성해줘야 함.
  - namespace.mixin이름, namespace.function이름, namespace.variable이름
```
@use "variables";

body {
	color: variables.$black;
}
```
별칭 선언: as 사용
- 별칭 지정
```
@use "파일경로" as 별칭;
```
  - 호출시 namespace 대신 별칭을 작성해줘야 함
```
@use "variables" as v;

body {
	color: v.$black;
}
```
- 별칭 생략
  - 별칭을 기입해야 하는 곳에 * 를 지정하면 호출시 별칭을 작성하지 않아도 됨
```
@use "파일경로" as *
```
    - 호출시
```
@use "variables" as *;

body {
	color: $black;
}
```
  - 내장 변수를 사용할때는 별칭을 생략하지 않는 것을 권장함 → 어떤 내장 변수를 호출했는지 알 수 없기 때문.
```
@use "sass:math";

body {
	color: math.div(100% / 10);
  // color: div(100% / 10); // 생략시 div()로 표기되는데, 이러면 어떤 내장변수를 사용했는지 알기 어려움
}
```

@forward

@forward "url"
@use가 파일을 호출할 수 있도록 variables, mixins, function 등을 내보내는 기능

호출 시 사용될 prefix를 선언할 수 있음

@forward 파일경로 as list-*;

ul {
	@include 파일경로.list-패키지명();
}

show와 hide를 사용하여 호출되는 모듈에서 제외되거나 사용가능한 패키지를 지정할 수 있음

```sass
@forward 파일경로 hide 패키지명; // 제외될 패키지
@forward 파일경로 show 패키지명; // 사용 가능한 패키지
```

@mixin

함수와 비슷하나, 코드를 반환한다.
mixin의 호출은 스타일 블럭 내에서만 국한되지 않고 스타일 외부에서도 사용할 수 있다.

선언 및 사용

기본

// 선언
@mixin mixin명() {
  // css 내용
}

// 사용
selector {
  @include mixin명();
}

parameter를 불러올 경우

// 선언
@mixin mixin명($parameter) {
  속성: $parameter;
}

// 사용
selector {
  @include mixin명($parameter);
}

parameter 값을 안 넣어줄 경우를 대비하여 기본값을 작성해 줌

@mixin mixin명($parameter: 기본값) {
  속성: $parameter;
}

// 예시

@mixin text-style($color: false) {
  @if (type-of($color) === color) {
    color: $color;
  }
  // color 값에 px이나 boolean 값이 출력되지 않게 하기 위해 if문 작성
}

javascript의 함수와 달리 parameter를 keyword로 던질 수 있어, 매개변수의 순서가 중요하지 않음

// 선언
@mixin flexLayout($type: flex, $x: center, $y: center) {
  display: $type;
	justify-content: $x;
	align-items: $y;
}

// 사용
div {
  @include flexLayout($x: flex-start);
}

/* 결과값
	div {
	  display: flex;
		justify-content: flex-start;ㄴ
		align-items: center;
	}	
*/

@content
- mixin에 포함된 내장 인수로, mixin을 include시 내부에 작성한 코드를 mixin의 인자로 전달하여 mixin의 콘텐츠 값으로 사용할 수 있다.
- 예시

    ```scss
    // 선언시
    @mixin responsive($screen) {
      if ($screen == T) {
        @media screen and (min-width: 1200px) {
          @content;
        }
      }
    }
    
    // 사용시
    p {
      @include responsive(T) {
        font-size: 12px;
      }
    }
    
    // 결과값
    p {
      @media screen and (min-width: 1200px) {
        font-size: 12px;
      }
    }
    ```

@import

Sass나 CSS 파일을 가져오는 기능으로, 사용시 전역으로 선언되기 때문에 사용을 권장하고 있지 않음 → Sass 측에서는 곧 없앨 기능이라고 발표함
@use로 대체하여 사용하기를 권장함

@extend : 확장

다른 클래스의 스타일 속성을 확장할 때 사용
@extend가 선언된 곳을 기준으로 우선순위가 결정되지 않고, 스타일이 선언된 곳을 기준으로 우선순위가 결정됨
클래스를 생성하지 않고 스타일 속성 그룹만 생성하여 확장하고 싶을 때는 placeholder(%)와 함께 사용할 수 있음
확장의 범위는 @use가 사용된 해당 모듈 내에서만 가능함 (지역 처리)
스타일 클래스 등 확장 선택자가 존재하지 않으면 error를 일으키는데, !optional을 사용하면 확장 선택자가 존재하지 않는 동안 해당 확장 기능을 사용하지 않을 수 있음

@function : 함수 선언

mixin과 비슷하나, 코드가 아닌 값만 반환함
```
@function 함수명() {
  @return 값;
}
```
내장 함수
- percentage() : 백분율 구하는 함수
- type-of() : type 구하는 함수

@debug : 디버깅

@debug 출력내용;

터미널에 값을 출력할 때 사용 (js에서 console 같은 역할)

Style Rules

placeholder

공통된 스타일을 묶어서 작성해줄 때 사용

선언시

%스타일명 {
  // 공통스타일 작성
}

// 예시
%tag-base {
  font-size: 12px;
  height: 20px;
  padding: 0 6px;
}

사용시

```scss
선택자 {
  @extent %스타일명;
}

// 예시
.tag-red {
  @extent %tag-base;
  background-color: red;
}
```

Flow Control

스타일의 출력을 제어하거나 반복 처리를 하는 등 스타일의 흐름을 제어하는 것으로 @ 을 붙인 작은 단위의 at_rules이다. flow control은 mixin이나 function 등의 내부에서도 사용할 수 있다.

@if and @else : 조건문

자바스크립트 처럼 조건문을 작성할 수 있음

@each

값을 순환하기 위한 기능으로, Sass의 type 중 list와 map에 사용됨
@each 변수 in 순환할값 으로 사용되며 변수는 (key value) 그룹 또는 key, value 각각 호출 등 다양하게 선언할 수 있음
```
@each $key, $value in $list {
    @debug $key;
    @debug $value;
}
```

@for : 반복문

javascript 처럼 loop를 돌릴 수 있음

@for 순서변수 from 시작순서 through 마지막순서 {
}

// 예시

@for $i from 1 through 4 {
  @debug $i; // 결과값 1, 2, 3, 4
}

flag

!default

변수에 대한 기본값을 설정해주는 것으로, 변수 사용시 값을 따로 할당하지 않으면 !default 플래그로 선언해준 값으로 지정됨
@use 파일 with (변수1: 값1, 변수2: 값2,..., 변수: 값) 으로 불러내서 !default 선언된 변수의 값을 변경할 수 있음

!global

지역변수로 선언한 것을 전역 변수로 사용하고 싶을 때 사용하는 플래그

Seonup

박선우

이전 포스트

[Sass] Sass에 대해 알아보자(2) (SCSS 구문)

CSS

변수 $variable

Map 형태로 변수 선언 가능

At_Rules

@use

선언 방법

@forward

@mixin

@import

@extend : 확장

@function : 함수 선언

@debug : 디버깅

Style Rules

placeholder

Flow Control

@if and @else : 조건문

@each

@for : 반복문

flag

!default

!global

[Sass] Sass에 대해 알아보자(1)

0개의 댓글