読者です 読者をやめる 読者になる 読者になる

tanaka's Programming Memo

プログラミングについてのメモ。

SASSのメモ

Web 勉強メモ 書籍

環境構築

  • Rubyをインストール。バージョン1.8以上
sudo gem update --system
sudo gem install sass

機能例

ネスト

  • {}でネストできる
.body {
    > p {
        background-color: white;
        &:hover{
            background-color: red;
        }
    }
}
- &を書くと、セレクタに置き換わる
- 上記をビルドすると以下のようなcssになる
>|css|
.body > p {
  background-color: white;
}
.body > p:hover {
    background-color: red;
}

ビルド

  • ターミナルで以下を実行すると、before.scssファイルをafter.cssにビルドした上で、ファイルシステムを監視して、before.scssが更新されたら自動的にビルドするように待機する
sass --watch before.scss:after.css

変数

  • $に続けて変数名を記載して、:の後ろに値を記述して定義できる
  • 利用する場合は#{$変数名}とする
$val : 'red';
.valcss {
    color: #{$val};
}
  • 上記をビルドすると以下のようなcssになる
.valcss {
  color: red; }

連想配列

  • $配列名: (配列リスト);で定義する
    • データは,で区切る
    • 最後のデータの後ろには;や,を書かないこと
  • 参照は、map_get( 配列名, 項目名)とする
$colors: (
    normal: white,
    select: red
);

.text_norm {
    color: map-get( $colors, normal);
}

.text_select {
    color: map-get( $colors, select);
}
  • 上記をビルドすると以下のようなcssになる
.text_norm {
  color: white; }

.text_select {
  color: red; }

計算

  • 式の中に四則演算を書けば、計算が可能
.enzan {
    left: (200px-100px)/2;
}
  • 上記をビルドすると以下のようなcssになる
.enzan {
  left: 50px; }

ネスト

  • {}でネストすることができる
  • ネストした中で&を書くと、セレクタに置き換わる

@mixin(引数)

  • ブロックを定義することができる
  • @includeで置き換えることができる
  • @ifで分岐も可能

@extend

  • 指定のCSSを貼り付けることができる
  • 元となるCSSセレクタを%で始めると、そのブロックはビルド後に削除される
  • extendを使うことで、同じBlockのBlock部分を全ての定義に含めることができ、複数セレクタを一つにまとめることができる

@import

  • 外部のscssファイルを読み込むことができる