css는 웹에 표현될 요소들을 시각적으로 풍부하게 꾸며주고, 장식하는 역할을 맡고 있습니다.
이런 css의 장점때문에 오늘날의 웹은 과거와 비교해서 훨씬 세련되게 발전할수 있었습니다.
하지만 시각적으로 화려한 UI와 디자인을 웹에 부여하기 위해서 고도화된 css 코드를 작성해야 하는데,
그에 반해 css문법적 한계는 뚜렷 한 상황 이었습니다.
이때 등장한 것이 바로 "CSS 전처리기(CSS Preprocessor )" 입니다.
[CSS 전처리기(CSS Preprocessor )]
css 전처리기는 오늘날 복잡해지고 무거워진 css코드를 보다 간결하고 깔끔하게 만들어줍니다.
전처리기는 CSS 문법과 굉장히 유사하지만 선택자의 중첩(Nesting)이나 조건문, 반복문, 다양한 단위(Unit)의 연산 등… 표준 CSS 보다 훨씬 많은 기능을 사용해서 편리하게 작성할 수 있고 이로인해 유지보수의 용이함과 더불어 확장성또한 높일수 있게 되었습니다.
전처리기의 종류는 많은데 그중 Sass(SCSS) 는 다른 전처리기의 장점들과 더불어 오랜기간 사용되어와 높은성숙도와 참고할만한 레퍼런스를 많이 보유하고 있기때문에 대중적으로 활용되고 있습니다.
[SCSS 와 Sass의 차이점]
Sass(Syntactically Awesome Style Sheets)의 3버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합(Superset) 입니다.
이 둘의 차이점은 문법적으로 간결성 정도에만 차이가 있을뿐 큰 차이는 없습니다.
[ scss 컴파일하기 ]
sass(SCSS) 로 작성한 코드는 간결하고 유지보수가 쉽습니다. 하지만 SCSS파일이나 Sass 파일이나 둘다 CSS 파일이 아니기때문에 브라우저가 해석하지 못합니다.
브라우저가 해석을 못해 작성한 코드가 표현이 안된다면 css 전처리기를 사용하는 의미가 없어집니다...
이를 위해서 작성한 Sass(SCSS)파일을 CSS 파일로 컴파일 합니다.
scss 컴파일러의 종류도 많지만 2021년 기준 가장 최신인 "Dart-Sass"를 이용해 컴파일을 진행하겠습니다.
1. Dart-sass 설치
우선 인 npm이 깔려 있어야 합니다.
그후 CLI 를 통해 다운합니다.
npm install sass -g설치가 완료되었는지 확인합니다.
npm show sass version
2. SCSS 파일생성후 css컴파일 되는지 확인
위 사진과 같이 SCSS파일을 생성한후 컴파일러를 돌려 CSS 파일로 잘 생성되는지 확인합니다.
확인을 위해서는 CLI에 다음과 같은 명령어를 적어줘야 합니다.
sass (지정할옵션) <변환할 scss 파일명> <변환될 css 파일명>SCSS 파일명이 main이고 styles 폴더안에 들어가 있는상태, CSS파일명이 style 이라면 아래와 같을것 입니다.
sass styles/main.scss style.css
최종적으로 CSS파일과 SCSS파일이 동일한 스타일이 적용되었는지, 즉 컴파일이 완료되었는지 확인해줍니다.
3. package.json 파일의 script 로 컴파일명령어 간소화 하기
기존의 길고 복잡했던 컴파일 명령어를 package.json의 script를 통해 간소화 할 수 있습니다.
위 사진의 sass는 npm을 통해 실행할 스크립트 이름을 지정하는것으로
이후에 CLI를 통해 훨씬 간소화된 명령어로 컴파일을 진행할수 있습니다.
npm run sass
위 명령어에서 sass는 본인이 편한이름으로 지정 가능합니다.
"sass -w styles/main.scss style.css" 에서 -w는 컴파일러 옵션 입니다.
매번 수동으로 SCSS파일을 작성한뒤 컴파일을 진행하기에는 점차 작업량이 많이질수록 번거롭고 힘이 듭니다.
"--watch" 는 파일에 변화가 있을때 바로바로 캐치하여 실행하는 옵션인데, SCSS 코드를 수정할때 자동으로 컴파일이 실행되어 CSS 파일도 업데이트 됩니다.
위와같이 유용한 옵션들은 컴파일러 공식문서를 통해서도 확인 가능합니다.
Sass: Dart Sass Command-Line Interface
The Dart Sass executable can be invoked in one of two modes. sass [output.css] One-to-one mode compiles a single input file (input.scss) to a single output location (output.css). If no output location is passed, the compiled CSS is printed to the termi
sass-lang.com
출처:
https://heropy.blog/2018/01/31/sass/
김버그의 UI 개발 부트캠프 - 경력같은 신입으로 레벨업 (goorm.io)
'HTML & CSS > Sass(SCSS)' 카테고리의 다른 글
| Sass(SCSS) 기초문법 1 (0) | 2021.11.28 |
|---|