[Style] SCSS

chosh·2023년 2월 7일

Sass는 CSS의 전처리기 입니다.

웹은 CSS 만 읽을 수 있기 때문에 더욱 편해진 문법을 사용해서 작성한 SCSS 파일을 전처리하여 CSS 파일로 컴파일 시켜주게 됩니다

sass 는 모든 버전의 css와 호환
sass 는 css로 컴파일 되는 스타일 시트 언어
변수, 중첩, 믹스인, 함수 등을 사용 가능
scss는 sass3버전에서 생겨났으며, sass를 더욱 css와 유사하게 사용 할 수 있도록 나왔습니다.
sass는 중첩을 표현 할 때, 들여쓰기를 사용하고, 속성 구분을 위해 줄바꿈을 사용하지만,
scss는 중첩을 표현 할 때, 중괄호를 사용하고, 속성 구분을 위해 세미콜론을 사용

SASS 와 SCSS 의 차이

SASS

nav
  ul // 중첩을 위해 들여쓰기
    margin: 0 // 속성구분은 줄바꿈
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

SCSS

nav { // 중첩을 위해 중괄호로 감쌈
  ul {
    margin: 0; // 속성 구분을 위해 세미콜론 사용
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

CSS 보다 편리한점

Nesting (중첩)

CSS

// nav 안에 있는 요소들에 적용하려면 나열을 해줘야 됨
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

SCSS

// 중첩된 요소를 한번에 묶을 수 있어 편리
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

선택기 목록 (콤마로 구분된 셀렉터는 따로따로 중첩됩니다)

CSS

.alert ul, .alert p, .warning ul, .warning p {
  margin-right: 0;
  margin-left: 0;
  padding-bottom: 0;
}

SCSS

// 콤마로 구분되서 위의 css 코드와 동일하게 따로따로 중첩 됨
.alert, .warning {
  ul, p {
    margin-right: 0;
    margin-left: 0;
    padding-bottom: 0;
  }
}

선택기 연산자

CSS

// 부모 ul 태그 아래 있는 li 태그
ul > li { 
  list-style-type: none;
}

// h2 태그 다음에 있는 p 태그
h2 + p {
  border-top: 1px solid gray;
}

// p 태그 다음에 있는 모든 span 태그
p ~ span {
  opacity: 0.8;
}

참고 > 연산자 ,+ 연산자 ,~ 연산자

SCSS (연산자 위치가 외부 셀렉터 뒤에와도 되고, 내부 셀렉터 앞에와도 되고, 연산자 단독으로 사용해도 됨)

ul > { // 외부 셀렉터 다음에 연산자를 사용
  li {
    list-style-type: none;
  }
}

h2 {
  + p { // 내부 셀렉터 앞에 연산자 사용
    border-top: 1px solid gray;
  }
}

p {
  ~ { // 내외부 셀렉터 사이에서 단독으로 연산자를 사용해서 묶어줌
    span {
      opacity: 0.8;
    }
  }
}

#{}을 사용하여 동적인 값 전달 가능 (mixin을 사용 할 때 유리함)

CSS

@charset "UTF-8";
// 이모지는 여러가지가 있기 때문에 동적으로 전달하면 효과적으로 사용할 수 있음
span.emoji-women-holding-hands {
  font-family: IconFont;
  font-variant: normal;
  font-weight: normal;
  content: "👭";
}

SCSS

@mixin define-emoji($name, $glyph) { // 이렇게 동적으로 값을 넣어줄수 있도록 mixin 선언
  span.emoji-#{$name} { // 보간(#{})을 이용하여 동적인 값을 이어서 넣어줌
    font-family: IconFont;
    font-variant: normal;
    font-weight: normal;
    content: $glyph;
  }
}

@include define-emoji("women-holding-hands", "👭"); // 사용하는 곳에서 동적으로 이모지를 넣어줄 수 있음

mixin

mixin은 반복되는 스타일을 지정 하기도 하고,
동적인 값을 넣어줄때도 사용 가능

@mixin 으로 선언 해주고
@include 로 사용
mixin 중첩도 가능

@mixin reset-list { // mixin 선언
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin horizontal-list {
  @include reset-list; // 위에서 선언한 mixin도 사용 가능

  li {
    display: inline-block;
    margin: {
      left: -2px;
      right: 2em;
    }
  }
}

nav ul {
  @include horizontal-list; // @include를 이용해서 사용
}

보통 mixin 파일을 따로 만들어서 관리하고, mixin 이 모아져 있는 파일을 import 시켜서 사용합니다.
import 하는 방법은
@use 를 사용해서 import 시켜줍니다.

@use "파일명";

.className {
	@include 파일명.믹신이름
}

@import 를 사용해서 import 시킬수 있지만 @use 사용을 권장

// 공식문서 내용
The Sass team discourages the continued use of the 
@import rule. Sass will gradually phase it out 
over the next few years, and eventually remove it 
from the language entirely. Prefer the @use rule 
instead. (Note that only Dart Sass currently 
supports @use. Users of other implementations must 
use the @import rule instead.)

@import를 사용하면 전역적으로 가져오기 때문에 없앨 예정이라고 함