Sass
More than 1 year has passed since last update.

今更だけれどSassぐらい知っとこうと思ったのでいろいろと自分用にメモ。
導入とかは省いて構文などのメモです。

SassにはSassとSCSSと言う2種類の記法があるらしいですけど、
ナウなヤングたちはSCSS記法って聞いたのでSCSS記法でメモってます。

基本的なこと

記号いろいろ

記号 意味
$var 変数
%class Sass内でのクラス定義
& 親セレクタ参照
#{$var} 変数参照(変数の値をクラス名などに利用するとき)
@_xxx_ @で始まるものは制御文

制御文の例

制御文 役割
@mixin ミックスイン定義
@include ミックスイン使う
@function ファンクション定義
@content ミックスインにブロックコンテンツをわたす
@extend クラスの継承
@if 分岐 @else とかある
@for ループ
@each 配列回すやつ

などなど。

コメントの書き方

SCSS
/* このコメントは */
/* CSS変換後も
 * 残ります。 */
body { color: black; }

// こちらのコメントは
// CSSに変換すると消えます。
// 複数行構文はないよ!
a { color: green; }
CSS
/* このコメントは */
/* CSS変換後も
 * 残ります。 */
body {
  color: black;
}

a {
  color: green;
}

階層構造をそのままネストして書ける

変数が使えるよ!

SCSS
$space: 5px;
.parent {
  margin: $space;
  .child {
    padding: $space;
  }
}
CSS
.parent {
  margin: 5px;
}
.parent .child {
  padding: 5px;
}

プレフィックスが同じプロパティもネストして書ける

SCSS
.box {
  width: 150px;
  padding: {
    top: 5px;
    bottom: 10px;
  }
}
CSS
.box {
  width: 150px;
  padding-top: 5px;
  padding-bottom: 10px;
}

擬似要素もネスト

SCSS
.box {
  color: #000;
  &:hover {
    color: #f00;
  }
}
CSS
.box {
  color: #000;
}

.box:hover {
  color: #f00;
}

継承

クラスの継承ができる!

SCSS
%box-base {
  margin: 10px;
  padding: 10px;
}

.box_red {
  @extend %box-base;
  color: #f00;
}

.box_blue {
  @extend %box-base;
  color: #00f;
}
CSS
.box_red, .box_blue {
  margin: 10px;
  padding: 10px;
}

.box_red {
  color: #f00;
}

.box_blue {
  color: #00f;
}

% で始まるセレクタはSassのもので、CSSに出力はされないけれど継承などに利用できるクラスになります。

ミックスイン / 関数

ミックスイン

同じ処理を一つにまとめることができます。

SCSS
@mixin basebox {
  margin: 10px;
  padding: 10px;
}
.box_red {
  @include basebox;
  color: #f00;
}

.box_blue {
  @include basebox;
  color: #00f;
}
CSS
.box_red {
  margin: 10px;
  padding: 10px;
  color: #f00;
}

.box_blue {
  margin: 10px;
  padding: 10px;
  color: #00f;
}

引数をつかう

SCSS
@mixin solidborder($width: 1px) {
  border: $width solid #000;
}
.border {
  @include solidborder;
}

.bold_border {
  @include solidborder(5px);
}
CSS
.border {
  border: 1px solid #000;
}

.bold_border {
  border: 5px solid #000;
}

@content を使う

SCSS
@mixin boxbase {
  margin: 1px;
  padding: 5px;
  @content
}

.red-border-box {
  @include boxbase {
    border: 1px solid #f00;
  }
}
CSS
.red-border-box {
  margin: 1px;
  padding: 5px;
  border: 1px solid #f00;
}

実際上記の様に使うことはあんまないと思います。

参考:(翻訳) Sassの@contentのユースケース

関数

引数を取り、結果を返却する関数を定義できます。

SCSS
$imagesPath: "../images/";
@function printUrl($fileName) {
  @return url($imagesPath + $fileName);
}

.icon {
  background: printUrl('icon.png') no-repeat center center;
}
CSS
.icon {
  background: url("../images/icon.png") no-repeat center center;
}

関数外で宣言した変数も使えるようです。(危険)

この辺まではぼんやり知ってたんですけど、この先がびっくりしました。

ループ とか

For

ループまであったんかSass兄さん…。(分岐まである)

SCSS
@for $i from 1 through 5 {
  .box_#{$i} {
    margin: {
      // 普通の分岐
      @if $i == 1 {
        bottom: 5px;
      }
      @else {
        bottom: $i * 10px;
      }
    }
    // if関数まである
    padding: {
      left: if($i == 1, 5px, $i * 5px);
    }
  }
}
CSS
.box1 {
  margin-bottom: 5px;
  padding-left: 5px;
}

.box2 {
  margin-bottom: 20px;
  padding-left: 10px;
}

.box3 {
  margin-bottom: 30px;
  padding-left: 15px;
}

.box4 {
  margin-bottom: 40px;
  padding-left: 20px;
}

.box5 {
  margin-bottom: 50px;
  padding-left: 25px;
}

if関数

  • if(条件, 正の場合に出力する, 負の場合に出力する)

配列

ループがあるなら配列がないとね、という訳で配列も使えるようです。

SCSS
$icons: 'icon_a', 'icon_b', 'icon_c';
@each $icon in $icons {
  .#{$icon} {
    background: printUrl($icon + '.png') no-repeat center center;
  }
}
CSS
.icon_a {
  background: url("../images/icon_a.png") no-repeat center center;
}

.icon_b {
  background: url("../images/icon_b.png") no-repeat center center;
}

.icon_c {
  background: url("../images/icon_c.png") no-repeat center center;
}

とりあえずここまで!
CSSあんまり書かないけどこれ覚えたら凄い早くなるだろうなあ。

そんな関数ねえだろーって思ったらめっちゃあったから取り敢えず一覧だけ。

組み込み関数

詳しくはこちら
関数一覧 | Web制作者のためのSassの教科書 - 公式サポートサイト

バージョンによって追加された関数とかまだまだありそう。
やばい、おぼえきれない、すごい。

RGB形式の色を操作する関数

  • rgb($red, $green, $blue)
    10進数または%指定のRGB値を16進数のRGB値に変換します。

  • rgba($red, $green, $blue, $alpha)
    RGBA値を10進数のRGBA値に変換します。CSSだと透明度付きの場合16進数で指定できませんが、16進数のRGB値を指定しても10進数に変換してくれます。また、キーワードも変換してくれます。

  • red($color)
    16進数のRGB値のR値(赤)を返します。

  • green($color)
    16進数のRGB値のG値(緑)を返します。

  • blue($color)
    16進数のRGB値のB値(青)を返します。

  • `mix($c1, $c2, [$weight])
    2つの色を混ぜて中間色が作れます。

HSL形式の色を操作する関数

  • hsl($hue, $saturation, $lightness)
    HSL形式の値を16進数のRGB値に変換します。

  • hsla($hue, $saturation, $lightness, $alpha)
    HSLA形式の値をRGBA値に変換します。

  • hue($color)
    HSL形式からhue値(色相)を返します。

  • saturation($color)
    HSL形式からsaturation値(彩度)を返します。

  • lightness($color)
    HSL形式からlightness値(明度)を返します。

  • adjust-hue($color, $degrees)
    指定した色のhue値(色相)の角度を変更します。

  • lighten($color, $amount)
    指定した色の明度を上げて明るくします。

  • darken($color, $amount)
    指定した色の明度を下げて暗くします。

  • saturate($color, $amount)
    指定した色の彩度を上げます。

  • desaturate($color, $amount)
    指定した色の彩度を下げます。

  • grayscale($color)
    指定した色をグレースケールに変換します。

  • complement($color)
    指定した色の補色を返します。

  • invert($color)
    指定した色を反転します。

透明度を操作する関数

  • alpha($color) / opacity($color)
    指定した色の透明度を返します。また、alpha() は、マイクロソフト独自の alpha(opacity=30) をサポートしているため、エラーになりません。

  • rgba($color, $alpha)
    あらゆる色の透明度を変更します。この関数は、RGB形式の色を操作する関数と同じです。

  • opacify($color, $amount) / fade-in($color, $amount)
    指定した色の透明度を下げてより不透明にします。不透明にした結果、値が1以上になった場合は、RGB形式で返します。

  • transparentize($color, $amount) / fade-out($color, $amount)
    指定した色の透明度を上げてより透明にします。

その他の色を調整する関数

  • adjust-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])
    RGB,hue,彩度,明度...あらゆる色の値を一度に調整出来ます。

  • scale-color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha])
    現在の値から最大値までの変化の割合を指定して操作します。指定できる値は、adjust-color() と同じです。

  • change-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])
    指定した色の値を変更出来ます。指定できる値は、adjust-color() と同じです。

  • ie-hex-str($color)
    指定した色を、IE独自実装のfilterプロパティで利用できる形式に変換します。

文字列を操作する関数

  • unquote($string)
    文字列からクォーテーションを取り除きます。

  • quote($string)
    文字列にクォーテーションを追加します。

数値を操作する関数

  • percentage(value)
    指定した数値をパーセント形式に変換します。

  • round($value)
    指定した数値を四捨五入した値を返します。

  • ceil($value)
    指定した数値の切り上げをした値を返します。

  • floor($value)
    指定した数値の切り捨てをした値を返します。

  • abs($value)
    指定した数値の絶対値を返します。

  • min($x1, $x2, c)
    指定した複数の値のうち、最小値を返します。

  • max($x1, $x2, c)
    指定した複数の値のうち、最大値を返します。

リストを操作する関数

  • length($list)
    指定したリストの項目数(半角スペースで区切られた数)を返します。

  • nth($list, $n)
    指定したリストの内、N番目にある値を返します。

  • join($list1, $list2, [$separator])
    2つのリストを一つに結合します。

  • append($list1, $val, [$separator])
    リストの最後に単一の値を追加します。

  • zip($list1, $list2, c)
    複数のリストを、一つの多次元リストに統合します。

  • index($list, $value)
    リストの中のある値を見つけ出しそのインデックスを返します。値がない場合は false を返します。

内部的な値を確認する関数

  • type-of($value)
    変数のデータタイプを返します。

  • unit($number)
    指定した数値に関連した単位を返します。

  • unitless($number)
    指定した数値に単位があるかどうかを返します。単位の有無に寄って truefaluse を返します。

  • comparable($number-1, $number-2)
    指定した2つの数値が、比較・追加可能かどうかを返します。

条件に応じて値を出し分ける関数

  • if($condition, $if-true, $if-false)
    $conditionの条件が、真なら $if-true の値を、偽なら $if-false の値を返します。