CSSを触る機会はあるのですが、Sassを実際に使ったことがなかったのでSassの動作確認をしてみました。
＊Sass とは
Syntactically Awesome Stylesheets の略でサスと読みます。CSSを効率的に記述するために設計されたCSSのメタ言語です。
変数、コードの使い回し、if 文や四則演算ができるので、コード量を削減することができメンテナンス性が向上するといったメリットがあります。
拡張子は
.sassと.scssがありますが、.scssのほうがよく使用されています。SassファイルをコンパイルしてCSSファイルを生成して使います。コンパイルするためには、LibSass、Ruby Sass、GUIコンパイラを使う方法がありますが、今回は処理速度が速く導入しやすい LibSass の Node.js を使った「node-sass」というライブラリを使う方法で試してみました。
＊環境
- MacOS
- node 12.4.0
- node-sass 4.12.0
- npm 6.9.0
＊参考
＊node-sass のインストール
Sassファイルをコンパイルするための環境を構築します。任意のプロジェクトディレクトリ配下で、下記コマンドを実行し node-sass をインストールします。
$ npm i -g node-sass
私の環境ではインストールしようとするとエラーになり、ここの記事を参考にしてインストールしました。（色々調べてみたのですが他の方法ではうまくいきませんでした）
下記コマンドを順番に実行するとインストールできます。
$ npm cache clean -f
$ sudo npm install -g npm
## Nodeの最新バージョンをインストール
$ sudo npm install -g n
$ sudo n latest
$ sudo npm install -g node-gyp
$ npm config set user 0
$ npm config set unsafe-perm true
## node-sassをインストール
$ sudo npm install -g node-sass
## バージョン確認
$ node-sass -v
node-sass 4.12.0 (Wrapper) [JavaScript]
libsass 3.5.4 (Sass Compiler) [C/C++]
＊Sassの実行
任意のディレクトリ配下で、拡張子.scssのファイルを新規作成します。今回は
style.scssというファイル名にしました。<style.scss>
button {
background: #FF0000;
&.blue {
background: #0000FF;
}
}
ScssファイルをコンパイルしてCSSファイルを生成します。
Scssファイルと同じディレクトリで下記コマンドを実行します。
$ node-sass {対象scssファイル} {css出力先}
実際には下記コマンドを実行しました。
今回は
result.cssというCSSファイル名で、コードを綺麗に整形して出力するオプションを付けています。$ node-sass style.scss result.css --output-style expanded
--output-style オプションを設定することで他にもコードの整形方法を設定することができます。- compact --> CSSプロパティを一行にまとめる
- compressed --> 改行や無駄なスペースを削除して圧縮する
--watch （-w）を指定するとScssファイルを更新するたびにコンパイルを実行してくれるようになります。生成されたCSSファイルです。
<result.css>
button {
background: #FF0000;
}
button.blue {
background: #0000FF;
}
＊Sassの機能
- コメントアウト
//はコンパイル後に出力されません。
/* */で囲うとコメントとして出力されます。
/* ネスト */
button {
background: #FF0000;
&.blue {
background: #0000FF;
}
}
// 変数
$base-color: #666;
$base-space: 15px;
body {
color: $base-color;
}
<コンパイル後>
@charset "UTF-8";
/* ネスト */
button {
background: #FF0000;
}
button.blue {
background: #0000FF;
}
body {
color: #666;
}
- ネスト
インデントをして入れ子にすると、コンパイル後に親要素を引き継いで記述してくれます。
button {
background: #FF0000;
.green {
background: #00FF00;
}
}
<コンパイル後>
button {
background: #FF0000;
}
button .green {
background: #00FF00;
}
- 変数
$を使って変数を定義することができます。
$base-color: #666;
$base-space: 15px;
body {
color: $base-color;
}
.panel {
border: 1px solid $base-color;
padding: $base-space;
}
<コンパイル後>
body {
color: #666;
}
.panel {
border: 1px solid #666;
padding: 15px;
}
- 四則演算
+, -, *, /, %を使うことができます。
$base-padding: 5px;
.col-3 {
width: (100% / 3);
}
.container {
padding: ($base-padding * 3) ($base-padding * 2);
width: (100% - 10);
}
<コンパイル後>
.col-3 {
width: 33.33333%;
}
.container {
padding: 15px 10px;
width: 90%;
}
- スタイルの使い回し
@mixinを指定すると要素群を使い回すことができます。
引数を指定したい場合は$を使い、複数指定することも可能です。
mixinを呼び出すときは@includeを使います。
mixinで指定したクラス自体は出力されません。
@mixin border-bottom($color: #666) {
border-bottom: 1px solid $color;
}
h1 {
@include border-bottom(#2a0)
}
@mixin box-layout {
padding: 30px;
@include border-bottom;
}
.block {
@include box-layout;
}
<コンパイル後>
h1 {
border-bottom: 1px solid #2a0;
}
.block {
padding: 30px;
border-bottom: 1px solid #666;
}
- 継承
@extendを使うことで、クラスの要素を保持したまま継承することができます。
@mixinで定義した要素群は出力されませんが、@extendを使うとそのクラスも出力されます。
.box {
margin-top: 15px;
padding: 10px;
background-color: #ccc;
p {
line-height: 1.8;
}
}
.content {
@extend .box;
background-color: #eee;
}
<コンパイル後>
.box, .content {
margin-top: 15px;
padding: 10px;
background-color: #ccc;
}
.box p, .content p {
line-height: 1.8;
}
.content {
background-color: #eee;
}
- プレースホルダー
%を使って定義したクラスも@extendすることができます。
%を使うとそのクラスは出力されません。
%error-box {
margin-top: 10px;
padding: 5px;
background-color: #FF0000;
}
.error-contents {
@extend %error-box;
p {
line-height: 1;
}
}
.note {
@extend %error-box;
}
<コンパイル後>
.error-contents, .note {
margin-top: 10px;
padding: 5px;
background-color: #FF0000;
}
.error-contents p {
line-height: 1;
}
- アンパサンド
&を使うと親のクラス名を継承することができます。
.c-block {
width: 960px;
&-element {
padding: 10px;
&:hover {
text-decoration: underline;
}
}
}
<コンパイル後>
.c-block {
width: 960px;
}
.c-block-element {
padding: 10px;
}
.c-block-element:hover {
text-decoration: underline;
}
＊所感
スタイルを使い回すという目的としてはmixinとextendは同じ使い方ができそうでしたが、mixinは引数を指定して設定値を可変にできるのが特徴かと思いました。初期値も指定できるのは便利でした。extendはセレクタがグルーピングされてコードが見づらくなったり、記述される順番が変わってしまったりするので優先度が変わってしまうこともあるそうです。なのでスコープを決めて使ったほうが良いということでした。mixinとextendをうまく使い分けて綺麗なCSSファイルを作っていきたいと思います。