scssに関して「なんとなくの部分」を文書化して知識整理
※自分用なので@mixinとか@extendは省いています
文字コードの指定
コメントを日本語で記述する場合があるのでscssファイルを作成する際には先頭に文字コードを記述
※scssファイルに日本語を使用していない場合、文字コードが省略された形でcssファイルにビルドされる
@charset "UTF-8"
コメントアウト
scssファイル内に記述できるコメントアウトに関して下記を参照
// => 1行コメント(ビルド後に削除される)
/* ~ */ => 通常コメント(ビルド後もコメントとして残る)
/*! ~ */ => 圧縮したcssファイルにもコメントとして残したい際に使用する
親要素を参照する
scssでは「&」を使用して親要素を参照できる
//scss
.test {
color: red;
a & {
color: blue;
}
}
//css
.test {
color: red;
}
a .test {
color: blue;
}
//scss
button {
&.red {
}
&.blue {
}
&.green {
}
}
//css
button {
}
button.red {
}
button.blue {
}
button.green {
}
//scss
a {
color: red;
&:hover {
color: blue;
}
}
//css
a {
color: red;
}
a:hover {
color: blue;
}
変数定義に関して
変数の定義方法は下記
$変数名: 値;
リスト型の変数定義
下記のような変数定義も可能
// 複数の値を指定
$base_padding: 8px 16px 4px;
// fontの指定
$font_gothic: "Hiragino kaku Gothic ProN", Meiryo;
$font_mincho: "Hiragino Mincho ProN", "MS PMincho";
変数定義の際の注意点
scssの変数定義に関して下記の2つは同じものとして扱われる
$font-color: red;
$font_color: red;
要するに-と_が同じ文字として認識されてしまう
変数に文字列を格納する場合
変数に文字列を格納する場合
// 引用符で囲まない場合 => ビルド後は、testという文字列で出力される
$a: test;
// 引用符で囲んだ場合 => ビルド後は、"test"という文字列で出力される
$b: "test";
// 下記の場合は / などが入っているため引用符で囲まないとエラーになる
$c: "http://test.com/"
インターポレーションについて
以下の場合においてインターポレーションによる記述が必要
- 変数の前後に続けて文字列を記述
- 変数に定義した値の引用符を削除して出力したい場合
インターポレーションの記述は下記
#{ 変数 }
下記のサンプル用に変数を使用したい場合は引用符を削除して出力しないともろもろエラーになるのでインターポレーションを使用する
$path: "../img/icon/";
.test_1 {
background-image: url(#{path}box.png)
}
.test_2 {
background-image: url(#{path}book.png)
}
.test_3 {
background-image: url(#{path}flag.png)
}
scssとメディアクエリー
メディアクエリーの記述方法
scssでも下記のように記述可能
// cssと共通
@media only screen and (min-width: 780px) {
}
メディアクエリーのネスト
scssではメディアクエリーのネストも簡単
// scss
body {
background-color: red;
@media only screen and (min-width: 780px) {
background-color: blue;
}
}
// css
body {
background-color: red;
}
@media only screen and (min-width: 780px) {
body {
background-color: blue;
}
}
変数とメディアクエリー
下記のように記述することも可能
※インターポレーションを使用することを忘れない
// 変数定義
$s: "only screen and (max-width: 400px)";
$m: "only screen and (min-width: 401px)";
@media #{$s} {
body {
background-color: red;
}
}
@media #{$m} {
body {
background-color: blue;
}
}
scssのインポート機能
scssは@importを使用することでscssファイルのインポートが可能になる
※scssのインポート機能を使用してインポートする場合、cssファイルは1つに結合されて出力される
// インポートの記述
@import "ファイル名"; => ファイルに関しては相対パスで記述する
補足
scssのインポート機能を利用する場合、拡張子.scssは省略してもOK
パーシャルファイル
パーシャルファイルとは、自動的にcssに変換されないファイルのこと
※パーシャルファイルはファイル名の先頭に_を使用する
// ファイル名
_test.scss
補足
scssではパーシャルファイルを読み込む際には_をつけなくても読み込まれるが基本的には省略しないで記述するのがベター
mapの利用(Sass3.3から追加された機能)
mapとはkeyとvalueのペアを定義できる機能
呼び出しは下記のようにする
// map-get()を使用
map-get($map, $key)
下記のように記述することが可能
//scss
$map: (
key1: 10px,
key2: 20px,
);
.map {
margin: map-get($map, key1);
}
//css
.map {
margin: 10px;
}
その他の使い方に関して下記のページを参考にさせていただいた
http://qiita.com/manabuyasuda/items/ae42db5604cd723fb3cd
http://qiita.com/manabuyasuda/items/caa823d3644cf3672d05
scssでフォントを読み込む際のテクニック
下記のページを参考にさせていただたいた
http://qiita.com/Yama-to/items/324a691c7989c4185275