TIL 24

임태진·2021년 1월 17일
0

✔️ Sass 란?


Syntactically Awesome Style Sheets 의 약자로 CSS를 확장한 언어이다.
Sass 는 Sass표기법(.sass)과 Scss표기법(.scss)이 존재하는데, Sass 3.0부터 기본 표기법으로 채택된 Scss(sassy CSS) 사용을 권장하고 있다.

Sass는 점점 커지고 복잡해지며, 유지관리가 어려워지고 있는 CSS를 보완하고 조금 더 CSS에 친숙한 전처리기를 만들기 위해 만들어졌다. Sass를 사용하면 CSS에 아직 존재하지 않는 변수, 중첩, 믹스 인, 상속 및 CSS작성을 조금더 수월하고 유용하게 만들 수 있다. sass / scss 는 거의 동일한 기능을 가지고 있다.


✔️ 1. 설치

  • 설치 시 node-modules 폴더에 node-sass 폴더가 생성된다. (package source code)
  • --save : package.json에 설치된 패키지의 이름과 버전 정보를 업데이트


✔️ 2. .css -> .scss 확장자 변경


  • Sass 파일의 확장자는 .scss 입니다. .css 확장자로 되어 있는 파일을 전부 .scss 확장자로 바꾼다. (자바스크립트 파일의 import 구문도 수정한다.)

✔️ 3. Nesting 기능 적용하기


  • Sass의 가장 기본적인 기능으로 Nesting 이라는 것이 있다. JSX 최상위 요소의 className을 컴포넌트 이름과 동일하게 설정해주고, .scss 파일에서도 최상위 요소 안 쪽에서 하위 요소의 스타일 속성을 정의할 수 있도록 해준다.

  • nesting 을 통해 selector 의 관계를 명확하게 이해할 수 있을 뿐만 아니라 변수를 활용함으로써 코드의 중복을 피할 수 있다.


✔️ 4. 변수활용, &연산자, extend 등 기능 적용하기


  • Sass 에는 Nesting 외에도 여러가지 기능이 있다.

profile
Frontend-Developer

0개의 댓글