SASS(SCSS)とは?
Sassは「Syntactically Awesome StyleSheet」の略です。日本語で言えば構文的に(Syntactically)すごい!(Awesome)スタイルシート(StyleSheet)という意味です。
自分で(Awesome)って言っちゃうのかよ!と思いますが、SASSを使うとその使い勝手の良さに思わずAwesome!と言ってしまうかもしれません。
SASS(SCSS)のメリット
SASS(SCSS)のメリットを上げたらキリがありません。
- タグやクラス、プロパティまでネストできる
- 変数が使える
- 関数が使える
- ファイル分割ができる
これらをひと言で説明するなら、「再利用性と保守性の高いスタイルシートを手軽に書ける!」と言えます。
例えば以下のようなCSSを書いたとします。
.link {
padding: 8px;
}
.link .link__icon {
font-size: 1.8rem;
}
これをSASS(SCSS記法)で書くと次のようになります
.link {
padding: 8px;
&__icon {
font-size: 1.8rem;
}
}
上のようにSASS(SCSS記法)ではセレクタを入れ子にできる上に、&を使って親セレクタを省略することもできます。
SASS(SCSS)のデメリット
強いて言うなら、SASS(SCSS)の最大のデメリットは使うには環境構築が必要であることです。SASSはSASS記法またはSCSS記法で書かれたファイルをコンパイルしてCSSに変換します。
ただし、npmやgemなどがあれば簡単にインストールできます。
SASS(SCSS)のインストール方法
まずは下のコマンドからSASSをインストールしてください。
npm install -g sass
sass --version
でバージョンを確認できます。
sass --version
1.26.3 compiled with dart2js 2.7.1
SASSまたはSCSS記法で書いたファイルをCSSに変換するには次のコマンドを実行します。
sass input.scss output.css
複数ファイルをまとめて変換したい時は次のように :
で繋げて実行します。
sass light.scss:light.css dark.scss:dark.css
ファイルを変更した時に自動でコンパイルしてほしい場合は--watch
オプションをつけます。
sass input.scss output.css --watch
ファイルサイズを節約したいなら--style=compressed
を指定します。
通常は下のように改行やインデントが入った状態でコンパイルされます。
h1 {
font-size: 2rem;
}
--style=compressed
を指定した場合は余計な改行やインデントは削除されてコンパイルされます。
h1{font-size:2rem;}
その他のコマンドラインオプションは --help
か公式ドキュメントをご確認ください。
コマンドラインオプションを覚えたり、タイピングしたりするのが面倒だと思います。package.json
に下のようにscriptを書いておくのがオススメです。
"scripts": {
"sass": "sass ./css/input.scss:./css/output.css --watch --style=compressed"
},
これでnpm run sass
で実行できます!
SASS(SCSS)の書き方
SASS(SCSS)は基本的にCSSと同じように書けます。しかも &
を使って親セレクタを省略したり、$
で変数を使ったり、mixinを使って関数ライクなものが作れたり、@useで外部ファイルをインポートできます。
ここからはSASSのSCSS記法を中心にSASSの書き方を説明します。
SASS記法とSCSS記法
SASSは基本的にインデントのみで親子関係を表現するSASS記法とCSSライクに{}と;を使った方法の2種類があります。
SASS記法で書いた場合
.link
.icon
font:
size: 1.2rem
weight: bold
SCSS記法で書いた場合
.link {
.icon {
font: {
size: 1.2rem;
weight: bold;
}
}
}
SASS(SCSS)のコメントアウト
SASSのコメントは3通りの方法があります。
1つ目はJavaScriptライクな//
を使ったコメントアウトです。//
を使ったコメントはCSSに出力される際に消去されます。
2つ目はCSSと同様の/* */
を使ったコメントアウトです。
このコメントは通常はCSSに出力されます。--style=compressed
を指定した場合は削除されます。
3つ目は/*! */
を使ったコメントアウトです。
このコメントは--style=compressed
を指定した場合でもCSSに出力されます。
ライセンスの記述などに使用できます。
SASS(SCSS)ではセレクタとプロパティを入れ子で書ける
SASS(SCSS)ではセレクタとプロパティを入れ子で書くことができます。
入れ子のセレクタは次のように書きます
.hoge {
margin: 8px;
.piyo {
padding: 8px;
}
}
CSSでは次のように出力されます。
.hoge {
margin: 8px;
}
.hoge .piyo {
padding: 8px;
}
入れ子のプロパティは次のように書きます。
.hoge {
transition: {
property: font-size;
duration: 4s;
delay: 2s;
}
}
CSSでは次のように出力されます。
.hoge {
transition-property: font-size;
transition-duration: 4s;
transition-delay: 2s;
}
SASS(SCSS)は&で親セレクタを省略できる
SASS(SCSS)では入れ子内で&を使って親セレクタを選択することができます。下のようにBEMとSASSを合わせて書くと長いクラス名も上手く省略できます。
.link {
margin: 8px;
&__container {
margin-right: 16px;
}
&:hover {
opacity: 0.8;
}
}
この場合のCSSは以下のようになります。
.link {
margin: 8px;
}
.link .link__container {
margin-right: 16px;
}
.link:hover {
opacity: 0.8;
}
SASS(SCSS)の変数の定義と使い方
SASS(SCSS)では$
を使って変数を定義できます。よく使う色やフォントなどを変数定義しておくと便利です。
$twitter-color: #00acee;
変数を使う時は下のようにします。
.fa-twitter {
color: $twitter-color;
}
SASS(SCSS)のmixinの定義と使い方
mixinは関数のように引数を受け取って、CSSのコードをまとめられる機能です。
mixinを定義するには@mixin mixin名(引数) {}
のようにします。
@mixin font-theme($color) {
font-size: 14px;
color: $color;
}
mixinを使うには@include mixin名(引数)
ようにします。
.card {
@include font-theme(#009866);
}
例えばブレイクポイントを作るときにもmixinが使えます。
@mixin for-xs {
@media (min-width: 0) { @content; }
}
@mixin for-sm {
@media (min-width: 600px) { @content; }
}
@mixin for-md {
@media (min-width: 960px) { @content; }
}
@mixin for-lg {
@media (min-width: 1280px) { @content; }
}
@mixin for-xl {
@media (min-width: 1920px) { @content; }
}
上のように@content
とすることで、{}の中に書いた内容を展開することができます。
下のようにして、ブレイクポイントごとのスタイルを書けます。
.header {
padding: 8px 16px;
@include for-sm {
padding: 16px 32px;
}
}
SASS(SCSS)の@extendの定義と使い方
@extend
は別のセレクタのスタイルを継承することができます。例えばBEMでは--modifier
をつけて特別なクラスを作りますが、@extend
を使うと元のクラス(Block__Element
)のスタイルを継承させることができます。
例えば下のように書けます。
.header {
display: flex;
&__text {
color: blue;
font-size: 1.5rem;
&--large {
@extend .header__text;
font-size: 2rem;
}
}
}
@extend
を使うとCSSは下のように出力されます。
.header {
display: flex;
}
.header__text, .header__text--large {
color: blue;
font-size: 1.5rem;
}
.header__text--large {
font-size: 2rem;
}
4行目のように.header__text, .header__text--large
のようにBlock__Element
とBlock__Element--Modifier
に同じスタイルが適応されます。
スタイルを使い回せる、という点で@mixin
を使うのか、@extend
にするのかで悩ましいと思います。使い分けのポイントはスタイルを変数で動的に出力するかどうかです。変数でスタイルをコントロールしたいなら@mixin
を使います。単に他のクラスのスタイルを流用したいだけなら、@extend
を使います。
@extend
が使える場所で@mixin
を使うと出力されるコードサイズが大きくなるので、できれば@extend
を使う方がオススメです。詳しくはこちらをご覧ください。
SASS(SCSS)のファイル分割(@use)
@use
を使うと他のファイルに書いたSCSSをロードすることができます。ロードされる側のファイル名には_
をつけます。例えば下のように書きます。
// _variables.scss
$twitter-color: #00acee;
// style.scss
@use "./variables";
.text {
color: variables.$twitter-color;
}
こうすることで_variables.scss
の変数がstyle.scss
にロードされた状態でCSSが出力されます。さらにas
をつけることで、エイリアスを設定することもできます。
// style.scss
@use "./variables" as v;
.text {
color: v.$twitter-color;
}
_index.scss
を定義してスタイルを1つにまとめることもできます。詳しい使い方はこちらをご覧ください。
分割ファイルをロードするには@import
も使えますが、公式で非推奨になっています。詳しくはこちらをご覧ください。
SASS(SCSS)のLinter/Formatter
SCSSの記法は少し特殊なので、LinterとFormatterがあるとコンパイル前に間違いに気づいて修正できるので便利です。SCSSをLintしてFormatできるモジュールは多々ありますが、オススメはstylelint-scssです。
stylelint-scssをインストールするには以下のコマンドを実行してください。
npm install stylelint stylelint-scss
stylelint-scssを使うには.stylelintrc
に設定を書きます。
{
...
"plugins": [
"stylelint-scss"
],
"rules": {
"at-rule-no-unknown": null,
"scss/at-rule-no-unknown": true
...
}
}
コメント