Sassを勉強したきっかけ
大学２年生のryousukeです！！
自分のアルバイト先で、案件のモックアップをすることになり
受け身になりますが、先輩からSassが便利だからオススメということでSassの勉強を始めました。
メモ代わりに、適当にQiitaの方にまとめてみました。(メモ代わりなので、色とか付けてないです笑)
Sassとは
一言で表わすと、SassとはCSSを拡張した言語です。
変数や関数が使えて、CSSの記述が楽になります。
Sassを使うメリット
記述の簡略化ができる
四則計算が使用できる
コードの再利用ができる
関数や変数が使える
Sassのデメリット
ファイルの形式がcssでは無いので、コンパイルする必要がある
デザインにこだわらないのであれば、必要性は低い
Sassのコンパイル方法
Sassのコンパイル方法は、拡張機能なりgulpをインストールすることでコンパイルができる
vscode上だけで済むので拡張機能をインストールするのがオススメ
gulpはインストールして、gulpfile.jsにscssをcssに変換する以下のタスクを書いてコンパイルする
var gulp = require('gulp');
var sass = require('gulp-sass')(require('sass'));
var sassGlob = require('gulp-sass-glob');
var plumber = require('gulp-plumber');
var notify = require("gulp-notify");
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssdeclsort = require('css-declaration-sorter');
var mqpacker = require('css-mqpacker');
var browserSync = require('browser-sync');
gulp.task('sass', function() {
return gulp.src('./sass/**/*.scss')
.pipe(plumber({errorHandler: notify.onError("Error:")}))
.pipe(sassGlob())
.pipe(sass({outputStyle: 'expanded'}))
.pipe(postcss([mqpacker()]))
.pipe(postcss([cssdeclsort({order: 'alphabetical'})]))
.pipe(postcss([autoprefixer()]))
.pipe(gulp.dest('./css'));
});
gulp.task( 'default', function() {
gulp.watch( './sass/**/*.scss', gulp.task('sass'));
});
詳しくは、こちら
https://wayasblog.com/gulp-sass-compile/
Sassの使い方
※Sassの書き方には、sass記法とscss記法があるが、今回はscssの方で書く
ネスト(入れ子)
コンパイル時に親セレクタを先頭につけてCSSを生成してくれる
ネストしすぎると、可読性が落ちるので、２～３回ぐらいに抑える必要がある
&を使うと、親セレクタを参照する
main{
h1{
font-size: 50px;
}
.post{
color: black;
}
&:hover{
padding: 20px;
}
}
変数
Sassでは、変数を使用できます
$back-color : #282F32;
body{
h1{
background : $back-color;
}
}
パーシャル
Sassのコードを目的やパーツごとに、別々のファイルで管理できる
その別々のファイルのことをパーシャルと呼ぶ。
ファイル名は _ と一緒に記述する
例 _header.scss
//_header.scss 参照元
header{
padding: 20px;
}
//style.scss 参照先
@use 'header';
//これでパーシャルファイルを呼び出す
//アンダーバー、ファイル名、拡張子の記述は必要ない
//フォルダーがある場合、フォルダー名も記述する必要がある 例@use 'page/header';
body{
background: red;
}
パーシャルの変数を参照元で利用したい場合は、[ファイル名.$変数名]にする必要がある
//style.css
@use 'page/header';
body{
background: header.$back-color;
}
Mixin
スタイルの集まりを定義して、別の場所で再利用できる
関数に近い
@mixin mixin名で定義
@include mixin名で呼び出す
@mixin circle{
padding : 20px;
}
div{
@include circle;
}
また引数を使用できる
@mixin circle($size){
padding : $size;
}
div{
@include circle(60px); //mixin名(引数)
}
また引数は、初期値が設定できる
//@mixin mixin名(引数 : 初期値){}
@mixin circle($size : 60px,$color : red){
padding : $size;
background : $color;
}
@mixinの中で@contentを使用するとコンテントブロックを渡すことができる
@mixin circle{
@media (min-width : 300px){
@content; //color : redになる
}
}
div{
@include circle{
color : red;
}
}
Sassは自作関数を定義できるが、覚え始めの段階では必要なそうなのでパス！！
↧