sassとは？
ずばり、簡単に言うとSassはプログラムっぽくCSSを書くと言うことです。
通常のCSSでのコーディングよりはるかに作業効率が向上しますので良いことづくしです。
SassはCSSのメタ言語と言われており、より効率的に書けるようにしたものになります。
メリット
- 関数が使える
- 四則演算ができる
- 変数で値を使いまわすことができる
- コードが見やすくなる etc.....
sassが使えるようになると作業効率がアップされ、非常に便利なものになっておリます。
チームで開発するときも用いられているのがsassです。使えるようになるとチームでの作業も楽々と進められるようになるので、この機会に使えるようになりましょう。
デメリット
- 環境を作るのが面倒
それくらいですかね？？
それぐらいと思うほど私はsassにはメリットがあると感じています。
しかし、sassを導入するのは確かに面倒な部分もありますが、それさえできるようになれば、便利だなと思える日がくると思うので頑張りましょう！！
sassの環境作り
windowsとmacユーザーで導入方法が少し変わってくるのですが、あまり大差ないです。Macユーザーはデフォルトで「Rudy」が入っているので、自動でCSSをコンパイルしてくれるので、コンパイラは不要な場合が多いです。
Winユーザーは「Rudy」のインストールが必要でちょっと面倒なんですが、GUIコンパイラをインストールすれば「Rudy」のインストールは必要なく簡単にコンパイルできます。
順序
- Node.jsのサイトにアクセスしダウンロードします。
- コードを開いてターミナルを開く
- npm init -yでpackage.jsonが作成される
- npm install gulpでpackage-lock.jsonとNode_modulesが作成される
- gulpfile.jsと言うファイルを作る。
'use strict';
let gulp = require('gulp');
let sass = require('gulp-sass');
let cleanCSS = require('gulp-clean-css'); // minify
let sourcemaps = require('gulp-sourcemaps'); // dev toolからscssの何行目か確認
let sassGlob = require('gulp-sass-glob'); // パーシャルの一括読み込み
let rename = require('gulp-rename'); // rename
let autoprefixer = require('gulp-autoprefixer'); // ベンダープレフィックス
gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sassGlob())
.pipe(sass({ outputStyle: 'compact' }))
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./assets/css'));
});
gulp.task('minify', function () {
return gulp.src("./assets/css/*.css")
.pipe(cleanCSS())
.pipe(rename({
suffix: '.min',
}))
.pipe(gulp.dest('./assets/css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./sass/**/*.scss', gulp.task(['sass']));
});
- gulpfile.js内にこのコードを貼ってください。
- sassフォルダーを作成する。そのフォルダー内にstyle.scssのファイルを作る。
- npm install --save-dev ライブラリー名でインストールする。これをインストールしたいライブラリー毎にインストールする。
- そして gulp sassでコンパイルするとassetsフォルダーとcssが作られる。
だいぶざっくりですが、一通りはこんな感じです。
最後に
sassは使えたら非常に便利なので皆さんも使っていきましょう！！！！！
もし、ここが違うよとか教えていただけたら幸いです。