Sass/SCSSまとめ

今回は、Sassについて簡単にまとめてみたメモ。

コマンドラインでの操作

ドットインストールのレッスンでは表示をコマンドラインで確かめていたので、まずは、ターミナルで操作する際のコマンドからまとめ

SassのファイルをCSSのファイルに変換するコマンド	sass scss/main.scss:css/main.css
より分かりやすくCSSどおりのコードにするコマンド	sass --style expanded scss/main.scss:css/main.css
自動的にscssのファイルに変更があった場合cssに反映させるコマンド	sass --style expanded --watch scss:css 　　　※こうすると監視が始まる（ctr + Cでストップ）

例）

Sassの変数の宣言方法

$baseFontSize: 14px;　数値

$imgDir: "../img/;　文字列(この例の場合連結させてファイル名にすることも可

　background: url("#{$imgDir}bg.png");　（こういう書き方可）

$brandColor: rgba(255,0,0,0.9);　色

　color: lighten($brandColor, 30%);　（こういう書き方可）

sass-lang.com

Sassで直接使用できるもの

条件分岐　@if と@elseを使用

ループ　@for　@while

リスト（似たようなデータをまとめて管理するデータ型）@each

関数　@function

別ファイルを作ってまとめて管理するときはパーシャルを使う

（ _  始まりのファイル名）

→呼び出しは@import　@import "settings";

@mixin と　＠include　

ミックスインであらかじめ指定しておきincludeで呼び出す

引数やデフォルト値の指定もできる（画像は引数とデフォルト値を指定したもの）

@extend 継承

※ターミナルで表示確認

慣れればとても使いやすいと思います。メモメモ！