Sassってなに?だった私がSassの使い方を解説してみた

Sassってなに?だった私がSassの使い方を解説してみた

2016.07.5
Sass
やってみた

こんにちは。

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

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

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

Sassって?

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

Sassは2種類の構文で構成されたスクリプト言語で、SASS記法とSCSS記法の違いがあります。
この記事では、よりCSSの書き方に近いSCSS記法で書いていきます。

黒い画面が苦手な方は、少し飛ばして「GUIコンパイラを使ってみる」のところから進めてみましょう。

Rubyのインストール

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

Windows

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

Rubyとは、柔軟性のあるオブジェクト指向のプログラミング言語の一つです。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からダウンロードしてインストールしてみましょう。

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


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


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

Sassを書いてみよう

デスクトップにファイルを作成しましょう。作成したファイルの中にSass用のディレクトリを作ります。
ディレクトリの名前は判りやすくsassにします。続いてディレクトリの中にstyle.scssを作ります。
tree_structure
style.scssをエディタ(Sublimetext、Atom、Dreamweaverなど)で開きます。

ネストを使ってみよう

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

※.scssの中身は、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を保存して、コンパイルをします。
compile

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

$ cdはディレクトリを移動することができます。

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

$ pwdを使って現在いる場所があっているか確認してみましょう。

$ 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では

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


prepros4
「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:#00c4cc;

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

@mixinや変数は使う場所より先に記述をしておかないと、参照できないので注意しましょう。

まとめ

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

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

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

 

編集部オススメ

  • このエントリーをはてなブックマークに追加

あわせて読みたい記事

この記事を書いたメンバー

shika

shika

Assistant Designer

鹿が好きで、名前にも鹿という字が入ります。

ドワンゴデザイナー メンバー募集 ! !