sass_3-7 sassの@import
sassは分割したscssを一つのcssファイルとして書き出す事が出来る。
ファイルを分割するには「_」から始まる名前にする必要がある。
また、そういった部分的なファイルをpartial と呼ぶらしい。
// _ を省略してインポート @import "module.scss"; // _ と 拡張子を省略してインポート @import "module"; // 一階層上からインポート @import "../module.scss"; // commonフォルダからインポート @import "common/module";
メインのscssに読み込むには上のように書いていく。
接頭辞や拡張子を省略して書くことが出来る。
また、違う階層から読み込む場合は、下のように書く。
// 一階層上からインポート @import "../module.scss"; // commonフォルダからインポート @import "common/module";
こんな使い方も出来るみたい。
sass
.oldArea { @import "old"; } p { margin-bottom: 1.5em; }
書き出したCSSはこうなる。
.oldArea .item { margin: 10px; } .oldArea p { margin: 0 0 10px; } p { margin-bottom: 1.5em; }
_old.scssにmarginが指定されていたので、元々のものと合わさってこうなる感じ。
@importはどこに記述してもいいらしい。
最初でも最後でも可能。
分割して、一つのCSSにまとめる事によって管理もしやすく、読み込みも早くなる。
参考
【Sassで解決】CSSの@importはどれだけ悪影響なのか自分で試してみる | Developers.IO
【Sassを覚えよう!Vol.7】ファイルを分割して管理を楽に(partialについて) - CSS HappyLife
sass_3-6 演算
sassの演算について勉強した。
こんな風に書くことが出来る。
article { width: 560px - 14px; padding: 7px; }
実際に書きだすとこうなる。
article { width: 546px; padding: 7px; }
マイナスした分の値が引かれているのが分かる。
下のように色々と足したり引いたり出来る。
// 足し算 .example01 { width: 500px + 8; } // 掛け算 .example02 { width: 500px * 8; } // 割り算 .example03 { width: (500px / 8); }
結果、こうなる。
.example01 { width: 508px; } .example02 { width: 4000px; } .example03 { width: 62.5px; }
足し算は足し算でも、こんな風に足すことも出来る。
article { width: 300px + 5cm; }
結果、こうなる。
article { width: 488.97638px; }
cmという単位で足せるのに驚いた。
実際使う機会あるのかと思うけど。
変数と一緒に使ったりもできる。
$main_width: 560px; article { width: $main_width - 7 * 2; padding: 0 7px; } $main_width: 560px; article { $padding: 7px; width: $main_width - $padding * 2; padding: 0 $padding; }
2つあるけれど、結果は同じ。
article { width: 546px; padding: 0 7px; }
色を指定するときにも活躍したりする。
a { color: #000 + #111; } $font_color: #333; a.sample01:hover { // 変数 + rgb() 関数 color: $font_color + rgb(51,51,51); } a.sample02:hover { // キーワード + 変数 color: blue + $font_color; } a.sample03:hover { // 変数 - 数値 color: $font_color - 3; } a.sample04:hover { // rgb() 関数 - 数値 color: rgb(255,255,255) - 10; }
結果はこうなる。
a { color: #111111; } a.sample01:hover { color: #666666; } a.sample02:hover { color: #3333ff; } a.sample03:hover { color: #303030; } a.sample04:hover { color: whitesmoke; }
参考
sass_3-5 変数
sassは変数を作ることができる。
変数を宣言したsass
// 赤色の変数を宣言 $red: #cf2d3a; .notes { color: $red; } .notesBox { border: 3px double $red; }
書きだしたCSS
.notes { color: #cf2d3a; } .notesBox { padding: 20px; border: 3px double #cf2d3a; }
こんな感じで、自由に変数を作ることが出来る。
何度も使いそうな値は変数を作っておくと良さそう。
こんなふうにも使える。
変数を宣言したsass
section { $value: 30px; margin-top: $value; margin-bottom: $value; } .item { $value: 15px; padding: $value; p { margin-bottom: $value; } }
書きだしたCSS
section { margin-top: 30px; margin-bottom: 30px; } .item { padding: 15px; } .item p { margin-bottom: 15px; }
これは普通に想像がつくけれど、セレクタの名前やパスも入れれたりする。
$セレクタ名: '.pickupContentsArea, section.main'; $IMG_PATH: '../img/bg/'; $セレクタ名 { background: url($IMG_PATHpickup.png); }
参考
sass_3-4 コメントアウト
sass_3-3 プロパティのネスト
プロパティをネストした。
CSSとsassの比較
.sample { border-top: 5px solid #ccc; border-bottom-width: 3px; border-bottom-style: dotted; border-bottom-color: black; } .sample_other { text-shadow: 1px 1px 0 #fff; text-align: right; z-index: 5; } .item { margin: 0; margin-left: 10px; border: 5px solid #cccccc; border-bottom: 0;
CSSで書くとこうなるが、sassで書くとこうなる。
.sample { border: { top: 5px solid #ccc; bottom: { width: 3px; style: dotted; color: black; } } } .sample_other { text: { shadow: 1px 1px 0 #fff; align: right; } z: { index: 5; } } .item { margin: 0 { left: 10px; } border: 5px solid #ccc { bottom: 0; } }
こんな感じで書けるんだろうとは思っていたけれど、実際見てみたら、一回は見ておかないと書けないなと思う部分があった。
z-indexはこんな風に書くのか。
書き方が分かれば、まとまりがはっきりしてるから分かりやすい気がするな。
参考
sass_3-2 親セレクタの参照 &
親セレクタを参照する場合の記述をやった。
CSSとsassとの比較
#side { width: 240px; } body.top #side { width: 300px; } #side ul.bnr { margin-bottom: 10px; } a { text-decoration: none; } a:hover { text-decoration: underline; } ul.pageNav li { margin: 0; width: 50%; } ul.pageNav li.prev { float: left; } ul.pageNav li.next { float: right; }
CSSで書くとこうなるけれど、sassで親セレクタを参照するとこうなる。
#side { width: 240px; body.top & { width: 300px; } ul.bnr { margin-bottom: 10px; } } a { text-decoration: none; &:hover { text-decoration: underline; } } ul.pageNav { li { margin: 0; width: 50%; &.prev { float: left; } &.next { float: right; } } }
所々についている&が親セレクタに成り代わっているんですね。
参考
sass_3-1-3 @media のネスト
@mediaを使う場合の記述を学んだ。
CSSとsassの比較。
#main { float: left; width: 640px; } @media screen and (max-width: 640px) { #main { float: none; width: auto; } }
CSSで書くとこうなるけれど、sassで書くとこうなる。
#main { float: left; width: 640px; @media screen and (max-width: 640px) { float: none; width: auto; } }
今回もネストする事で短くなって、分かりやすい。
@mediaで#mainを囲うよりよっぽど分かりやすい。#mainのことだとひと目で分かる。
@medeiaはこれから使っていかなくてはならないので、今日やれて良かった。
参考