Sassでできることとコンパイル方法 | フロントエンド

Sassの使い方とSassで出来ること
コンパイル方法
あとがき

前回は【Sass導入方法】について紹介しました。
今回はSassが導入してある前提で、Sassでできることとコンパイル方法についてご紹介します。

Sassの使い方とSassで出来ること

書き方はCSSと大体が同じですが、便利だったり、注意しなければいけないこともあったりします。
拡張子は【.scss】になります。

変数

SassではJSのように変数を使うことができます。
数値でもカラーコードでも変数に入れることができます。

【Sass】

$aqua_blue: #58FAF4 ;
$base-font_size: 16px ;

body{
    background-color:  $aqua_blue;
    font-size: $base-font_size;
}

h1{
    color: $aqua_blue;
}

【CSS】

body{
    background-color:  #58FAF4;
    font-size: 16px;
}

h1{
    color: #58FAF4;
}

演算

CSSでも「calc()」というファンクションを使えば演算もできますが、
Sassではファンクションを使わずに四則演算ができます。
（※四捨五入に関してはファンクションが必要となります。）

【Sass】

p{
    font-size: $base-font_size + 5px ;
    width: 100px + 20px ;
    height: (200px / 2) ;
    margin : round(55px / 2);
}

【CSS】

p{
    font-size: 21px ;
    width: 120px ;
    height: 100px ;
    margin: 28px ;
}

割り算については ( ) を忘れないようにしないとうまく計算されません。
「round( )」を使えば割り切れない数を四捨五入した数で計算してくれます。

ネスト

入れ子構造のことです。
CSSでは#mainのなかのaと、#mainの中のh1と・・・って書いてたものもネストで楽に書けます。

【Sass】

$aqua_blue: #58FAF4 ;
$base-font_size: 16px ;

#main{
    background-color:  $aqua_blue;

    h1{
        font-size: $base-font_size + 4px ;
    }

    a{
        color: $aqua_blue ;
    }
}

【CSS】

#main {
   background-color: #58FAF4;
}
#main h1 {
   font-size: 20px;
}
#main a {
   color: #58FAF4;
}

&(親セレクタ)

親セレクタの省略ができます。
主に使われるのが擬似クラス（:hover , :active）になるかと思います。

【Sass】

$red: #FF0000 ;
$large: 20px ;

a{
  font-size: 14px;
  
  &:hover{
      font-size: $large ;
      color: #red ;
  }
}

.sample{
color: #000;
  &.hoge{
       color: $red ;
  }
}

【CSS】

a {
   font-size: 14px;
}
a:hover {
    font-size: 20px;
    color: #red;
}
.sample {
  color: #000;
}
.sample.hoge {
    color: #FF0000;
}

ネストは（クラス）の中の（クラス）など
＆は（クラス、タグ）を（hover）した時、（クラス）と（クラス）がついているもの
と言った指定になります。

個人的にネストと＆については書く暇が省けるので慣れてくるとコーディングが早くなってSassの中でもとても便利だと思います。

CSSでは
「/**/」と「//」でコメントアウトがされますが、Sassで書いた「//」はコンパイル後のCSSには適応されません。

【Sass】

/*このコメントは適応されます*/
$red: #FF0000 ;
$large: 20px ;
//このコメントは適応されません
a{
font-size: 14px;
  &:hover{
      font-size: $large ;
      color: #red ;
  }
}

【CSS】

/*このコメントは適応されます*/
a {
  font-size: 14px;
}

a:hover {
    font-size: 20px;
    color: #red;
}

他にもインターポレーションや＠mixinなどもありますが割愛。

コンパイル方法

エディタで【.scss】で保存します。
でも、これではもちろん使えないので、【.scss】を【.css】へ変える作業をしなければいけません。
方法としては、

ターミナルを使う
GUIアプリを使う

といった方法があります。２つともやり方を紹介します。

ターミナルでコンパイル

Sass導入方法でターミナルの場所は紹介しましたので、割愛。
今回は【SassTest】というファイルを用意しました。

まずディレクトリをこの「SassTest」にしなければいけません。
でも、ターミナルの起動時にターミナルが見ているのはユーザーホームなため
ディレクトリを変えるには

パスを書く
ファイルごとターミナルのアイコンの上にドラッグ＆ドロップ

で変えることができます。どちらでもOKです。
わたしはドラッグ＆ドロップでやっているのでそちらの方法でいきます。

成功していればファイル名に書き換わったウィンドウが表示されるはずです。

開いたターミナルで下記のように書きEnter。
そうすると【SassTest】の中にコンパイルされた【style.css】ができているはずです。

sass test.scss:style.css

これでコンパイルは完了です。
SassとCSSは別で管理しておきたい！というのも可能です。
コンパイルしてからフォルダに入れるという作業をしなくてもコンパイル時に振り分けることができます。

今回は
cssフォルダとSassフォルダを用意し、Sassフォルダの中に【test.scss】が入っています。
フォルダの指定をしてコンパイルをするには先ほどのものに
【（フォルダ名）/ 】をつけるだけです。

sass Sass/test.scss:css/style.css

GUIアプリでコンパイル

GUIアプリケーションというと、SCOUTだったり、Codekit、LiveReloadなどいろいろありますが。
今回使用するのは【Koala】です。名前の通りコアラのアイコンです。

Koalaのダウンロードはこちらから。

Koalaを起動すると

この画面が表示されるのでフォルダごとドラッグ＆ドロップします。
.scssファイルを認識してくれますので、ドロップすると

緑のアイコンが表示されます。
これをクリックし黒い画面のサイドバーを出します。

あとは自分で自由に設定し、【 Compile 】を押せばコンパイル完了です。
セレクトボックスになっている箇所はコンパイル後のCSSの表記法の設定です。
おすすめは【expanded 】です。きっちり左に揃った形で表記されます。
入れ子のようにインデントをつけて表示したい方は【 neseted 】

あとがき

少々長くなりましたが、前回と合わせてSassについて紹介させていただきました。
Sassはすごく難しそうでなかなか手が出せませんでしたが、いざやってみるとすごい楽しいです。
効率も良くなりますし。
KoalaなどのGUIアプリを使うと簡単ですが、個人的にはターミナルもなかなか面白いのでおすすめです。

Sass

備忘録

この記事を読んだ方におすすめ