Sassを勉強したきっかけ

大学２年生のryousukeです！！

自分のアルバイト先で、案件のモックアップをすることになり受け身になりますが、先輩からSassが便利だからオススメということでSassの勉強を始めました。

メモ代わりに、適当にQiitaの方にまとめてみました。(メモ代わりなので、色とか付けてないです笑)

Sassとは

一言で表わすと、SassとはCSSを拡張した言語です。

変数や関数が使えて、CSSの記述が楽になります。

Sassを使うメリット

記述の簡略化ができる
四則計算が使用できる
コードの再利用ができる
関数や変数が使える

Sassのデメリット

ファイルの形式がcssでは無いので、コンパイルする必要がある
デザインにこだわらないのであれば、必要性は低い

Sassのコンパイル方法

Sassのコンパイル方法は、拡張機能なりgulpをインストールすることでコンパイルができる

vscode上だけで済むので拡張機能をインストールするのがオススメ

https://rico-notes.com/programming/css/vscode%E3%81%A7sassscss%E3%82%92%E8%87%AA%E5%8B%95%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB%E3%81%99%E3%82%8B%E7%B0%A1%E5%8D%98%E3%81%AA%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%95/

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:<%= error.message %>")}))
.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'));
});

詳しくは、こちら

npm install sassをする必要があるかも

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 circle{
    @media (min-width : 300px){
        @content; //color : redになる
    }
}

div{
    @include circle{
       color : red;
    }
}

Sassは自作関数を定義できるが、覚え始めの段階では必要なそうなのでパス！！