LoginSignup
243
255

More than 5 years have passed since last update.

@tomoyuki_okawa(大川 智之)in株式会社スノウロビン

Sassメモ

Last updated at Posted at 2014-12-25

今更だけれど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)
    指定した数値に単位があるかどうかを返します。単位の有無に寄って true か faluse を返します。

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

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
243
255