今更だけれどSassぐらい知っとこうと思ったのでいろいろと自分用にメモ。
導入とかは省いて構文などのメモです。
SassにはSassとSCSSと言う2種類の記法があるらしいですけど、
ナウなヤングたちはSCSS記法って聞いたのでSCSS記法でメモってます。
基本的なこと
記号いろいろ
| 記号 | 意味 |
|---|---|
| $var | 変数 |
| %class | Sass内でのクラス定義 |
| & | 親セレクタ参照 |
| #{$var} | 変数参照(変数の値をクラス名などに利用するとき) |
| @_xxx_ | @で始まるものは制御文 |
制御文の例
| 制御文 | 役割 |
|---|---|
@mixin |
ミックスイン定義 |
@include |
ミックスイン使う |
@function |
ファンクション定義 |
@content |
ミックスインにブロックコンテンツをわたす |
@extend |
クラスの継承 |
@if |
分岐 @else とかある |
@for |
ループ |
@each |
配列回すやつ |
などなど。
コメントの書き方
/* このコメントは */
/* CSS変換後も
* 残ります。 */
body { color: black; }
// こちらのコメントは
// CSSに変換すると消えます。
// 複数行構文はないよ！
a { color: green; }
/* このコメントは */
/* CSS変換後も
* 残ります。 */
body {
color: black;
}
a {
color: green;
}
階層構造をそのままネストして書ける
変数が使えるよ！
$space: 5px;
.parent {
margin: $space;
.child {
padding: $space;
}
}
.parent {
margin: 5px;
}
.parent .child {
padding: 5px;
}
プレフィックスが同じプロパティもネストして書ける
.box {
width: 150px;
padding: {
top: 5px;
bottom: 10px;
}
}
.box {
width: 150px;
padding-top: 5px;
padding-bottom: 10px;
}
擬似要素もネスト
.box {
color: #000;
&:hover {
color: #f00;
}
}
.box {
color: #000;
}
.box:hover {
color: #f00;
}
継承
クラスの継承ができる！
%box-base {
margin: 10px;
padding: 10px;
}
.box_red {
@extend %box-base;
color: #f00;
}
.box_blue {
@extend %box-base;
color: #00f;
}
.box_red, .box_blue {
margin: 10px;
padding: 10px;
}
.box_red {
color: #f00;
}
.box_blue {
color: #00f;
}
% で始まるセレクタはSassのもので、CSSに出力はされないけれど継承などに利用できるクラスになります。
ミックスイン / 関数
ミックスイン
同じ処理を一つにまとめることができます。
@mixin basebox {
margin: 10px;
padding: 10px;
}
.box_red {
@include basebox;
color: #f00;
}
.box_blue {
@include basebox;
color: #00f;
}
.box_red {
margin: 10px;
padding: 10px;
color: #f00;
}
.box_blue {
margin: 10px;
padding: 10px;
color: #00f;
}
引数をつかう
@mixin solidborder($width: 1px) {
border: $width solid #000;
}
.border {
@include solidborder;
}
.bold_border {
@include solidborder(5px);
}
.border {
border: 1px solid #000;
}
.bold_border {
border: 5px solid #000;
}
@content を使う
@mixin boxbase {
margin: 1px;
padding: 5px;
@content
}
.red-border-box {
@include boxbase {
border: 1px solid #f00;
}
}
.red-border-box {
margin: 1px;
padding: 5px;
border: 1px solid #f00;
}
実際上記の様に使うことはあんまないと思います。
関数
引数を取り、結果を返却する関数を定義できます。
$imagesPath: "../images/";
@function printUrl($fileName) {
@return url($imagesPath + $fileName);
}
.icon {
background: printUrl('icon.png') no-repeat center center;
}
.icon {
background: url("../images/icon.png") no-repeat center center;
}
関数外で宣言した変数も使えるようです。（危険）
この辺まではぼんやり知ってたんですけど、この先がびっくりしました。
ループ とか
For
ループまであったんかSass兄さん…。（分岐まである）
@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);
}
}
}
.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(条件, 正の場合に出力する, 負の場合に出力する)
配列
ループがあるなら配列がないとね、という訳で配列も使えるようです。
$icons: 'icon_a', 'icon_b', 'icon_c';
@each $icon in $icons {
.#{$icon} {
background: printUrl($icon + '.png') no-repeat center center;
}
}
.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の値を返します。