2019年9月6日金曜日

Sass 超入門

概要

Sass は CSS をプログラマブルに書けるツールです
Sass 形式で書いたファイルを CSS にコンパイルすることで使えるようになります
今回はインストールから簡単なサンプルコードいろいろと実装して実際に動かして試してみました
また Ruby 版の Sass は廃止になり Dart 版が現在はサポート対象なので Dart 版を使います

環境

  • macOS 10.14.6
  • Sass (Dart) 1.22.10

インストール

  • xcode-select --install
  • brew install sass/sass/sass

xcode-select が必要になるのでない場合はインストールしましょう
また Ruby 版の sass がすでにある場合は今回インストールした dart 版で上書きしましょう

  • rm /usr/local/bin/sass
  • brew link sass

テスト用のアプリの作成

なんでも OK です
静的ファイルを配信するだけなので nginx の DocumentRoot でも OK です
今回は Sinatra アプリを作成します

  • bundle init
  • vim Gemfile
gem "sinatra"
  • bundle install --path vendor
  • vim app.rb
require 'sinatra/base'

class Sass < Sinatra::Base
  get '/' do
    erb :index
  end
end
  • vim config.ru
require './app'

run Sass
  • mkdir public
  • mkdir views
  • vim views/index.erb
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="/test.css">
  </head>
  <body>
    <div id="message">hello
      <div class="nested">world</div>
    </div>
  </body>
</html>
  • bundle exec rackup config.ru

で localhost:9292 でアプリで起動します
コンパイルした CSS ファイルは public ディレクトリ配下で配信します

とりあえずコンパイルしてみる

兎にも角にも .sass ファイルコンパイルして .css ファイルを作成してみましょう

  • vim test.sass
#message
  font-size: 24px

ブラケットなどは不要でインデントを使います
あとは sass コマンドを使ってコンパイルします

  • sass test.sass public/test.css

基本的な使い方は sass [input sass file] [output css filie] になります
.css ファイルの他に .css.map というファイルも作成されます
map ファイルは元の sass ファイルがどこにあるのかを記録しておくフィアルになります
これ以外にもたくさんオプションがあるので詳しくは --help オプションで確認してください
(以下同じコマンドでコンパイルするので省略します)

これでアプリを起動して確認してみましょう
先ほどと違ってフォントサイズが大きくなっているのが確認できると思います

変数を使う

スタイルシートで同じ値を使い回すことは多いと思います
変数はいろいろなケースで使えます

$fs: 24px

#message
  font-size: $fs

入れ子にする

階層になっている場合には入れ子として宣言できます

$fs: 24px

#message
  font-size: $fs
  .nested
    color: #13f304

id 属性や class 属性に関してはそのまま使えます

import

複数の .sass ファイルに分けて管理することができます
部分ファイルはアンダースコアから始まるようにしましょう

  • vim _partial.sass
.nested
  margin: 10px
  • vim test.sass
@import 'partial'

$fs: 24px

#message
  font-size: $fs
  .nested
    color: #13f304

@import 'partial' という感じで指定します
import する partial ファイルのアンダースコアは省略できます

ポイントなのは最終的に出力される .css ファイルは import した partial ファイルの順番になります
そして .css は後にかかれている定義が優先的に評価されます
なのでもし test.sass で .nested の margin を再定義している場合はそちらが優先されることになります

四則演算

サイズなどは四則演算が使えます

@import 'partial'

$fs: (24px - 12px)
$width: (100% - 20%)

#message
  width: $width
  font-size: $fs
  .nested
    color: #13f304

基本的には同じ単位でやるのでいいでしょう
パーセントと組み合わせて使うこともできます
ただ (24px - 50%) などはエラーになります

関数

独自の関数も定義できます
引数に応じていろいろと定義を変えたい場合に便利です

@import 'partial'

@function double($value)
  @return $value * 2

$fs: (24px - 12px)
$width: (100% - 20%)

#message
  width: $width
  font-size: $fs
  .nested
    color: #13f304
    font-size: double($fs)

複雑になってきましたが上記は double という関数を定義しています
(24px - 12px) = 12px を渡してそれを倍にした値を font-size にしています
ビルトインの関数もいろいろとあるのでこちらを参照してください

@mixin

関数に似た機能ですが定義したスタイルを別のスタイルに @include することができます

@import 'partial'

@function double($value)
  @return $value * 2

@mixin margin-reset
  margin: 0px

$fs: (24px - 12px)
$width: (100% - 20%)

#message
  width: $width
  font-size: $fs
  .nested
    color: #13f304
    font-size: double($fs)
    @include margin-reset

@mixin で定義して @include で参照します
同じような機能に @extend という機能もあります
どちらがどう使うかはこのあたりの記事が参考になるかもしれません

最後に

Sass に入門してみました
Ruby 版が廃止になったので Dart 版を使っています
変数や関数を使ってごちゃごちゃになった CSS をキレイに書くことができると思います
面倒なのはコンパイルする必要がある点なのでビルドフローがあれば忘れないように入れるようにしましょう
また --watch という機能もあるので更新するたびにコンパイルすることもできます

まだ Web 上には Ruby 版の情報がちらほらあるのでドキュメントは基本的に公式のものを使いましょう

参考サイト

時刻:

0 件のコメント:

コメントを投稿