[TIL] SCSS(1)

JaeungE·2022년 5월 1일

Sass TIL scss

TIL

목록 보기

17/29

Sass(SCSS)

CSS의 각종 단점을 보완하기 위해 사용하는 전처리기(Preprocessor)

Sass로 작성한 스타일을 그대로 사용할 수 없고, compile 과정을 통해 CSS로 변환해서 사용한다.
/* */과 // 두 가지 주석을 사용할 수 있으며, // 주석은 compile에 포함되지 않는다.
Sass는 들여쓰기에 민감하다. 주의하도록 하자!
complile된 결과물을 보고싶다면 SassMeister에서 직접 작성해보자.

중첩(Nesting)

선언을 중첩하여 상위 선택자의 반복을 피하는 문법

&(Ampersand)

상위 선택자를 참조할 때 사용하는 기호

scss

.font-size {
    &-sm { font-size: 12px; }
    &-md { font-size: 14px; }
    &-lg { font-size: 16px; }
}

css

.font-size-sm {
  font-size: 12px;
}
.font-size-md {
  font-size: 14px;
}
.font-size-lg {
  font-size: 16px;
}

@at-root

중첩 유효범위의 변수는 사용하되, 상위 선택자를 제거할 때 사용한다.

선택자 앞에 @at-root를 붙여서 사용한다.

속성(Properties)

반복되는 속성 명을 단축해서 사용할 수 있다.

아래처럼 flex-..., grid-..., margin-... 등 속성들을 묶어서 단축하여 사용할 수 있다.

scss

.container {
	display: flex;
	.item {
		flex: {
			grow: 1;
			shrink: 0;
			basis: 50px;
		};
		margin: {
			top: 10px;
			bottom: 20px;
			left: auto;
			right: auto;
		}
	}
}

css

.container {
  display: flex;
}
.container .item {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 50px;
  margin-top: 10px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
}

변수(Variables)

반복적으로 사용하는 값을 변수로 선언 및 사용할 수 있다.

$(Dollar Sign)을 이용해서 선언한다.
유효 범위를 가지고 있으며, 중괄호 내부에 있는 것만 참조가 가능하다.

플래그(Flag)

!global

지역 변수를 전역 변수로 선언할때 사용한다.

!default

기본값을 정의할 때 사용한다.

보간(Interpolation)

특정 값을 채워넣기 위해 사용하는 문법

문자열 안에 #{value} 문법을 이용해서 변수를 채워 넣을 수 있다.
아래처럼 선택자에도 사용이 가능하다.

scss

$class: "item";

.box-#{$class} {
    width: 100px;
    height: 100px;
}

css

.box-item {
  width: 100px;
  height: 100px;
}

데이터(Data)

Numbers, Colors

CSS에서 사용하는 것과 동일한 타입이다.

Booleans

JS의 boolean과 동일한 타입이다.

Strings

Colors와 Booleans를 제외한 모든 문자열은 String 타입이다.

Null

특정 속성의 값으로 사용될 경우, 해당 속성은 compile 되지 않는다.

Lists

JS의 Array와 유사한 타입이다.
소괄호를 사용한다.

Maps

JS의 Object와 동일한 타입이다.
소괄호를 사용한다.
내장 모듈 map을 이용해서 조회한다.

스타일 재활용

@mixin

스타일을 정의해서 저장해두고, 함수처럼 재활용할 수 있게 하는 규칙

@mixin string[($parameters)] { style } 문법으로 스타일을 정의할 수 있다.
Sass에서는 = 기호로 사용한다.
믹스인 또한 중첩이 가능하다.
믹스인의 변수 뒤에 spread operator를 이용해서 rest parameter를 사용할 수 있다.
parameter에 :을 사용해서 default parameter를 지정할 수 있다.

@include

만들어진 믹스인을 불러와서 재사용할 수 있게 하는 규칙

@include string[(arguments)]; 를 이용해 믹스인을 재사용할 수 있다.
Sass 에서는 + 기호로 사용한다.
arguments의 타입이 Lists일 때, 뒤에 spread operator를 이용해서 전개할 수 있다.
arguments에 :을 사용하여 순서에 상관없이 명시적으로 값을 정의하는 keyword arguments를 사용할 수 있다.
믹스인 이름과 스타일 블록 사이에 using (variable)을 이용해서 데이터를 추가로 전달받을 수 있다.

@content

@include에서 @mixin으로 추가적인 스타일을 전달할 때 사용하는 규칙

아래처럼 @include 문법 뒤에 중괄호로 style을 정의하고, @mixin 에서는 @content를 이용해 해당 스타일을 받아온다.

scss

@mixin font($fontSize: 12px) {
    font-size: $fontSize;
    @content;
}

.header {
    @include font(15px) {
        font-weight: border;
        font-family: serif;
    };
}

css

.header {
  font-size: 15px;
  font-weight: border;
  font-family: serif;
}

소괄호를 이용해서 @include에서 사용할 데이터를 전달할 수 있다.

@extend

스타일을 정의해두고 가져오는 믹스인과 달리, 이미 정의된 스타일을 상속받을 때 사용하는 규칙

@extend selector를 이용해서 사용한다.
Sass에서는 %(Percent)기호를 사용해서 extend에 사용하는 Placeholder Selector 로 사용할 수 있다.
중첩 구조에서 사용하는 경우, 의도하지 않은 선택자가 만들어질 수 있다.
대부분은 믹스인을 사용하는 것이 좋다.