Sass が便利! 使うには Dart Sass をインストールしよう

10日ほど前ふと思い立ち、以前から気になっていた Sass を試してみた。

ってまず、Sass ってのは「Syntactically Awesome StyleSheet」の頭文字か略。ざっくり言うと、css を効率的に書くためのもの。.scss で書いたファイルをコンパイルして .css を作る。

以前から気になっていたんだけど、うーん、なんか色々覚えないけなくて、逆に面倒くさくね? みたいな感じでなかなか試せずにいた。以前、開発用サーバに Sass を入れようとして、挫折。そこを10日ほど前、やっぱり試してみるとか、一念発起。

入れてみた Ruby Sass は depreciated …

ネットを調べて、さくら VPS で借りてるメインの開発用サーバ(Ubuntu 18.04)に Ruby の gem ってので、

$ sudo gem install sass

でインストール。やはりエラーが起こるので、さらにネットで調べてどうにかこうにか、ちょっと苦労したけど無事入れることができた。

しばらく Sass を使ってみたところ、かなり便利なことがわかったので、ブログに記事でも書いてみようかなと思い、 Conoha VPS で借りているサブの開発用サーバに入れてみたところ、今度はすんなりインストールに成功。ところが

Ruby Sass is deprecated and will be unmaintained as of 26 March 2019.

っていうメッセージが…

あれ? 2019年3月26日にはメンテ停止するよって…。うーん、こんなメッセージ出てたっけ? せっかく苦労して入れたのに…

まあメッセージを見ると、コマンドラインで Sass を使いたければ Dart Sass ってのがオススメだよとのこと

https://sass-lang.com/install

ってところに行ってみると、いろいろインストール方法があるけど、Ubuntu の場合は

https://github.com/sass/dart-sass/releases/tag/1.17.3

で、私の場合 dart-sass-1.17.3-linux-x64.tar.gz を落として適当なところに展開。dart-sass ってディレクトリに展開されるので、 .zshrc に例えば

export PATH="/home/gin/dart-sass:$PATH"

のようにパスを通す。これだけでオッケー。かんたんやった。。。

Mac だと brew とかでもインストールできるようだけど、Mac や Windows でも上記から必要なのを落して展開して、そこにパスを通せばオッケーのようだ。

Sass はとりあえず入れ子を活用するだけで便利

とりあえず少し使ってみただけなので、詳しいことはまだよくわからないけど、とにかく css を入れ子状に記述できる。これだけで、思いのほか快適だった。

まず、Sass には、2つの構文があって、Sass と SCSS があるようだ。SCSS のほうが通常の css に近いので、とりあえずこちらで使っているので、以下 SCSS で解説。

たとえば、通常の css だと

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

と、ずらっと書いていかなければならない。これが SCSS だと、

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;

  li {
    display: inline-block;
  }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

のように書ける(書かなくてもよい)。これを .scss のファイルに書いて

$ sass library/scss/style.scss:library/css/style.css

というようにコンパイルする。

このほか、クラスや疑似要素のときは、親要素には & を用いて参照する。つまり、通常の css で

a {
  color: #ff0000;
}

a.hoge {
  color: #0000ff;
}

a:hover {
  color: #00ff00;
}

と書くところは

a {
  color: #ff0000;

  &.hoge {
    color: #0000ff;
  }

  &:hover {
    color: #00ff00;
  }
}

と書ける。とりあえず、これだけ覚えておくだけで、普通に css 書くよりずっと便利なことがわかった。

コンパイルするのが面倒だけど、上記のコマンドに –watch をつけて

$ sass library/scss/style.scss:library/css/style.css --watch

などのように実行しておくと、style.scss が更新されるたびに自動的に style.css がコンパイルされる(自動コンパイルを停止する場合は Ctrl-C)。

変数が使える

あと、すぐ覚えれて、便利なのが変数を使えること

$text-color: #fff;
$bg-color: #000;

#main {
  color: $text-color;
  background-color: $bg-color;
}

と文字色や背景色も一発で修正できる。

@import でファイルを分割管理。コンパイルすると、ひとつの css ファイルに

通常の css でもお馴染の @import。だけど、管理は楽になるかもしれないけど、ファイルをあんまり分割するの考えもの。

ところが、Sass だと、コンパイルすると一つの css ファイルにまとめることができる。例えば、style.scss を

@import "partials/reset";

@import "breakpoints/base";

@media only screen and (min-width: 481px) {
  @import "breakpoints/481up";
}

@media only screen and (min-width: 768px) {
  @import "breakpoints/768up";
}

というように @import で分割。上記の例だと partials と breakpoints ディレクトリ以下に

partials/_reset.scss
breakpoints/_base.scss
breakpoints/_481up.scss
breakpoints/_768up.scss

というように、ファイル名の頭にアンダースコアを付けてファイルを作成。

これでもとの style.scss ファイルをコンパイルすると、@import なしでひとつにまとめた形で style.css が生成される。

Sass ではこのほか、ループ処理や mixin (スニペット)とか色々便利な機能もあるようだが、実際に使ってみるにはちょっと学習が必要なよう。

だけど、上記の入れ子や変数だけでも、かなりその便利さが実感できるはず。便利そうだけど、色々覚えないといけないんじゃないの? と思っている方、ぜひ一度試してみましょう。

Sass が便利! 使うには Dart Sass をインストールしよう

入れてみた Ruby Sass は depreciated …

Sass はとりあえず入れ子を活用するだけで便利

変数が使える

@import でファイルを分割管理。コンパイルすると、ひとつの css ファイルに