CSSの拡張メタ言語であるSassですが、高機能でいろんなことができるため、使いどころがいまひとつ分からないということもあるかと思います。そこで今回は知っておくと便利なSassの基本機能をまとめてみました。インストール方法については前回記事【「Sass」＆「Compass」のインストール方法まとめ（Mac OS X） 】をご覧ください。   Sassには「Sass記法」と「SCSS記法」の2種類があります。それぞれ拡張子が「.sass」と「.scss」になります。記述方法も異なり、SCSSではCSSとほとんど同じ記述方法になりますが、Sassではインデントと改行で記述します。本記事は全てSCSS記法で進めています。   【SCSS】

p {
  margin: 0;
  color: #999;
}

  【Sass】

p
  margin: 0
  color: #999

  それではまずSassで出来る主な機能についてです。  

変数の定義

プロパティの値やセレクタ名などを変数に置き換えて使うことができます。$マークをつけて変数を定義します。セレクタ名などに変数を使う場合は、#{…}の中に変数を記述します。使用箇所の前に変数を定義します。   値を変数に

// SCSS
$primary-color: #336699;

div {
  background: $primary-color;
}

// CSS
div {
  background: #336699;
}

  セレクタ名を変数に

// SCSS
$name: primary;

div.#{$name} {
  background: #fff;
}

// CSS
div.primary {
  background: #fff;
}

 

ネスト（入れ子）

HTMLのように要素間の親子関係をネストで記述することができます。セレクタ部分が長くならず、構造が直感的にわかります。ただし、階層が深くなりすぎると逆にわかりにくくなるので注意が必要です。  

// SCSS
body {
  margin: 0 auto;
    h1 {
    　　font-size: 1.5rem;
    }
    p {
        font-size: 1rem;
    }
}

// CSS
body {
  margin: 0 auto;
}
body h1 {
  font-size: 1.5rem;
}
body p {
  font-size: 1rem;
}

 

親セレクタ継承

親セレクタを&で表記し、ネストの中で使用することができます。こちらもセレクタ部分の表記を省略できるのでスッキリさせることができます。  

// SCSS
li {
  &:first-child { color: #f00; }
  &:last-child { color: #999; }
}

// CSS
li:first-child {
  color: #f00;
}
li:last-child {
  color: #999;
}

 

@mixin・@include

プログラミングの関数のような機能で、ひとかたまりのセクションを@mixinでミックスインとして定義し、@includeでミックスインを呼び出します。  

// SCSS
@mixin style1 {
  margin: 0;
  padding: 0;
  color: #999;
}

p {
  @include style1;
}

// CSS
p {
  margin: 0;
  padding: 0;
  color: #999;
}

 

@content

ミックスイン（@mixin）で定義したブロック内で使用すると、@mixinに合わせた@includeのブロックを@contentの場所へ挿入することができます。メディアクエリーなどミックスインでブロックがネストするときなどにスッキリと記述することができます。  

// SCSS
@mixin mobile {
  @media screen and (max-width: 480px) {
      @content;
  }
}

@include mobile {
  display: none;
}

// CSS
@media screen and (max-width: 480px) {
  display: none;
}

 

@extend

他のセレクタで定義したプロパティや値などの内容をそのまま使うことができます。  

// SCSS
.textstyle {
  font-size: 1rem;
  margin: 0;
  padding: 5px;
}

header {
  @extend .textstyle;
  background-color: #ddff99;
}
footer {
  @extend .textstyle;
  background-color: #55ccbb;
}

// CSS
.textstyle, header, footer {
  font-size: 1rem;
  margin: 0;
  padding: 5px;
}
header {
  background-color: #ddff99;
}
footer {
  background-color: #55ccbb;
}

 

@import・パーティシャル

複数のファイルを@importで一つにまとめることができます。またファイルの先頭にアンダーバーを記述するとコンパイルの対象外（パーティシャル）になります。したがってコンパイルの必要がない@importされるファイルにはパーティシャルとして指定します。また@importのファイル指定ではアンダーバーと拡張子を省略することも可能です。  

// SCSS（_font.scss）
h1 {
  font-size: 1.3rem;
  font-weight: bold;
  color: #555;
}

// SCSS（_layout.scss）
h1 {
  margin: 15px 0;
  padding: 5px ;
}

// SCSS（main.scss）
@import "_font.scss";
@import "_layout.scss";

// CSS
h1 {
  font-size: 1.3rem;
  font-weight: bold;
  color: #555;
  margin: 15px 0;
  padding: 5px ;
}

 

Sassのコンパイル方法

SassファイルやSCSSファイルはブラウザに認識させるためにCSSファイルに変換する必要があります。この作業をコンパイルと呼び、コマンドを入力することでコンパイルを行います。   Sassのコンパイルは次のように入力します。対象ファイルを指定することもできますし、フォルダ内のファイルを一括してコンパイルすることもできます。  

// 特定のファイル指定
$ sass 変換前ファイル名.scss:変換後ファイル名.css

// 一括コンパイル
$ sass scss:css

 

【--style】オプション

--styleをつけることで、変換後の記述方法を指定することができます。改行やインデントを残した状態から、全て圧縮し最小化したものなどいくつかの形式が用意されています。   Nested：入れ子の状態をインデントで表示し出力

$ sass 変換前ファイル名.scss:変換後ファイル名.css --style nested

  【CSS】

body {
  margin: 0; }
  body p {
      font-size: 1.2rem; }
      body p strong {
          font-weight: bold; }
  body footer {
      background: #44ddff; }

  Expanded：インデントを詰めて通常のCSSのような表示で出力

$ sass 変換前ファイル名.scss:変換後ファイル名.css --style expanded

  【CSS】

body {
  margin: 0;
}
body p {
  font-size: 1.2rem
}
body p strong {
  font-weight: bold;
}
body footer {
  background: #44ddff;
}

  Compact：ブロック内の改行を無くして出力

$ sass 変換前ファイル名.scss:変換後ファイル名.css --style compact

  【CSS】

body { margin: 0; }
body p { font-size: 1.2rem; }
body p strong { font-weight: bold; }
body footer { background: #44ddff; }

  Compressed：全ての改行及び不要なスペースを無くして出力

$ sass 変換前ファイル名.scss:変換後ファイル名.css --style compressed

  【CSS】

body{margin:0;}body p{font-size:1.2rem;}body p strong{font-weight:bold;}body footer{background:#44ddff;}

 

【--watch】オプション

--watchを設定すると、Sassを監視し内容の変更があった場合にCSSへ自動でコンパイルされます。  

$ sass --watch 変換前ファイル名.scss:変換後ファイル名.css

    このほかにも、関数が使えたり、if文やfor文などのプログラミング機能もあり、かなり幅広く使うことができます。とても便利なので、使いこなすとコーディングの効率もかなり上がるのではないでしょうか。