[TIL] SCSS(1)

JaeungE·2022년 5월 1일
0

TIL

목록 보기
17/29
post-thumbnail

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

  • JSboolean과 동일한 타입이다.

Strings

  • ColorsBooleans를 제외한 모든 문자열은 String 타입이다.

Null

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

Lists

  • JSArray와 유사한 타입이다.

  • 소괄호를 사용한다.


Maps

  • JSObject와 동일한 타입이다.

  • 소괄호를 사용한다.

  • 내장 모듈 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 로 사용할 수 있다.

  • 중첩 구조에서 사용하는 경우, 의도하지 않은 선택자가 만들어질 수 있다.

  • 대부분은 믹스인을 사용하는 것이 좋다.





참고 자료
Sass: @mixin and @include

0개의 댓글