Compassに依存しない! Sass (SCSS) をちゃんと学ぶ その2

脱Compass Sassを学ぶ - その2

前回に引き続き、Compassに依存しないSassネイティブな機能をおさらいしていきます。こうして学んでいくと、ベンダープレフィックスの自動化以外は結構Compassなしでやっていける印象がありますね。ただし、IE8以前のようなモダンブラウザ以外も対象にするなら圧倒的にCompassを使ったほうがいいと思います。個人的には古いブラウザは容赦なく切り捨てる方が、最終的にはみんなが幸せになる気がしますが。

変数を使用する

Sassを使用する上で最も頻度も高く、便利に感じられるのが変数を使用できることでしょう。変数はドル記号で始まり、数値や文字列、カラーコードなどの値を代入できます。変数の値は何度でも使用でき、上書きしたり計算する事も可能です。
注意すべきは、代入式がPHPやJavascriptのような一般的な言語で使われる =(イコール)ではなく、CSSプロパティと同じ:(コロン)による値の設定をすることです。

Sassで使用できる変数の型は以下の7つです。

  • 数値(例:1.2, 14, 10px など)
  • 文字列(クォートつきも可)
  • カラーコード(例:blue, #0000ff, rgba(255, 0, 0, 0.5) など)
  • 論理型(true, false)
  • Null値
  • 値のリスト(カンマまたはスペース区切り)
  • map型(例:(key1:value1, key2:value2) )

CSSのプロパティ値で使用されるほとんどの値はカバーされていますが、 !important だけは値として代入できません。!(エクスクラメーションマーク)が上手く処理できないためです。注意しましょう。

Sassで特徴的なものが !default によるデフォルト値指定です。これは変数の宣言がない場合に代入する値を指定するもので、すでに変数の値が設定されていた場合は無視されます。

変数のスコープ

スコープとは、変数の有効範囲のことで、プログラムのどの場所から参照できるかを決める概念です。Sassではセレクタの波括弧 {} の外で宣言される変数はグローバル変数として、波括弧の中で宣言された変数はローカル変数として扱われます。ローカル変数はその波括弧の中でのみ参照する事ができます。

この例では blockquote に指定した line-height の値の変数が存在しないためエラーとなります。$base-font-size をローカル内で代入しても、グローバル変数の上書きにはならない点を理解してください。

算術演算

数値の計算

Sassでは基本的な算術演算(加減乗除および余り)を行う事ができます。数値はもちろん、カラーコードなんかも足したり引いたりできます。
ただし、やってるうちに解ってきますが少し癖があるので注意が必要です。10px * 10px なんて計算できそうな気がしますが、計算結果は 100px*px という訳の解らないことになります。10px * 10 なら期待通りの結果が得られます。

また、割り算(/)にも注意点があります。CSSの中には、プロパティ値をスラッシュ区切りで指定できるものがあるので、期待通りに計算が行われない場合が出てきます。その場合は括弧でくくるなどして、計算式であることをSassに理解させてあげる必要があります。

逆に、計算させたくない場合はインタポレーション(後ほど説明)を使います。

Sassに備わっている関数を使用して、もっと複雑な計算も可能です。

abs( $number )
絶対値を取得する。
round( $number )
四捨五入する。
ceil( $number )
小数点以下を切り上げる。
floor( $number )
小数点以下を切り下げる。
percentage( $number )
パーセント形式に変換する。
random( [$limit] )
1から$limitまでの数値をランダムで取り出す。
min( $number1, $number2, $number3 … )
候補の中から最も小さい値を取り出す。
max( $number1, $number2, $number3 … )
候補の中から最も大きい値を取り出す。

文字列をコントロールする

文字列も連結させることができます。+(プラス)演算子で文字列を連結させます。Javascriptと似ていますが、クォートの扱いに注意してください。

クォートを付ける、付けないをハッキリさせたい場合は関数を使ったほうが確実です。

quote( $string )
クォートをつける。
unquote( $string )
クォートをはずす。

その他にも文字列用の関数があります。主に自作関数やMixinの時に使用するものです。

str-length( $string )
文字列の長さを取得します。日本語もちゃんと数えてくれます。
str-insert( $string, $insert, $index )
$index で指定した位置に $insert の文字列を挿入します。$indexを負の数にすると末尾からの位置になります。
str-index( $string, $substring )
$substring の文字列が $string の中に含まれるかを調べます。含まれていれば開始位置を返し、見つからなければ0を返します。
str-slice( $string, $start-at, [$end-at] )
$string から指定範囲の文字列を取り出します。負の数にすると末尾からの位置になります。
to-upper-case( $string )
アルファベットを大文字に変換します。
to-lower-case( $string )
アルファベットを小文字に変換します。

カラーをコントロールする

カラーに関する計算は、Sass標準の機能でかなりの事ができます。単純に加算・減算することも出来ますし、関数を使用してもっと多彩な色指定も行えます。上限・下限を超えるような指定は白(#ffffff)または黒(#000000)として扱われます。

カラーに関する関数は多く用意されています。よく使うものだけマーキングしておきます。

rgb( $red, $green, $blue )
10進数または%指定のRGB値をHEXカラーに変換します。
rgba( $red, $green, $blude, $opacity )
透明度付きのRGBA値に変換します。
red( $color )
RGB値のR値(赤)を返します。
green( $color )
RGB値のG値(緑)を返します。
blue( $color )
RGB値のB値(青)を返します。
mix( $color1, $color2, [$weight] )
2つの色の中間色を返します。
hsl( $hue, $saturation, $lightness )
HSL形式の値をHEXカラーに変換します。
hsla( $hue, $saturation, $lightness, $opacity )
HSLA形式の値をRGBA値に変換します。
hue( $color )
HSL形式の値から hue(色相)を返します。
saturation( $color )
HSL形式の値から saturation(彩度)を返します。
lightness( $color )
HSL形式の値から lightness(明度)を返します。
lighten( $color, $amount )
明度を上げます。
darken( $color, $amount )
明度を下げます。
saturate( $color, $amount )
彩度を上げます。
desaturate( $color, $amount )
彩度を下げます。
grayscale( $color )
グレースケールに変換します。
complement( $color )
補色を返します。
invert( $color )
色を反転します。
alpha( $color ) / opacity( $color )
透明度を返します。
adjust-hue( $color, $degrees )
色相の角度を変更します。
adjust-color( $color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha] )
色のあらゆる値を一括変更できます。
scale-color( $color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha] )
現在の値から最大/最小値までの変化をパーセント指定で変更します。
change-color( $color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha] )
adjust-color と同様です。
transparentize( $color, $amount )
指定した色の透明度を上げてより透明にします。
in-hex-str( $color )
IE独自実装のfilterプロパティで利用できる形式に変換します。

リスト型とmap型の処理

いわゆる配列の役割をするリスト型と、連想配列の役割をするmap型を扱う事ができます。
リスト型は値をカンマで区切ります。CSSのfont-familyの指定と同じ表記の仕方です。配列である事を明示させるために丸括弧で囲むこともできます。
map型はキーと値をコロンで仕切ります。後は配列と同じように要素をカンマで区切ります。リスト型と違い丸括弧で囲むのは必須です。最後の要素の後にカンマをつけてあっても動作はしますが、なるべく付けないようにしたほうがいいでしょう。map型を入れ子にする事も可能です。

リスト型やmap型は、主に自作関数や自作Mixinを作成する場合に役に立つでしょう。Sassに備わった関数を使用してさらに複雑な処理が可能です。

リスト型を操作する関数一覧です。

length( $list )
リストのアイテム数を返します。
nth( $list, $n )
リストのn番目の値を返します。
set-nth( $list, $n, $value )
n番目のアイテムの値を置き換えます。
join( $list1, $list2, [$separator] )
2つのリストを1つに結合します。
append( $list1, $val, [$separator] )
リストの最後に値を追加します。
zip( $lists… )
複数のリストを1つの多次元リストに結合します。
index( $list, $value )
$value の値がリストの何番目にあるかを返します。見つからない場合は false を返します。
list-separator( #list )
リストの区切り文字が何であるかを返します。スペースならば space 、カンマならば comma です。

map型を操作する関数一覧です。

map-get( $map, $key )
指定したキーの値を取得します。
map-merge( $map1, $map2 )
2つのmapを1つに結合します。
map-remove( $map, $keys… )
指定したキーとその値をmapから削除します。
map-keys( $map )
キーの一覧をリスト形式で返します。
map-values( $map )
値の一覧をリスト形式で返します。
map-has-key( $map, $key )
指定したキーが存在するかを調べます。存在すれば true を、存在しなければ false を返します。
keywords( $args )
関数やMixinの引数指定を取得できます。

インターポレーション

変数をCSSセレクタやプロパティ名に利用したい場合に、インターポレーションを使う事で実現できます。#{} で変数を囲みます。

map型と制御文との組み合わせで一括指定みたいな事もできます。例として、メッセージの重要度で文字色をつけるクラスを作成してみます。


思ったよりも長くなってしまいました。
今回はここまで。次回はSCSSでのネスト(入れ子)についてを詳しく見て行きたいと思います。