sass導入
sass(Syntactically Awesome Style Sheets)は、CSS を便利に使えるように拡張した言語。
1. node-sassをインストールする。
npm install -S node-sass
2. package.jsonにsmartz.scss用のコンパイルコマンドを追加する。
{
"scripts": {
"compile-sass": "node-sass src/sass/smartz.scss src/css/smartz.css",
"minify-sass": "node-sass src/sass/smartz.scss src/css/smartz.min.css --output-style compressed",
"map-sass": "node-sass src/sass/smartz.scss src/css/smartz.css --source-map true"
},
...
}
src/sass/smartz.scss
@import "variables";
@import "footers";
src/sass/_variables.scss
$primary-color: #3472F7 !default;
$primary-bg: #3472F7 !default;
$primary-states-color: #1D62F0 !default;
src/sass/_footers.scss
.footer{
background-color: $primary-color;
}
3. コマンドを実行すると、cssファイルが生成される。
npm run compile-sass
src/css/smartz.css
.footer{
background-color: #3472F7;
}