こんにちは。

新卒デザイナーのshikaです。

入社から早くも3か月が経ちました。仕事をする上で「高いクオリティ」と「限られた時間」との両立がどれほど大変かということを、強く実感しています。学生の時は時間に余裕もあり、ポートフォリオを作る時も自由に時間を使えました。Webページの制作にもCSSを生のまま書いていたのですが、コーディング作業の効率化をしようと思い、以前から気になっていたSassに手を出してみました。

その結果、ある程度使えるようになったので、Sassの導入方法や初歩的な部分を解説してみようと思います。

Sassって？

Sassとは、「Syntactically Awesome StyleSheet」の略です。直訳すると構文的に、凄い、スタイルシート…？
とりあえず、いろいろ便利になったCSSというイメージで大丈夫だと思います！

Rubyのインストール

まずはじめに、Sassを使うための動作環境を整えます。

Windows

Windowsの人はRubyInstallerからRubyをダウンロードしてインストールします。

Mac

Macの人は標準でインストールされているはずですが、一応確認してみましょう！

1. LaunchpadからTerminalを起動します。
2. $ ruby -vと入力して下さい。
3. $ ruby 2.0.0p645 (2015-04-13 revision 50299) [universal.x86_64-darwin15]
   のように表示されていれば、インストールされています。

インストールされていない場合は、

1. AppStoreからXcodeをインストールします。
2. Apple Developerにログインして、Command Line Tools(OS X 10.11) for Xcode 7.3.1をダウンロードしてインストールします。
3. Homebrewのインストール
   Rubyをインストールするには「Homebrew」というパッケージ管理システムを使用します。
   Homebrewこちらからインストールして下さい。
4. rbenvをインストールします。
   ターミナルで$ brew install rbenvと入力してEnter/Returnを押します。
5. 続いてRubyをインストールします。
   $ rbenv install 2.3.1と入力してEnter/Returnを押します。

Sassのインストール

続いて、Sassのインストールをします。

Windows

1. スタートボタンからcmdと入力してコマンドプロントを起動します。
2. $ gem install sassと入力してEnterキーを押します。
3. インストールが完了しました。

Mac

1. Terminalを起動します。
2. $ sudo gem install sassと入力してreturnを押します。
3. Mac OSのユーザーパスワードを入力してreturnを押します。
4. インストールが完了しました。

GUIコンパイラを使ってみよう

私を含めて、CUI(黒い画面)でコマンドを書くのが苦手という方には、GUIコンパイラを使ってみましょう！
ここではそのGUIコンパイラの一つ、Preprosを紹介します。

Prepros

Preprosは、Rubyなどのインストールも要らず、ほとんどのメタ言語をサポートしコンパイルしてくれます。
また、ファイルを変更して保存した際にブラウザをオートリフレッシュしてくれたり、ローカルサーバーをボタン一つで立ててくれたりなど、他にも便利な機能がたくさんあります。

プロジェクトを登録してみよう

まずは、Preprosからダウンロードしてインストールしてみましょう。

インストールができたら、起動をしてプロジェクトの登録をします。

作成したファイルをドラッグアンドドロップします。

これでプロジェクトの登録は完了です。

Sassを書いてみよう

デスクトップにファイルを作成しましょう。作成したファイルの中にSass用のディレクトリを作ります。
ディレクトリの名前は判りやすくsassにします。続いてディレクトリの中にstyle.scssを作ります。

style.scssをエディタ(Sublimetext、Atom、Dreamweaverなど)で開きます。

ネストを使ってみよう

ではまず普通にcssを書いてみます。

header{
     width:1000px;
     padding:10px;
}
 
header nav{
     background-color:#000;
}

普通ですね。
これをSassで書いてみます。

header{
     width:1000px;
     padding:10px;
     nav{
          background-color:#000;
     }
}

ネストと呼ばれる機能では、このようにセレクタを入れ子にして書いていくことができます。
短縮できるのでとても便利です。

また、&(アンパサンド)を使うことにより親のセレクタを参照することができます。

a{
     color:#fff;
     &:hover{
          color:#000;
     }
 
     &:visited{
          color:#fff;
     }
 
     &.index{
          text-decoration:none;
     }
}

擬似クラスや擬似要素を書く時の手間が省けますね。
またとても見やすいです。

コンパイルしてみよう

それでは.scssを保存して、コンパイルをします。

Terminalやコマンドプロントのcdコマンド使ってディレクトリがある場所まで移動します。

$ cd ~/Desktopデスクトップに移動します。
$ cd niconico制作したフォルダに移動します。

$ sass sass/style.scss:css/style.css
と入力し、Return/Enterキーを押します。

コンパイル後に、css/style.cssというファイルができました。
style.cssが既にある場合は上書き保存されます。

自動化してみよう

$ sass --watch sass/style.scss:css/style.css
と入力すれば.scssが変更し保存された場合に、自動で.cssファイルにコンパイルしてくれます。

コマンドを停止させたい時は、Control+Cを押します。

スタイルを指定してみよう

コンパイルする時に、$ sass style.scss:style.css --style expandedとスタイルを指定すれば、コンパイル後のスタイルを変更することができます。

• nested : インデントがネストされた形式
• expanded : 手書きのCSSに近い形式
• compact : セレクタごとに一行にしたコンパクトな形式
• compressed : すべてを一行でまとめた形式

Preprosでは

.scssファイルを選択します。次に、右下にある「Process File」をクリックします。

「Successfully processed style.scss」と出れば正常にコンパイルできました。

Sassの便利な機能

Sassにはネスト以外にもまだまだ便利な機能があります。
紹介する機能も基本的なものですが、私が実際に使ってみた例と一緒に紹介します！

@mixinを使ってみよう

Sassを使ってみて1番便利だと思った機能がこれでした。

まず最初に@mixinで中身を定義して、@includeを使いその中身を呼び出すことができます。

scss:

@mixin clearfix {
  &::after {
    content: "";
    clear: both;
    display: block;
  }
}
 
.list {
  @include clearfix;
}

css:

.list::after {
  content: "";
  clear: both;
  display: block; }

このように、よく使うclearfixを@include clearfix;だけで済むようになります！

またSassは、引数を使うこともできます。

scss:

@mixin box($width, $bgcolor){
     width: $width;
     background-color: $bgcolor;
}
 
section{
     @include box(640px, rgba(255,255,255,0.7))
}

css:

section {
  width: 640px;
  background-color: rgba(255, 255, 255, 0.7); }

widthや背景色などを効率良く指定することができます。

すごく便利ですね!

変数を指定してみよう

まず$変数名で変数を宣言します。

  $primary-color:#00c4cc;

次にその変数を使いたい場所に入れましょう。

scss:

body{
     background-color:$primary-color;
}

css:

body{
     background-color:#00c4cc;
}

の一箇所を変更すれば、$primary-colorを使っている場所の色を同時に変えることができます。
色を変数にしておくと、もしカラーコードを忘れてしまっても問題ないですね。

まとめ

いかがでしたでしょうか。

私は、Sassの基本的な機能を触ってみて、とても効率良くコーディングが出来そうだと感じました。紹介した機能の他にも、Sassには便利な機能がたくさんあります。興味がある方は、ぜひ調べて使ってみて下さい。

この記事を読んでみてまだSassを触ったことのない人が、少しでもコーディング作業が快適になって貰えると嬉しいです！

編集部オススメ

乗り換え安心、SublimeTextからAtom移行してみて感じた違い

ドーモ、デザイナーのigguです。 ドワンゴでもっぱらエンジニアと連携しながらWebサービスやツールのUIをデザイン/実装したりしています。 初回なので自己紹介として持っていたゲーム機を書いておきますね。 ファ...

2016.01.27