SCSS : variable, nesting, mixins, extends

SCSS : CSS Processer (전처리기)

CSS Processor 에는 scss 외에도 stylus, less 도 있다.

scss가 sass 를 위한 공식적인 syntax로 릴리즈 되면서 scss와 sass 가 점점 업계 표준으로 되어가고 있다.

scss는 css를 programming language 처럼 syntax를 개선하는데, 이를 사용하면 css 없는 많은 유용한 기능을 사용할 수 있다. 단, 이것을 위해 compile과 build 하는 과정이 필요하다.

gulp 는 compile 하거나 transform 해주는 nodeJS package

 

gulpfile.babel.js 에서 routes 상수를 확인하면 해당 gulpfile 이 styles.scss 라는 특정 파일을 보고 있음을 알 수 있다. src:"src/scss/styles.scss"

src 주소파일에서 일어나는 모든 일은 css로 compile 된다. scss 파일에 coding 하면 css 파일로 compile 되고 이 모든 과정은 terminal의 console 창에서 확인 가능하다.

 

Browser 은 scss 파일을 이해하지 못하므로 html 에서는 scss가 아닌 compile 된 css 파일을 link 해주어야 한다.

 

 

variable

website에서 가장 중요한 colors 혹은 가장 중요한 styles 등을 저장하고 싶을 때 사용한다.

scss에서 variable을 사용하는 방법은 scss 폴더ㅔ _variable.scss 파일을 생성하고 해당 파일에 코딩을 하면 된다.

scss 에서 언더스코어( _ ) 로 시작하는 파일은 css로 변하지 않았으면 하는 파일들 즉, css로 translate 되거나 compile 되기를 원치 않는 scss 만을 위한 파일이다.

ex)     $[varialbe 이름]:[value];      ←이와 같은 방식으로 variable 을 지정하고, styles.scss 파일에 import 해서 사용하면 된다.

 

Nesting

nesting은 target 하는 element 를 더 명확하게 나타냄으로써 코드를 좀더 정확하게 해준다.

child element 들을 따로 적인 않고 parent 요소의 하위에 바로 작성하면 된다. 

nesting 을 중복하는 것 역시 가능하다.

 

mixins

 

 

 

https://heropy.blog/2018/01/31/sass/

Sass(SCSS) 완전 정복!