Edited at

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 の値を返します。