ブログ
コピペで簡単！GulpでDart Sass入門
みなさん、こんにちは。山田です。
Sass界ではDart Sassというものが注目を浴びていると小耳に挟みました。
公式でもこちらを推奨しており、Sassの新機能はこちらから実装されるとか。
記述の方法も変わってくるとなれば、フロントエンドエンジニアとして生きていく上では避けては通れなくなってしまう。
@importが@useに変わる、などの変更点についてはすでに多くの方が記事にしているようなので、今回はコピペでサクッと実行してコンパイルできるような形にしていきたいと思います。
今回はこのような構成にして、コンパイルにはGulpを使用します。
CSS設計はFLOCSSを参考にしていますが、この辺はお好みに合わせて編集してください。
/
├ htdocs (閲覧環境)
│ └ css
│ └ style.css
├ gulpfile.js
├ package.json
└ src/ (開発環境)
└ scss
├ style.scss(style.css)
├ foundation
│ ├ _base.scss
│ ├ _mixin.scss
│ ├ _ress.scss(お好みでreset.cssを記述)
│ └ _vars.scss
├ layout
└ object
├ component
├ project
│ └ _top.scss
└ utility
└ _color.scss
まずは変更となる記述について。
style.scssに分割したファイルを読み込んでいくとこんな感じになります。
Dart Sassでは、@importで読み込んていたものを@useに書き換える必要があります。
// style.scss
@charset "UTF-8";
@use 'foundation/ress';
@use 'foundation/base';
@use 'object/project/top';
@use 'object/utility/color';_vars.scssには変数をまとめて書いていきます。
色の管理などにはmap-get 関数をよく使うのですが、記述は以下の通り。
冒頭に@use "sass:map";とする必要があります。
mixinや変数など、分割したファイル内でも使う記述をしているファイル。
こちらはstyle.scssでまとめてインポートして使用していたのですが、使いたいファイル内にそれぞれ記述する必要があるようです。
// _vars.scss
@use "sass:map";
$size: 16px;
$colors: (
'red': #f00,
'black': #000,
'white': #fff
);
@function color($key) {
@return map.get($colors, $key);
}さらに_vars.scssで宣言した変数を使いたい場合は、使いたいファイルごとに@use 'foundation/vars';と記述した上で、vars.$sizeなどとファイル名.変数という形で書きます。@use 'foundation/vars' as v;
という風に記述するとファイル名を書かずにasで定義した文字列だけで済ませるようにもできます。
// _mixin.scss
@use 'foundation/vars';
@mixin fz($size: vars.$size, $lh: 1.5) {
font-size: $size;
line-height: $lh;
}// _base.scss
@use 'foundation/vars';
@use 'foundation/mixin' as m;
body {
@include m.fz;
}// _top.scss
@use 'foundation/vars' as v;
@use 'foundation/mixin' as m;
.p-top {
@include m.fz(14);
}// _colors.scss
@use "sass:map";
@use 'foundation/vars' as v;
@use 'foundation/mixin' as m;
@each $key, $color in v.$colors {
.u-bgc-#{$key} {
background-color: map.get(v.$colors, $key);
}
}
コンパイルに使ったブラグインをまとめたpackage.jsonはこちら。
最低限必要なものしか記述していないため、状況に応じて編集してください。
これを作成したら、npm install
// package.json
{
"name": "hogehoge",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^9.8.5",
"css-mqpacker": "^7.0.0",
"fibers": "^5.0.0",
"gulp": "^4.0.2",
"gulp-postcss": "^8.0.0",
"gulp-sass": "^4.1.0",
"node-sass": "^4.14.1",
"sass": "^1.26.10"
}
}実際に使用したgulpfile.jsはこちら。
// gulpfile.js
const gulp = require('gulp');
const sass = require('gulp-sass');
const fibers = require('fibers');
const postcss = require('gulp-postcss');
sass.compiler = require('sass');
const paths = {
css: {
src: './src/scss/**/*.scss',
dest: './htdocs/css/'
}
}
//---------------------------------------------------
// CSS
//---------------------------------------------------
gulp.task('sass', () => {
return gulp.src(paths.css.src)
.pipe(sass({
fiber: fibers,
style: 'expanded'
}).on('error', sass.logError))
.pipe(postcss([
require('autoprefixer')({
grid: "autoplace",
cascade: false
}),
require('css-mqpacker')
]))
.pipe(gulp.dest(paths.css.dest))
});
//---------------------------------------------------
// Default
//---------------------------------------------------
gulp.task('default', gulp.series(
gulp.parallel('sass')
));
//---------------------------------------------------
// Watch
//---------------------------------------------------
gulp.task('watch', () => {
gulp.watch(paths.css.src, gulp.task('sass'));
});
sass.compilerのプロパティを設定することで、Dart SassとNode Sassのどちらを使用するか選択できます。
現在、デフォルトはNode Sassになっているため、Dart Sassを選択してください。Node Sassを使う場合もデフォルトの設定が変更される場合があるため、明示的に指定することをお勧めしているとのことです。
参考サイト
まずは実際に動かしてみて、使っていきながら覚えていきましょう！
私もまだまだわからないことだらけなので、実際に使っていきながら勉強していきたいと思います。