プログラミング

【備忘録】SASS(SCSS)の使い方

【備忘録】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 {

@include flex 

}

CSS出力時

div {

display:flex;
justify-content: space-between;
align-items: cnter;

}

@include時に変数を変更させることも可能。

div {

@include flex ($justify:center,$align:center)

}

CSS出力時

div {

display:flex;
justify-content: cnter;
align-items: cnter;

}

参考にしたサイト

【これからScssを使う人へ】Scssの使い方と便利さをさらっと紹介するぞSass は Syntactically Awesome Style Sheets (構文的に素晴らしいスタイルシート) の略で、CSSを便利に使えるように拡張した言語です。

リンク

SCSSとは?基礎を理解してWebサイトを作ろうSCSSとは? SCSS入門におすすめ:コンパイルをする方法. Prepros. Visual Studio CodeのLive Sass Compiler; SCSSの文法紹介とそのメリット.

リンク

まとめ

自分用にSCSS(SASS)についてまとめでした。

コーディングを学習してからすごく経っていますが
SCSSの存在について最近知りました。
めちゃくちゃ便利だし、コードも綺麗に書くことができるので
もっと早く知っておけばよかった。

これから学習する人は
CSSを学びつつSCSSを学んだほうが間違いなくいいです。

というわけで
それではッ!

created by Rinker
技術評論社
¥3,608
(2021/10/19 02:05:39時点 Amazon調べ-詳細)