image: https://www.javascriptwillrule.com/css-sass-vs-scss-which-one-should-you-use/
SASS(Syntactically Awesome StyleSheets) 는 CSS pre-processor로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장(extension)이다.
CSS는 배우기 쉬워 프로젝트 초기에는 문제가 없지만 프로젝트가 클수록 코드는 복잡해지고, 스타일시트도 같이 관리할게 많아지면서 복잡해진다. 따라서 추가 및 수정 등 유지보수에 힘이 들어간다. SASS는 한마디로 CSS를 구조화하여 개발의 편의성을 높혀준다.
정리를 하면 SASS는...
SASS 표기법
확장자 .sass
.gridList
width: 100%
height: 100%
li
margin: 10px
margin-left: 1.7vw
box-shadow:
0 1px 3px 0 rgba(0, 0, 0, 0.2),
0 1px 1px 0 rgba(0, 0, 0, 0.14),
0 2px 1px -1px rgba(0, 0, 0, 0.12)
SCSS(Sassy CSS) 는 SASS의 3.0버전부터 도입되어 좀 더 CSS와 친화적인 문법을 제공한다. SCSS는 CSS와 거의 같은 표기법으로 SASS 기능을 지원하여 그냥 SASS와 같다고 봐도 무방하다. 다만, 기존 SASS와의 문법의 조그만한 차이가 있다. SASS 표기법보다 실무에서는 CSS 친화적인 SCSS 표기법를 사용하는 경우가 더 많다고 한다.
SCSS 표기법
확장자 .scss
.gridList {
width: 100%;
height: 100%;
li {
margin: 10px;
margin-left: 1.7vw;
box-shadow:
0 1px 3px 0 rgba(0, 0, 0, 0.2),
0 1px 1px 0 rgba(0, 0, 0, 0.14),
0 2px 1px -1px rgba(0, 0, 0, 0.12);
}
}
SCSS는 기존 SASS에서 중괄호( {} ) 가 추가되었고, 세미콜론 ( ; )이 추가되었다. 두개만 추가 되었는데도 객체 형식으로 확실히 가독성이 증가하였다.
image: https://velog.io/@jch9537/CSS-SCSS-SASS
다양한 컴파일 방법 중, 실제 내가 사용중인 컴파일러를 소개하고, 코드에서 발취해보았다.
node-sass는 Node.js를 컴파일러인 LibSass에 바인딩된 라이브러리이다.
npm으로 설치가 가능하다.
https://github.com/sass/node-sass
$ npm install node-sass
$ npm install --save--dev style-loader css-loader sass-loader
webpack.config
/**
* Sass stylesheet files with source maps.
*/
{
test: /\.scss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
sourceMap: process.env.NODE_ENV
=== 'development'
}
},
{
loader: 'sass-loader',
options: {
sourceMap: process.env.NODE_ENV
=== 'development'
}
}
]
}