今回はCSS拡張メタ言語をご紹介します。
なにそれ？って言う方も多いと思います。私も最近までそうでした。どうして知ったかというと前回の記事でCSSフレームワークでツイッターブートストラップがLESSを使用されているのです。それでコレなんだろって調べたらわかったんです。因みにツイッターブートストラップのSCSS版もあります。
簡単に言うとCSSをより簡単に記述しようってことです。
CSS記述するとき重複したり、それぞれのブラウザに対応するような記述やあとCSS3対応させるためになんだか長い記述しないとダメですよね。-webkitとか-mozとか。
そういうのを解消したものなんですね。自動的に計算なんかもやってくれる機能もあります。
スポンサーリンク
これはかなり便利な機能です。
最初にやるなら断然LESSだと思います。javascriptで簡単に実装できるしすぐに体感できるので。ウェブ上にアップするときは必ずコンパイルしてから利用してください。やはり負荷が増えるのしJSが実行できない環境だと。
SCSS（Sass）は機能が多いのでちょっとプログラム的な感じがします。個人的には使いやすいですが初めてやる方はちょっと難しいかもしれません。
最近はこのような書籍も出てきて学習しやすくなりましたね。
LESSコンパイラソフト
・Less Parser
私も利用しています。特に簡単で使いやすいのがいいです。AdobeAIRが入っているOSなら使えます。Win＆Macももちろん可能です！
・Simpless
ドラッグアンドドロップで利用できてとてもシンプルなので利用していましたが、今はLess Parser使用しています。Win&Mac対応してます。
・LessAPP
Macで人気のソフトのようです。使った事無いですが一応Macユーザー用に乗せておきます。
・LessTester
オンライン上でコンパイルするので楽です。結構利用しています。
簡単な使い方
今回の例はLESSです。ファイル名は.lessで保存してください。それからLESSのサイトからLESS.jsをダウンロードしてリンクしておきます。そしてLESSファイルを作成してリンクし起きます。
今回はgooglecodeからLESSコードを直接リンクしてあります。（下記参照）
1 2 | <link rel="stylesheet/less" type="text/css" href="styles.less"> <script type="text/javascript" src="http://lesscss.googlecode.com/files/less-1.3.0.min.js"></script> |
まず初めに変数に入れ込む方法から説明します。
LESSは@のあとのアルファベットで変数を作ります。
@blueと@redで色を指定してやります。
使うid属性に@redを指定してやれば赤色が入ります。簡単ですね。色の計算なんかも出来ます。以下サンプルです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | // LESS @blue: #000099; @red: #FF0000; @h1: 24px; @h2: (@h1 / 2) + 5; @url: "http://sample.com"; h1 { font-size: @h1; color: @blue; } h2{ font-size: @h2; color: @blue + @red; background-image: url("@{url}/img/background.png"); } |
1 2 3 4 5 6 7 8 9 10 | /* コンパイル後のCSS */ h1{ font-size:24px; color:#000099; } h2{ font-size:17px; color:#ff0099; background-image:url("http://sample.com/img/background.png"); } |
ミックスインはクラス指定して値をまとめて入れ込みます。カッコはオプションで好きな数字で表せるようにしてあります。
これ便利ですね。楽ですねー。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | // LESS .rounded-corners (@radius: 3px) { margin:@radius * 2; border: (@radius - 2) solid #ccc; -webkit-border-radius:@radius; -moz-border-radius: @radius; border-radius: @radius; } #header { .rounded-corners; } #footer { .rounded-corners(5px); } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | /* コンパイル後のCSS */ #header{ margin:6px; border:1px solid #cccccc; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; } #footer{ margin:10px; border:3px solid #cccccc; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } |
あとは入れ子で記述して更にスピードアップです！
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | // LESS @borderColor: #f00; #header { font-size: 18px; .logo { font-weight:bold; a { text-decoration: none; &:hover { font-weight: normal; } } } .menu { @borderColor: #999; border: 1px solid @borderColor; } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | /* コンパイル後のCSS */ #header{ font-size:18px; } #header .logo{ font-weight:bold; } #header .logo a{ text-decoration:none; } #header .logo a:hover{ font-weight:normal; } #header .menu{ border:1px solid #999999; } |
CSSをプログラムちっくに扱えるところが良いですねー。なれるとコーディングスピードアップまちがいなしですね！
LESSとSCSSを実際に比較されたサイトがありますのでコチラが参考になります。
CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較
私はどちらも使えるようになったらいいんじゃないの？って思います。
機能的にはSCSSが多いですがほとんどLESSとかぶっているところが多いですしね～。
若干の違うところがあるぐらいでほぼ一緒です。
SCSSのインストール/コンパイル方法
SCSS導入にはRubyが必要です。それからほんの少しだけどコードを知って置かなければならないのです。
調べたらすぐ出てくるのですが、一応覚書で残しておきます。
Rubyインストールした後はターミナル画面からSASSをインストール
gem install sass |
コンパイルコマンド
sass css/style.scss css/style.css |
とすればコンパイルされるのですがいちいち何回も記述するたびにコンパイルするのが面倒なので
sass --watch css/style.scss:css/style.css |
–watchコマンドをつければ自動的にコンパイルされます。cssファイルが多い場合はフォルダ指定しておけば全てに適応されます。
sass --watch scss:css |
とすればファイル名同じままcssに展開してくれます。
オプションで展開が4種類出力できます。
・nested
デフォルトの展開方法です。
・expanded
典型的なCSSの記述スタイルです。私はこれで出力しています。
・compact
各属性を1行で書くスタイルです。
・compresse
圧縮版です。すべての属性に改行がないスタイルです。
下記は展開例です。
sass --style expanded --watch scss/style.scss:css/style.css |
SASSフレームワークとしてCompassというのがあります。
SASSのmixinとしてひと通り用意されてるのでかなり楽に作業が行えます。
因みにSCSSとSassは同じではありません。これも若干違いがあります。
以下はリファレンスとして載せておきます。
SCSSの関数や用例を載せてあります。ご参考までに。
SCSS関数リファレンス
RGB関数
rgb($red, $green, $blue)
・変換RGB（赤、緑、青）色を16進トリプレットに変換します。
例： rgb(36, 104, 160) => #2468a0 rgb(4, 8, 16) => #040810 |
rgba($red, $green, $blue, $alpha)
・変換RGBA（赤、緑、青、アルファ）色に四つ組を。
rgba($color, $alpha)
・任意の色値にアルファレイヤーを追加します。
例： rgba(#102030, 0.5) => rgba(16, 32, 48, 0.5) rgba(blue, 0.2) => rgba(0, 0, 255, 0.2) |
red($color)
・色の赤色成分を取得します。
例： red(#373b41) => 55 |
green($color)
・色の緑色成分を取得します。
例： green(#93a1a1) => 161 |
blue($color)
・色の青色成分を取得します。
例： blue(#839496) => 150 |
mix($color-1, $color-2, [$weight])
一緒に2つの色をミックスします。
例： mix(#999999, #cccccc, 50%) => #b2b2b2 mix(#0000FF, #FF0000, 50%) => #7f007f |
HSL関数
hsl($hue, $saturation, $lightness)
・変換HSL（色相、彩度、明度）の色に16進トリプレットに変換します。
hsla($hue, $saturation, $lightness, $alpha)
・変換HSLA（色相、彩度、明度、アルファ）色に四つ組を。
hue($color)
・色の色相の値を取得します。
saturation($color)
・色の彩度の値を取得します。
lightness($color)
・色の輝度の値を取得します。
adjust-hue($color, $degrees)
・色の色相を変更します。
輝度と彩度を維持しながら、色の色相を変更します。
色と度数を（通常の間に-360degと360deg）をとり、その値で色相の回転で色を返します。
例： adjust-hue(hsl(120, 30%, 90%), 60) => hsl(180, 30%, 90%) adjust-hue(hsl(120, 30%, 90%), -60) => hsl(60, 30%, 90%) adjust-hue(#811, 45) => #886a11 |
lighten($color, $amount)
・色を明るくすることができます。
0％～100％の色と量を取り、その値に加算明度で色を返します。
darken($color, $amount)
・色を暗くすることができます。
0％～100％の色と量を取り、その値に減少明度で色を返します。
例： darken(hsl(25, 100%, 80%), 30%) => hsl(25, 100%, 50%) darken(#800, 20%) => #200 |
saturate($color, $amount)
・色の彩度を加算。
0％～100％の色と量を取り、その値の加算彩度した色を返します
例： saturate(hsl(120, 30%, 90%), 20%) => hsl(120, 50%, 90%) saturate(#855, 20%) => #9e3f3f |
desaturate($color, $amount)
・色の彩度を減算。
0％～100％の色と量を取り、その値の減算彩度した色を返します。
例： desaturate(hsl(120, 30%, 90%), 20%) => hsl(120, 10%, 90%) desaturate(#855, 20%) => #726b6b |
grayscale($color)
・グレースケールに色を変換します。
complement($color)
・色の補数を返します。色相を調整する。
invert($color)
・色の逆関数を返します。
不透明度関数
alpha($color) / opacity($color)
・色のアルファ成分（不透明度）を取得します。
rgba($color, $alpha)
・任意の色の値のアルファレイヤーを追加または変更します。
opacify($color, $amount) / fade-in($color, $amount)
・色がより不透明になります。
transparentize($color, $amount) / fade-out($color, $amount)
・色をより透明になります。
例： transparentize(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.4) transparentize(rgba(0, 0, 0, 0.8), 0.2) => rgba(0, 0, 0, 0.6) |
他のカラー関数
赤、緑、青色の値は、0～255の間でなければなりません。
色相、彩度と輝度は 0～100％の間でなければなりません。
アルファ値は0～1の間である必要があります。
すべてのプロパティーはオプションです。
RGB（赤、緑、青）プロパティとHSL（色相、彩度、輝度）プロパティの同時変更はできません。
adjust-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]
・色のコンポーネント(RGB,HSL）のいずれかを増減する。
色のプロパティを調整します。
これは、赤、緑、青、色相、彩度、輝度とアルファ値を変更できます。
色を加算したり、減算することができます。
例： adjust-color(#102030, $blue: 5) => #102035 adjust-color(#102030, $red: -5, $blue: 5) => #0b2035 adjust-color(hsl(25, 100%, 80%), $lightness: -30%, $alpha: -0.4) => hsla(25, 100%, 50%, 0.6) |
scale-color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha]
・流動的に色の1つ以上のコンポーネントを拡張する。
パーセンテージ値による色の目盛り一つ以上特性。
違っているadjust-colorな、色が所有物である変化は達するように手配しました、
彼らがすでにどれくらい高いか低いかについて基づいて、スケールカラーは彼らをなめらかに変えます。
つまり、スケールカラーですでに淡い色を明るくすることはあまり軽さを変えません、
しかし、同一量によって暗色を明るくすることはより劇的にそれを変えます。
これには、スケールカラーを作る利点があります（$color、 … ） $colorが何であるかに関係なく、類似した影響を持ってください。
たとえば、色の軽さは、どこにでも0～100の間にあることができます。
もしもスケール-カラー（$color、$lightness： 40%）、呼ばれます（軽さがその最初の軽さと100の間で方法の40%ある結果として生じる色のもの）。
もしもスケールカラー（$color、$lightness： -40%）その代わりに呼びます、軽さはオリジナルと0の間の方法の40%です。
例： scale-color(hsl(120, 70, 80), $lightness: 50%) => hsl(120, 70, 90) scale-color(rgb(200, 150, 170), $green: -40%, $blue: 70%) => rgb(200, 90, 229) scale-color(hsl(200, 70, 80), $saturation: -90%, $alpha: -30%) => hsla(200, 7, 80, 0.7) |
change-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]
・色の値を変更します。
これは、赤、緑、青、色相、彩度、輝度とアルファ値を変更できます。値の色と現在の値が置き換えられます。
例： change-color(#102030, $blue: 5) => #102005 change-color(#102030, $red: 120, $blue: 5) => #782005 change-color(hsl(25, 100%, 80%), $lightness: 40%, $alpha: 0.8) => hsla(25, 100%, 40%, 0.8) |
文字列関数
unquote($string)
・文字列から引用符を削除します。
文字列が引用されている場合は文字列から引用符を削除、またはそうでない場合は、同じ文字列を返します。
例： unquote("foo") => foo unquote(hoge) => hoge |
quote($string)
・文字列に引用符を追加します。
例： quote(foo) => "foo" quote(hoge) => "hoge" |
zip($list-1, $list-2, $list-3)
・単一のカンマ区切りリストのスペース区切りのリストに複数のリストを組み合わせます。
結果として得られるリストの長さは最短のリストの長さです。
例： zip(1px 1px 3px, solid dashed solid, red green blue) => 1px solid red, 1px dashed green, 3px solid blue |
数値関数
percentage($value)
・単位のない数字は、パーセンテージに変換されます。
例： percentage(100px / 50px) => 200% percentage(25px / 50px) => 50% |
round($value)
・最も近い整数に丸めます。（四捨五入）
例： round(10.4px) => 10px round(10.6px) => 11px |
ceil($value)
・最も近い整数に丸めます。（切り上げ）
例： ciel(10.4px) => 11px ciel(10.6px) => 11px |
floor($value)
・最も近い整数に丸める。（切り捨て）
例： floor(10.4px) => 10px floor(10.6px) => 10px |
abs($value)
・数値の絶対値を返します。
例： abs(10px) => 10px abs(-10px) => 10px |
リスト関数
length($list)
・リストの長さを返します。
例： $list = a, b, c, d, e; length($list) =>5 |
nth($list, $n)
・リスト内の特定の項目を返します。
例： $list = a, b, c, d, e; nth($list, 3) => c |
append(list,val)
・リストの末尾に追加したい、結合したい
例： append(10px 20px, 30px) => 10px 20px 30px append((blue, red), green) => blue, red, green append(10px 20px, 30px 40px) => 10px 20px 30px 40px |
join($list1, $list2, [$separator])
・ひとつにまとめ二つのリストを結合します。
リストの末尾に追加しますが、リストが単一の場合、セパレーターはスペースで区切られます。
例： join(10px 20px, 30px 40px) => 10px 20px 30px 40px join((blue, red), (#abc, #def)) => blue, red, #abc, #def join(10px, 20px) => 10px 20px join(10px, 20px, comma) => 10px, 20px join((blue, red), (#abc, #def), space) => blue red #abc #def |
index(list, value)
・与えられたリスト内の指定された値の位置を返します。
見つからない場合は、falseを返します。
例： index(1px solid red, solid) => 2 index(1px solid red, dashed) => false |
イントロスペクション関数
type-of($value)
・値の型を返します。
引数の型を検査し、引用符のない文字列として型を返します。
例： type-of(100px) => number type-of(asdf) => string type-of("asdf") => string type-of(true) => bool type-of(#fff) => color type-of(blue) => color |
unit($number)
・番号に関連付けられている単位を返します。
数値の単位を検査し、引用符で囲まれた文字列として値を返します。
複雑なユニットは、分子と分母のアルファベット順にソートされます。
例： unit(100) => "" unit(100px) => "px" unit(3em) => "em" unit(10px * 5em) => "em*px" unit(10px * 5em / 30cm / 1rem) => "em*px/cm*rem" |
unitless($number)
・数値が単位を持っているかどうかを返します。
数値の単位を検査し、単位かどうかをboolean(true or false)で返します。
例： unitless(100) => true unitless(100px) => false |
comparable($number-1, $number-2)
・2つの数字が追加または比較することができるかどうかを返します。
2つの数字が、加算・減算、または比較する同じ単位の場合は、trueを返します。
例： comparable(2px, 1px) => true comparable(100px, 3em) => false comparable(10cm, 3mm) => true |
その他の関数（制御構文）
if($condition, $if-true, $if-false)
・条件が真であるかどうかに応じて、二つの値のいずれかを返します。
例： if(true, 1px, 2px) => 1px if(false, 1px, 2px) => 2px |
$type: forest; p { @if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else if $type == forest { color: green; } @else { color: black; } } => p { color: green; } |
for文
・指定回数繰り返して処理を行います。
例： @for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } } => .item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; } |
each文
・リストがなくなるまで繰り返し処理を行います。
例： @each $list in item-1, item-2, item-3, item-4{ .#{$list} { width:100% / length($classList); background-image: url('/images/#{$list}.png'); float:left; } } => .item-1{ width:25% background-image: url('/images/item-1.png'); float:left; } .item-2{ width:25% background-image: url('/images/item-2.png'); float:left; } .item-3{ width:25% background-image: url('/images/item-3.png'); float:left; } .item-4{ width:25% background-image: url('/images/item-4.png'); float:left; } |
while文
・条件を満たす間、処理を繰り返す事が出来ます。
例： $i: 6; @while $i > 0 { .item-#{$i} { width: 2em * $i; } $i: $i - 2; } => .item-6 { width: 12em; } .item-4 { width: 8em; } .item-2 { width: 4em; } |
カスタム関数
オリジナルで関数を作ることが可能です。
例： $grid-width: 40px; $gutter-width: 10px; @function grid-width($n) { @return $n * $grid-width + ($n - 1) * $gutter-width; } #sidebar { width: grid-width(5); } => #sidebar { width: 240px; } |
