note
sass初心者のメモ で学習した際の自分用まとめです。
参照サイト
ネスト
.foo {
.bar {
// .foo .bar
}
}
.foo {
> .bar {
// .foo > .bar
}
+ .baz {
// .foo + .bar
}
}
.foo {
.bar & {
// .bar .foo
}
&: hover {
// foo:hover
}
}
.foo {
border {
top: 0; // border-top
bottom: 0; // border-bottom
}
}
コメント
/* 通常コメント：展開後に残る */
// スラッシュ二つ：展開後は削除される
変数
データ型： 数値、文字列、真偽、色、リスト
- スコープ -
$hoge: 0; // グローバル変数
p {
$fuga: 0; // ローカル変数
}
- 変数データ型 -
$fontSize: 16; // Number：数値（単位を含むことも可能 px em 等）
$imgDir: "../img/"; // String：文字列
$fontColor: #ffffff; // Color：色…cssで使用できる値（red、#000000、rgba(0,0,0,1)等）
$flag: true; // Boolean：真偽… 条件分岐：@if @else 、比較演算子： == != < > <= >=
$animals: cat, dog, tiger; // List：リスト（配列）
// Map：マップ（連想配列）※未学習
// Null：空の値 ※未学習
- 例 -
.foo {
font-size: $fontSize;
font-size: #{$fontSize - 2}px; // #{hoge} シャープ波括弧を使った補完構文で計算も可能：補完(インターポレーション)
font-size: #{16 + 2}px; // 変数を使わず直接計算も
background: url($imgDir + "bg.png"); // 通常の記述法
background: url("#{$imgDir}bg.png"); // このような書き方も
color: $fontColor;
color: lighten($fontColor, 30%); // lighten/darken 変数の値を 明るく/暗く 相対指定が可能（sass関数）
@if $flag == true { // 比較演算子を使った条件分岐で値を変更したりも可能
color: red;
} @else {
color: green;
}
p {
@if $fontSize > 20 { color: yellow; }
}
}
※sass関数一覧：sass built-in functions
ループ ＠for ＠while
@for $i from 10 through 14 { // for文 変数宣言 from 開始数値 through（スルー）終了数値
.fs#{$i} { font-size: #{$i}px; }
}
$i: 20; // while文では先に変数宣言すること
@while $i <= 24 {
.fs#{$i} { font-size: #{$i}px; }
$i: $i + 1;
}
配列
- scss -
$animals: cat, dog, tiger;
@each $animal in $animals {
.#{$animal}-icon { background: url("#{$animal}.png"); }
}
// この書き方でも同じ
@each $animal in cat, dog, tiger {
.#{$animal}-icon { background: url("#{$animal}.png"); }
}
- css -
.cat-icon {
background: url("cat.png");
}
.dog-icon {
background: url("dog.png");
}
.tiger-icon {
background: url("tiger.png");
}
.cat-icon {
background: url("cat.png");
}
.dog-icon {
background: url("dog.png");
}
.tiger-icon {
background: url("tiger.png");
}
関数
- scss -
$totalWidth: 940px;
$columnCount: 10;
@function getColumnWidth($width, $count) {
// $columnWidthを計算
$padding: 10px; // 関数内で宣言した変数は、その中でしか使用できない
$columnWidth: floor(($width -($padding * ($count - 1))) / $count);
@debug $columnWidth; // 計算された数値を確認したいとき、@debug を使用するとコンソールに計算結果を表示可能
@return $columnWidth;
}
.foo {
float: left;
width: getColumnWidth($totalWidth, $columnCount);
}
- css -
.foo {
float: left;
width: 85px;
}
ファイル分割 ＠import
関数などを別ファイルにしてスッキリ管理しやすく。
読み込み用の外部ファイルはファイ不明の頭に「_(アンダーバー)」を付ける。
ファイル名頭に「_」のファイルはsassコマンド実行してもcssは生成されない。
@import "settings"; // _settings.scss の読み込み
@import "functions"; // _functions.scss の読み込み
ミックスイン ＠mixin
@mixin round($radius:4px) {// 引数の初期値の設定も可能
border-radius: $radius;
}
.foo {
@include round(10px); // 展開→ border-radius: 10px;
}
.bar {
@include round; // 展開→ border-radius: 4px;
}
継承（エクステンド） ＠extend
共通プロパティを持つクラスは、＠extend で継承させて差分のみを記述するとコードを短くできる。
- scss -
.foo {
font-size: 12px;
}
.bar {
@extend .foo;
color: red;
}
.baz {
@extend .foo;
color: blue;
}
- css -
.foo, .bar, .baz {
font-size: 12px;
}
.bar {
color: red;
}
.baz {
color: blue;
}
演算
追ってまとめたいと思います。
ありがとうございました。