なんとなくSass(SCSS)使ってたからちゃんと基礎をまとめてみた.

0pt   2018-08-10 18:42
IT技術情報局

題名通りで, ちゃんと理解して使えるようにしておこうと思って基礎の基礎からまとめました.

Sassとは

Sassとは, CSSのプリプロセッサ

Sassとは, サスと読みます.

それでSASSとは, CSSのプリプロセッサです.

プリプロセッサってなんだよ?って思った方は僕と同じですね.

CSSを作るための前段階の状態と思っておけば大丈夫です.

ようは, C言語やJavaのように, sassのソースファイルをコンパイラをして, CSSを作りますよということです.

プリプロセッサではなく, メタ言語とかとも言われます.

メタっていうのは, 上位という意味で, CSSの上の存在.

つまり, 言語を作るための言語のことをメタ言語といいます(そう思うと機械語に翻訳されるすべてのプログラミング言語もメタ言語といえますが).

これの何がいいかというと, CSSには存在しない機能を使えます.

例えば,

  • 変数を使える
  • ネスト構造を取れる
  • 関数を定義できる

などなど.

これによって, コードが巨大化しやすいCSSを, 短く保守性の高い状態で開発できます.

SassとSCSSの違いは?

違いは, 文法が違います.

SCSSは, CSSと同じように, {}でブロックを判断します.

SASSは, CSSのシンタックスと全く異なりインデントで, ブロックを判断します(Pythonと同じ).

SCSSの拡張子は, .scssで, SASSの拡張子は, .sassです.

SCSSのシンタックスで, 拡張子が.sassとかだと, コンパイラするときエラーになります.

またコンパイラするためのコマンドは, sassで, どちらも共通です.

シンタックスの違いの例

SASS: インデント

$font: sans-serif $color: #333 body font: $font color: $color

SCSS: かっこ

$font: sans-serif; $color: #333; body { font: 100% $font; color: #333; }

SCSSは, CSSと互換性があり, {}や;をつけます.

一方で, SASSは, ;などをつけると, コンパイラエラーになります.

SASSのコンパイラ sassの使い方

インストール方法

Install Sassからインストールできます.

今回は, 簡単なので, npmを使ってインストールします.

npmのversionを, 3.5.2です.

npm install -g sass

以上です.

SASSのコンパイラ

コンパイラの仕方ですが, SASSで書いたなら, 拡張子.sass.

SCSSで書いたなら, 拡張子.scssにします.

例えば, SCSSで書いて, そのソースファイルの名前を input.scssとします.

sassは, 第1引数を, scssのソースファイル名, 第2引数に, コンパイラ後のcssのファイル名のパスを指定します.

$ sass input.scss output.css

上の例だと, output.cssが出力されます.

オプションで, --watchをつけてコンパイラすると, もとのscssのソースファイルが保存されるごとにコンパイラが走ります.

なので, 毎回, SASSを編集して, コンパイラを毎回しなくてもよくなります.

CLIでやると, bashが奪われるので, tmuxとかで, 裏で走らせたほうが良いです.

SASSの文法

変数

ようやく, Sassの文法に入ります.

SASSは, 変数が定義できます.

変数宣言は, 変数名に$をつけて, =の代わりに:を付けます.

$var: value って感じです.

SCSSなら, ;を後ろにつけます.

使うときは, $をつけて変数名を書けば, コンパイラ時に, その値が展開されてCSSになります.

var.sass $color: red h1 color: $color var.scss $color: red h1 { color: $color; }

コンパイラ後は,

h1 { color: red; }

ネスト

Sassは, ネスト化できます.

CSSの場合, <section>タグの中の, <a>タグと<li>タグにいろいろスタイルを適用させたいと思ったとき, つまり, 以下のようなネスト構造になっていた時

<section> <a>aaaaaaaaa</a> <ul> <li>iiiiiii</li> </ul> </section>

で, 以下のようにCSSを適用しようと考えたとする.

section { color: #333 } div a { color: blue; } div li { font-size: 15px; }

ネストにできないので, いちいち上のようにわけて書かなければいけなかった.

SASSの場合, ネスト構造で以下のようにわかりやすく書くことができる.

input.sass section color: #333 a color: blue li font-size: 15px input.scss section { color: #333; a { color: blue; } li { font-size: 15px; } }

パーシャル

Sassは, 一つのファイルである必要はなく, いくつかの断片をつなぎ合わせて一つのファイルを構成させることができる.

じゃあ次に紹介する@importを使うことで, パーシャルなSassをインポートできます.

インポートされる側のSassのファイル名は, _で始めます.

Import

パーシャルのSassのファイル名を, _partial.sassとします.

そうした場合, インポートするには,

@import partialと書きます.

インポートする際, _と拡張子は必要ないです.

具体的にみると,

_partial.sass ul, ol margin: 0 padding: 0 unit.sass @import partial div font-size: 10px

コンパイラ後は,

unit.css ul, ol { margin: 0; padding: 0; } div { font-size: 10px; }

のようになる.

Mixin

mixinは, CSSをひとまとめにしたものにして, スニペット化したもの.

そのひとまとめにしたものを再利用することができる.

また関数のように, 引数をとることができて, 引数によって, mixinの中身も変えることができる.

SassとSCSSで, シンタックスがかなり違うので注意が必要.

Sassの場合

例えば, boxとbox2のクラスに, 共通部分があった場合, 抜き出して使うことができる.

input.sass =circle width: 50px height: 50px border-radius: 100% .box +circle .box2 +circle color: red

上の例からわかるように, =を使って, mixinを定義する.

利用する場合は, +と名前をつける.

=で定義した部分がまるごと入る.

50pxのところを, ほかの部分では, 40pxという場合は, circleに仮引数を持たせることができます.

input.sass =circle($size) width: $size height: $size border-radius: 100% .box +circle(50px) .box2 +circle(40px)

コンパイラ後は,

output.css .box { width: 50px; height: 50px; border-radius: 100px; } .box2 { width: 40px; height: 40px; border-radius: 100px; color: red; } SCSSの場合

こちらはかなりわかりやすいです.

mixinを定義する際@mixinを使い, 再利用する場合は, @includeを使います.

上と同じ例を書き換えてみると,

input.scss @mixin circle($size) { width: $size; height: $size; border-radius: 100px } .box { @include circle(50px); } .box2 { @include circle(40px); }

もちろん, 引数をとらないバージョンをいけます.

Extend/Inheritance

ひな形のcssをスニペット化して, @extendで再利用できます.

mixinと非常に似ていてどっちを使えばいいかわからなくなりますが, 大きな違いは, コンパイラ後に,

グルーピングされる

ということだと思います.

コンパイラ結果を見たほうがわかりやすいので, 例を見てみましょう.

シンタックスは, SassとSCSSで違いは少ないです.

%を付けて, ひな形のcssを書いて, 呼び出す.

input.sass %message-shared border: 1px solid #ccc padding: 10px color: #333 .message @extend %message-shared .success @extend %message-shared border-color: green .error @extend %message-shared border-color: red

結果は,

output.css .message, .success, .error { border: 1px solid #cccccc; padding: 10px; color: #333; } .success { border-color: green; } .error { border-color: red; }

mixinの場合は, クラスごとに, mixinのスニペットがそのまま代入されましたが, extendの場合は,

コンパイラ後のCSSは, クラスをまとめてくれます.

ほぼ同じですが, SCSSのほうのシンタックスも載せておきます. もちろん, コンパイラ後は, 同じです.

input.scss %message-shared { border: 1px solid #ccc; padding: 10px; color: #333; } .message { @extend %message-shared; } .success { @extend %message-shared; border-color: green; } .error { @extend %message-shared; border-color: red; }

Function

さらにわかりにくいが, mixinとExtendとほぼ同じですが, 値を返します.

mixinやextendは, 一つのかたまり(width: 20px;)でしたが, 関数は値を返します.

具体的には,

input.sass @function halfSize($size) @return $size / 2 .box width: halfSize(40px)

halfSize(40px)は, 20pxという値になります.

シンタックスは, 上のように,

@functionのあとに, 関数を定義.

@returnで, 返り値を指定します.

SassとSCSSでシンタックスは変わりません.

一応, SCSSのほうとコンパイラ結果も載せます.

input.scss @function halfSize($size) { @return $size / 2 } .box { width: halfSize(40px); } output.csss .box { width: 20px; }

演算

これは, プログラミング言語と同じように, +, *, /, %などが使えるということです.

input.scss .container { width: 100%; } article[role="main"] { float: left; width: 600px / 960px * 100%; } aside[role="complementary"] { float: right; width: 300px / 960px * 100%; } output.css .container { width: 100%; } article[role="main"] { float: left; width: 62.5%; } aside[role="complementary"] { float: right; width: 31.25%; }

Sassは強力だ

ほかにも forやeachなども備えており, CSSを効率よく記述できるので, 個人でWebサイトを作る時も, ぜひ使ってみたいと思いました.

参考文献

Sass Basics

Source: cssタグが付けられた新着投稿

   ITアンテナトップページへ
情報処理/ITの話題が沢山。