[웹 프론트앤드 개발 더하기] SCSS 빠르게 익히기

0. 시작하는 글

- SCSS에 간단하지만 꼭 필요한 내용들 적어보았다.

 

 

1. SCSS 특징

- SCSS는 CSS Preprocessor(CSS 전처리기) 중 가장 많이 쓰이는 CSS 전처리기 중 하나이고, CSS 코드 사용에 편의성을 제공해 준다.

- Sass(SCSS), Less, Stylus가 가장 많이 쓰이는 CSS 전처리기이다.

 

- SCSS와 Sass는 비슷한데, 유효범위를 Sass는 들여쓰기로 구분하고, SCSS는 { } 로 범위를 구분한다.

1) variable 선언 가능
ex) $orange-bg : orange;
: 변수로 선언하여 여러 곳에 불러서 쓸 수 있음

 

- LESS는 @로 변수를 선언함

ex) @orange-bg : orange;

 

- SCSS는 변수 재할당이 가능함 (LESS는 변수 재할당이 불가능 함)

 

- 변수 선언 뒤에 !global 을 붙여주면 해당 변수를 전역으로 할당이 가능

ex)

. box {

$orange-color: orange !gloabal
}

2) nesting (중첩) 구조

- css가 좀 더 직관적이고 간편해짐

- & 를 이용해서 코도 연결이 가능

ex) &:focus {

color: blue;

}

3) mixin
@mixin 어노테션을 붙여 함수를 만들고 @include로 가져다 쓸 수 있음

 

 

4) extend

- 같은 코드 방지를 위한 상속할 때 사용

 

extend용으로 만든 scsss 경로를 불러와서 @extend 로 스타일 상속 시킴

 

5) content

- mixin에서 @content를 쓰면 mixin을 가져다 쓰는 곳에서 스타일을 정의할 수 있음

 

6) function

- @if, @else if, @else 뿐만 아리나 @for , @while도 사용이 가능

 

 

2. Mixin 관련 정보

- 많은 오픈 소스들이 있어서 참고해서 사용할 수도 있다.

 

1) 필자 같은경우는 mixin을 사용할때, 아래와 같은 경우에서 사용 했다.

- 각 국가별 font-family 변경

- 반응형 사이트를 위해 특정 width에서 vw로 변환해주는 부분

- 특정 국가에서 폰트 크기와 line-height를 다르게 할때,

- 디자인 시스템에 맞게 font-size, line-height를 변경해 주는 부분

 

2) mixin이 잘되어 있는 오픈 소스

- Awesome mixin : https://github.com/colourgarden/awesome-scss

colourgarden/awesome-scss

 

 

3. References

http://sass-lang.com/documentation
https://sass-guidelin.es/ko/

 

 

유익하게 읽으셨다면 1초만 내주셔서 아래 "공감" 클릭 부탁드립니다 ^^