【備忘録】SASS（SCSS）の使い方
こんにちは！
久しぶりのブログ投稿となります。
今回はSCSSの書き方についての備忘録です。
多分、書き慣れてしまえば備忘録で見返すことはなくなるかと思います。
SASS（SCSS)とは
SASSはSyntactically Awesome StyleSheetの略で
『文法的に素晴らしいスタイルシート』の意味があります。
（最初シンプル過ぎて冗談かと思った）
SASSとSCSSとの表記が2種類あるようで
SASSがセミコロンや波括弧を書かない書き方
SCSSがCSSのようにネスト（入れ子）していく書き方。
CSSの用に書いていくことができるSCSSを使っていきます。
BEMのルールに則り書くとすごい便利なようですが、調べているうちに
BEMという言葉を知ったので、これから試したい。
SCSSの使い方
SCSSを使うには開発環境ツールのVscodeに
Live Sass Compilerをインストール必要があります。
コンパイル時に自動でベンダープレフィックスをやってくれるのでおすすめ。
$cWhite:white;
$cBlack:black;
$変数名:初期値で変数が使える
SCSS
$cWhite:white;
$cBlack:black;
btn {
background-color:$cBlack;
color:$cWhite;
}
CSS出力時
btn {
background-color:black;
color:white;
}
ブロックの中にブロックを書くことができる。（ネスティング）
＆（アンパサンド）で親要素を省略できる
SCSS
div {
…
& span {
…
}
}
CSS出力時
div {
…
}
div span {
…
}
@mixinと@include使うことで長いコードもひとまとめにできる。
@mixin 名前($変数名:初期値)
@include 名前($変数名:初期値)
SCSS
@mixin flex($justify:space-between,$align:center){
display:flex;
justify-content: $justify;
align-items: $align;
}
div {
}
CSS出力時
div {
display:flex;
justify-content: space-between;
align-items: cnter;
}
@include時に変数を変更させることも可能。
div {
}
CSS出力時
div {
display:flex;
justify-content: cnter;
align-items: cnter;
}
参考にしたサイト
まとめ
自分用にSCSS（SASS）についてまとめでした。
コーディングを学習してからすごく経っていますが
SCSSの存在について最近知りました。
めちゃくちゃ便利だし、コードも綺麗に書くことができるので
もっと早く知っておけばよかった。
これから学習する人は
CSSを学びつつSCSSを学んだほうが間違いなくいいです。
というわけで
それではッ！
コメント