お寿司か焼き肉食べたい

まじめな事からしょーもない事まで
めにゅーを開く(投げやり)

き、貴様も変数が使えたりするだと・・・?

色々始める前に

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;
}