CSSを効率よく記述する「Sass」の主な機能

SassとCompassをつかってCSSを効率作成しよう（2）

Sassの主な機能（3）

import

　CSSと同様に、「@import」と記載することで他のファイルを取り込めます。CSSでは「@import」と記載して読み込んだファイルは別ファイルとして処理されますが、Sassでは読み込んだファイルが記載したファイルと同一ファイルとして扱われ、CSSファイルが作成されます。

　つまり、Sassで「@import」と記載すると同一ファイルとしてまとめられるため、HTML表示時にCSSファイルのリクエストを減らすことができます。古いファイルと新しいファイルや、プロジェクトごとにバラバラになったファイルをまとめるのに便利です。

パーシャル

　Sassにはファイル名の先頭に「_」を付与して名前をつけたファイルをcssに変換しないという機能があります。このファイルはcssが作成されないため、他Sassファイルから取り込まれることで初めてcssとしてコンパイルされます。このように部分的に利用されることをパーシャルといいます。

　例えば「reset.scss」をパーシャルとして利用するときは「_reset.scss」とファイル名を変更します。

_rest.scss
html{
  margin:  0;
  padding: 0;
}

　scssファイル名の先頭に「_」を付与するとそのファイルはcssにコンパイルされません

import.scss
//_reset.scssを取り込む 
@import 'reset'; //@import '_reset' もしくは@import '_reset.scss'と記載することもできます
body {
  font-size: 100% Helvetica, sans-serif;
  background-color: #ff8c00;
}

import.css

1つのcssとしてまとめられて出力されます
html {
  margin: 0;
  padding: 0;
}

body {
  font-size: 100% Helvetica, sans-serif;
  background-color: #ff8c00;
}

mixin

　CSSを部品のように扱えるのがミックスイン（mixin）です。「@mixin 名前(引数){}」の形式で記載します。引数を利用することで、mixinはベンダープレフィックスを使うときに便利です。

mixin.scss

//add-prefixというミックスインを作成します
//引数は「$値」で記載します。今回は、property（CSSのプロパティ）とvalue（設定する値）を指定します
@mixin add-prefix($property,$value) { 
  -webkit-#{$paturn}: $value; 
     -moz-#{$paturn}: $value; 
      -ms-#{$paturn}: $value; 
       -o-#{$paturn}: $value; 
          #{$paturn}: $value; 
} 

//ミックスインを使用するときは「@include 名前（引数）」と記載します 
.box { @include add-prefix(border-radius, 10px); }

mixin.css

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

　ミックスインは単体ではCSS出力されません。そのため、mixin.cssでは「.box」の記載のみが出力されました。

継承

　Sassでは、一度記載したCSSを使い回すことが可能です。「@extend セレクタ」の形式で記載します。

extend.scss

//先頭に％を記載してCSSを記載すると、CSS出力されません 
%message { 
  border: 1px solid #ccc; 
  padding: 10px; 
  color: #ff8c00; 
} 
.section-title{ 
 //messageセレクタを適用させます 
 @extend %message; 
  font-size:15px; 
} 
.section-error{ 
  //継承を利用しているセレクタも指定できます 
  @extend .section-title; 
  color: red; 
}

extend.css

.section-title, .section-error {
  border: 1px solid #ccc;
  padding: 10px;
  color: #ff8c00;
}
.section-title, .section-error {
  font-size: 15px;
}
.section-error {
  color: red;
}

関数

　Sassでは、自分で関数を作成することができます。「@function 名前(引数)」の形式で記載します。

function.scss

//get-sizeという名の関数を作成します
//この関数は引数にサイズ（smallかmiddleかbig）を指定して、それぞれのpxサイズ（samll:50px,middle:100px,big:150px）を取得します
@function get-size($key) {
  $value:50px, 100px, 150px; 
  $type:small, middle, big;  
 
  //typeの数だけループさせます。今回の場合typeのサイズはsmall,middle,bigの3タイプなので、3回ループします 
  @for $i from 1 to length($type) {
      //引数で指定したkeyの値がtypeの値（smallかmiddleかbig）と同一であるか判別します
      @if nth($type, $i) == $key {
        //同一であった場合、そのサイズを取得して表示します
       //nth($a,$i)はリスト変数aの$i番目にある値を取得するSassであらかじめ用意されている関数です
        @return nth($value,$i);
      } 
  }
}

//関数を利用するときは使いたい関数の名前と引数を記載します
.block{
width : get-size(middle);//middleのサイズを取得します
}

function.css

.block {
  width: 100px;
}