Sass(サス) 大学生がまとめてみた


<h2>Sassを勉強したきっかけ</h2>
<p>大学２年生のryousukeです！！</p>
<p>自分のアルバイト先で、案件のモックアップをすることになり
受け身になりますが、先輩からSassが便利だからオススメということでSassの勉強を始めました。
<p>メモ代わりに、適当にQiitaの方にまとめてみました。(メモ代わりなので、色とか付けてないです笑)</p>
<h2>Sassとは</h2>
<p>一言で表わすと、SassとはCSSを拡張した言語です。</p>
<p>変数や関数が使えて、CSSの記述が楽になります。</p>
<ul>
<h4>Sassを使うメリット</h4>
<li>記述の簡略化ができる</li>
<li>四則計算が使用できる</li>
<li>コードの再利用ができる</li>
<li>関数や変数が使える</li>
<h4>Sassのデメリット</h4>
<li>ファイルの形式がcssでは無いので、コンパイルする必要がある</li>
<li>デザインにこだわらないのであれば、必要性は低い</li>
</ul>

<h2>Sassのコンパイル方法</h2>
<p>Sassのコンパイル方法は、拡張機能なりgulpをインストールすることでコンパイルができる</p>
<p>vscode上だけで済むので拡張機能をインストールするのがオススメ</p>
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/

<p>gulpはインストールして、gulpfile.jsにscssをcssに変換する以下のタスクを書いてコンパイルする</p>
<pre>
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'));
});
</pre>
<span>詳しくは、こちら</span>
https://wayasblog.com/gulp-sass-compile/
<pre>npm install sassをする必要があるかも</pre>

<h2>Sassの使い方</h2>
<p>※Sassの書き方には、sass記法とscss記法があるが、今回はscssの方で書く</p>
<h2>ネスト(入れ子)</h2>
<p>コンパイル時に親セレクタを先頭につけてCSSを生成してくれる</p>
<p>ネストしすぎると、可読性が落ちるので、２～３回ぐらいに抑える必要がある</p>
<p>&を使うと、親セレクタを参照する</p>
<pre>
main{
  　h1{ 
　　　font-size: 50px;
　　}
  　.post{ 
　　　color: black; 
    }
   &:hover{
     padding: 20px;
   }
}
</pre>
<h2>変数</h2>
<p>Sassでは、変数を使用できます</p>
<pre>$back-color : #282F32;
body{
    h1{
       background : $back-color;
    }
}
</pre>
<h2>パーシャル</h2>
<p>Sassのコードを目的やパーツごとに、別々のファイルで管理できる</p>
<p>その別々のファイルのことをパーシャルと呼ぶ。
ファイル名は _ と一緒に記述する</p>
<span>例 _header.scss </span>
<pre>//_header.scss　参照元
header{
      padding: 20px;
}
</pre>
<pre>//style.scss 参照先
@use 'header'; 
//これでパーシャルファイルを呼び出す 　
//アンダーバー、ファイル名、拡張子の記述は必要ない
//フォルダーがある場合、フォルダー名も記述する必要がある　例@use 'page/header';

body{
    background: red;
}
</pre>
<p>パーシャルの変数を参照元で利用したい場合は、[ファイル名.$変数名]にする必要がある</p>
<pre>//style.css
@use 'page/header';

body{
    background: header.$back-color;
}
</pre>
<h2>Mixin</h2>
<p>スタイルの集まりを定義して、別の場所で再利用できる</p>
<p>関数に近い</p>
<p>@mixin mixin名で定義</p>
<p>@include mixin名で呼び出す</p>
<pre>
@mixin circle{
    padding : 20px;
}

div{
    @include circle;
}
</pre>
<p>また引数を使用できる</p>
<pre>
@mixin circle($size){
    padding : $size;
}
div{
    @include circle(60px); //mixin名(引数)
}
</pre>
また引数は、初期値が設定できる
<pre>
//@mixin mixin名(引数 : 初期値){}

@mixin circle($size : 60px,$color : red){
    padding : $size;
    background : $color;
}
</pre>
@mixinの中で@contentを使用するとコンテントブロックを渡すことができる
<pre>
@mixin circle{
    @media (min-width : 300px){
        @content; //color : redになる
    }
}

div{
    @include circle{
       color : red;
    }
}
</pre>
<p>Sassは自作関数を定義できるが、覚え始めの段階では必要なそうなのでパス！！</p>