き、貴様も変数が使えたりするだと・・・?
色々始める前に
sassって初見、めっちゃキモいとか思ってる人も少なくないと思います。
見慣れたcssのほうがいいぜー!みたいな。
sassの便利な所は、変数やらなんやら、若干プログラムっぽいものを組むことによって、共通化して手軽にやろうぜ
みたいな話が主な利点やと思ってます。
変数やら演算子やら関数やら制御文やら出てきますが、そこまで踏み入ってはしないです。
例えば、変数って何なん?どう考えたらいいの?的な。
そこも知りたいんだけどみたいな人は、JSの基本とかでそれなりに丁寧にやってるので
そっちを見てみてください。ってかJS楽しいからやろうよ!(本音)
変数
さて、変数です。
先頭に$マークをつける事によって、それは変数名であると定義されます。
PHPみたいね。
代入にはイコールではなく、コロンで区切ってあげます。オブジェクトみたいですね。
$testName:#000;
変数のスコープ・名前空間
変数のスコープのお話や名前空間。そんな話も当然ついてまわる話です。(流石に当たり前のお話)
特別なルールはないのでいつもどおり
!default
さてさて変なもんが出てきましたね。
$testName:#000 !default;
こう使います。で?なんなの?って事ですが
$testName:#fff; $testName:#000; $testName;// 通常であれば#000 $testName:#fff; $testName:#000 !default; $testName;// defaultをつけることによって#fff
その変数に代入する時に、既に何かしらのデータが入っている場合は代入しない。
って意味になるようです。
【ちょっとまて!その変数なんか入ってない?見て!入ってたらいれないで!】
って感じですね。なるほど
何がなるほどや
ここだけ見るとさっぱり意味がわかりませんし、使いドコロがありません。
ここでsassの特性の一つをお話します
別モジュールをimportして使うことがある
これです。これがあるためあると便利よね的なモノです。
// test1.scss $testName:#fff; // test1.scss // test2.scss @import "test1.scss"; // test1.scssの内容が読み込まれる $testName:#000 !default; // 同じ変数ある場合上書きすんなよ $testName:#000;// #fff // test2.scss // test3.scss @import "test1.scss"; // test1.scssの内容が読み込まれる $testName:#000; // 同じ変数?知らん。上書きしちまえ $testName:#000;// #000 // test3.scss
こんな感じで使い分けるとよいです。なので、別ファイルインポートした時になんか上書きされちゃった!てへぺろを防ぐのによく使われるモンです。
データタイプ
これも当然データ・タイプが存在しています。
さくっといきましょうね。
number
整数・小数を含む所謂、数字
sassの特徴として、10px 等の単位付きも数字扱いとなります。
String
文字列 です。
Boolean
真偽値
list
いわゆる【配列】です。連番キーの配列と思ってもらってOKです。
【スペース】 【カンマ】 【()でくくられたもの】が該当します。
$list:0 1px 1px 0; $list:0,1px,1px,0; $list:(0 1px 1px 0); // ちなみに()が何故必要なのか?の例↓ $list:(0 1px 1px 0),(10 20 30 40); /* $list[0][0] = 0; $list[0][1] = 1px; $list[0][2] = 1px; $list[0][3] = 0; $list[1][0] = 10; $list[1][1] = 20; $list[1][2] = 30; $list[1][3] = 40; こんな感じで多次元配列にもできる すごい! */
map
【連想配列】または【オブジェクト】みたいなもんです。キー名の指定ができたりします。
【スペース】 【カンマ】 【()でくくられたもの】が該当します。
$map:( key1:0, key2:1px, key3:1px, key4:0, key5:(sub1,sub2,sub3),// 配列をネスト key6:( key6_1:sub6_1, key6_2:sub6_2, key6_2:sub6_2, ),// マップをさらにネスト ); /* $map[key1] = 0; $map[key2] = 1px; $map[key3] = 1px; $map[key4] = 0; $map[key5][0] = sub1; $map[key5][1] = sub2; $map[key5][2] = sub3; $map[key6][key6_1] = sub6_1; $map[key6][key6_2] = sub6_2; $map[key6][key6_3] = sub6_3; あぁ~!いいですね! */
color
なんや、文字列ちがうんか?って感じですが
red とかcssのcolorに使えるものを変数に入れた場合、color型と解釈されます。
null
ぬるです。ぬるぽではないです。
演算子
基本的に一緒、一部使い方が違う感じですね。
加算/減算/乗算
+と-と*でやりましょう
除算
何時も通り / を使うのですが。
値リストのデリミタと解釈されないように式を (...) で囲います。
$test:10+2; $test:10-2; $test:10*2; $test:(10/2); $test:10%2;
ちなみに色演算ってのもあって、カラーコードに数字足したりもできます。
color: #666 + #333; color: #fff - #666; color: #666 * 2;
比較演算子
@if (10 < 20) { color: red; } @if (10 <= 20) { color: red; } @if (10 > 2) { color: red; } @if (10 >= 2) { color: red; } @if (10 == 10) { color: red; } @if (10 != 2) { color: red; }
論理演算子
@if (2 < 3 and 4 < 5) { color: blue; } @if (2 < 3 or 5 < 4) { color: blue; } @if not (3 < 2) { color: blue; }
文字列演算子
JSの文字結合と一緒ですね。
font-family: "sans-" + "serif"; font-family: "sans-" + serif; font-family: sans- + "serif";
インターポレーション
なんだねこれはって感じですが、変数にいれた文字列をid名やらプロパティ名に使用したい時が多々あると思います。
そんな時にこれを使います。
これ変数だから!!!って言ってるのデスね。
$name: foo; $attr: "border"; p.#{$name} { #{$attr}-color: blue; }
コメントアウト
複数行コメントと単行コメントの2種類を使用することができます。
ただ、複数行コメントはコンパイル後残りますが
単行コメントはコンパイル後消えますので注意してください。
/* これはそのまま残る */ // これは消える
親セレクタ
ネストの中では親セレクタを【&】で指定することができるのです。
a { &:hover { color: red; } &:link { color: #339; } } // 上記の用に指定してコンパイルすると以下になる a:hover { color: red; } a:link { color: #339; }