p.105
通常、CSSを書いていると、widthの値からpaddingの値を引くといった計算が必要になる。
Sassでは、こういった面倒な計算をしてくれる"演算"という機能がある。
演算は、"+(プラス)"や"-(ハイフン)"など、電卓などでおなじみの一般的に広く使われている記号を使うだけで、コンパイル後に計算結果を返してくれる。
いわゆる、四則演算ができる！
Sass
//引き算
article {
width: 560px - 14px;
padding: 7px;
}
// 足し算
.example01 {
width: 500px + 8;
}
// 掛け算
.example02 {
width: 500px * 8;
}
// 割り算
.example03 {
width: (500px / 8);
}
CSS(コンパイル後)
article {
width: 546px;
padding: 7px;
}
.example01 {
width: 508px;
}
.example02 {
width: 4000px;
}
.example03 {
width: 62.5px;
}
例えば、左右のpaddingの値を引きたい場合、"-(ハイフン)"を使うとできる。
他も同じような書き方で演算できる。
単位は、つけなくても、元の単位から計算してくれる。
掛け算と割り算に関しては、逆に単位をつけると計算式が成り立たなくなるのでつけない。
割り算の場合は、fontプロパティの指定などでも"/(スラッシュ)"を使うため、演算子として機能させるために、"()(丸括弧)"で囲う必要がある。
単位を省略すると、元の単位に合わせて計算してくれるが、別々の単位を指定しても、CSSとして出力可能なもの、計算可能なものに関しては演算ができる。
別々の単位で計算したいケースはほとんどないが、"px + em"や"pt + cm"などは計算不可能。
p.107
Sassは、機能を併用して使うことが可能なため、変数に対しても演算を利用することができる。
Sass
$main_width: 560px;
article {
width: $main_width - 7 * 2;
padding: 0 7px;
}
CSS(コンパイル後)
article {
width: 546px;
padding: 0 7px;
}
演算は変数同士での計算も可能なので、paddingの値も変数として宣言すればこのようにも書ける。
Sass
$main_width: 560px;
article {
$padding: 7px;
width: $main_width - $padding * 2;
padding: 0 $padding;
}
このように書くことで、paddingの値が変わったときにwidthの値も自動的に変わり、修正の手間を省くことができる。
p.107
Sassの演算機能を使って、色を演算することもできる。
主に、":hover"疑似クラスなどに使うことができる。
Sass
a {
color: #000 + #111;
}
CSS(コンパイル後)
a {
color: #111111;
}
色の演算は、RとGとBの3つの値に対して計算が行われる。
コンパイル後は基本的に6桁の16進数になる。
Sass
$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;
}
CSS(コンパイル後)
a.sample01:hover {
color: #666666;
}
a.sample02:hover {
color: #3333ff;
}
a.sample03:hover {
color: #303030;
}
a.sample04:hover {
color: whitesmoke;
}
"rgb(51,51,51)"は、16進数に変換すると"#333333"になるために、コンパイル後は"#666666"になる。
色をキーワードで指定した場合、16進数に変換してから演算されるので、"blue"の場合は"#00f"に変換されてから変数の値"#333"が足される。この際、RGB値それぞれの上限は"ff"になり、それを超えた場合は計算されず"ff"として丸められるので、"ff"に対して足しても"ff"のままになる。逆に、"-(ハイフン)"を使って"00"以下になる場合も、色の指定でマイナス値は使えないため、"00"のままになる。
なお、数値を使って演算を行った場合は、R、G、Bそれぞれの値に対して演算が行われる。変数や演算を通して計算された結果が、キーワードに該当する場合、コンパイル後はキーワードに変換される。
p.109
各演算子の注意点や条件など
足し算(+)
テキストを統合するためにも使うことができる。
Sass
p:after {
content: "今日は、" + 寒いです。;
font-family: sans- + "serif";
}
CSS(コンパイル後)
p:after {
content: "今日は、寒いです。";
font-family: sans-serif;
}
引き算(-)
-5pxなどのマイナス値と区別するために-(ハイフン)の前後に必ず半角スペースを入れる。
足し算や掛け算では、半角スペースがなくてもえらにはならないが、記述を統一したほうが良いので、他も半角スペースを空けるようにすると良い。
掛け算(*)
掛け算は余り気にする点はないが色を演算した際に上限値を超えた計算はされないので、色の演算をする際には注意が必要。
割り算(/)
割り算に関しては、演算処理をさせるために、次の条件のうち、いずれか1つを満たさなければならない。
1.値に変数が使われている場合
2.値を()(丸括弧)で囲っている場合
3.他の演算子(+, -, *)と一緒に使用されている場合
この条件を満たした場合の例
Sass
.division01 {
$value: 50px;
width: $value / 2;
}
.division02 {
width: (50px / 2);
}
.division03 {
width: 50px - 50 / 2;
}
コンパイル後のwidthの値は、すべて25pxになる。
演算は、単純計算の場合なら暗算したほうが早いことも多く、意外と使いどころが少ないが、制御構文で条件分岐や繰り返し処理などの機能と組み合わせることでより効果を発揮する。
p.111
SassではCSSで使える@importの他に、Sass独自の@import機能がある。
基本的な@importの書き方はCSSと同じだが、条件によってSassの@importかCSSの@importかが決まる。CSSのときも、CSSファイルを分割して読み込み用のimport.cssのようなCSSファイルから、各CSSファイルを読み込んで管理するといった使い方もあるが、Sass独自の@importとパーシャルという機能を組み合わせることで複数のSassファイルを1つのCSSにしてくれるなど、便利な機能がいくつかある。
CSSでの@import規則は、外部のCSSファイルをインポート(読み込む)するのに使う。
外部のCSSファイルをインポートするには、次のいずれかの書き方で書く必要がある。
CSS
@import url("main.css");
@import url(main.css);
@import "main.css";
@import 'main.css';
/* メディアタイプの指定が有る場合 */
@import "main.css" projection, tv;
宣言の後の;(セミコロン)は、宣言が1つの場合もしくは、最後は省略が可能だが、@importでは必ず最後の;(セミコロン)も記述する必要がある。
パスの指定は、インポート元のCSSファイルが基準になるので、同じディレクトリ内の場合は、ファイル名だけ書けば問題ない。ほかに、/(スラッシュ)から始まるルートパスの指定や、http://から始まる絶対パスでの指定が可能。
また、CSSの@importは、CSSファイル内のルールセットより先(@charsetの直後、ない場合は先頭)に記述する必要があるが、Sassの場合は、ルールセットより後に書いても、コンパイル後のCSSでは先頭に記述してくれる。
Sassでは、このCSSの仕様に沿っている場合、CSSファイルとして認識されインポートされる。
Sassファイルも、CSSと同じようにインポートすることができる。
Sass
@import url("main.scss");
@import url(main.scss);
@import "main.scss";
@import 'main.scss';
基本的には、CSSの@importと同じなので、問題になることはないが、次の場合、エラーもしくは、エラーは出ないもののおかしな結果になってしまう。
・Sassの@importでメディアタイプを指定してしまうと、CSSファイルとしてインポートされてしまう。この際、エラーは出ないが、CSSファイル内でSassファイルをインポートしても、ブラウザでは認識されないため意味がなくなってしまう。
・パスやファイル名の指定を間違えたりして、Sassファイルが存在しないとエラーになってしまう。
・ファイルが存在していても、http://から始まる絶対パス指定の場合、CSSファイルとしてインポートされてしまう。前述の通りエラーは出ない。
CSSでは、インポートした場合、当然インポート先のファイルを読み込むが、Sassの場合は、インポートしたSassファイル内に展開されるため、1つのCSSファイルとして生成される。この時、インポートしたSassファイルもCSSファイルとしてコンパイルされてしまうので、読み込んでいないCSSファイルが存在することになってしまう。多くの場合、インポートしたSassファイルのCSSファイルは必要ないため、SassではCSSファイルを生成しないことが可能。
p.113
インポートしたSassファイルなど、特定のSassファイルをCSSファイルとして生成したくない場合は、Sassファイルのファイル名の最初に_(アンダースコア)をつけることで、コンパイルしてもCSSファイルが生成されなくなる。
この機能のことをパーシャル(partial)という。
_(アンダースコア)から始まるパーシャルファイルをインポートするには、前述した方法でも問題ないが、_(アンダースコア)を省略してもインポートできる。また、拡張子(scss)も省略することが可能。なお、パーシャルファイルでなくとも、Sassファイルであれば同様に拡張子は省略できる。
実際のファイル名が"_module.scss"だった場合、次のように書くことができる。
Sass
// _ を省略してインポート
@import "module.scss";
// _ と 拡張子を省略してインポート
@import "module";
_(アンダースコア)を省略すると、通常のSassファイルとパーシャルとの区別がつかなくなってしまうので、省略する場合は注意する。
p.114
CSSで複数のCSSファイルをインポートする場合はその都度@importを指定する必要があるが、Sassではインポートしたいファイルが複数ある場合、,(カンマ)で区切って複数指定することができる。
Sass
@import "default","module","btn";
このように、一度に複数のSassファイルをインポートすると、どのSassファイルをインポートしているかがぱっと見でわかりにくくなってしまう可能性もあるので、無理に1行にまとめず、CSSのときと同様に1ファイル1行といった形でそれぞれ別に書いても良い。
p.114
Sassの@importは、次のようにルールセット内でも使うことが可能。
Sass
.section {
@import "style";
}
この機能は、例えばサイトをリニューアルしたいけれど、古いCSSファイルも部分的に流用したい場合などに使うことができる。
まずは、旧サイトのCSSファイルを"_old"にリネームして、拡張子も"css"から"scss"に変更する。
Sass(_old.scss)
.item {
margin: 10px;
}
p {
margin: 0 0 10px;
}
そして、リニューアル後のサイトで、"_old.scss"をインポートした場合は、
Sass(style.scss)
@import "old";
p {
margin-bottom: 1.5em;
}
コンパイルすると、
CSS(コンパイル後)
.item {
margin: 10px;
}
p {
margin: 0 0 10px;
}
p {
margin-bottom: 1.5em;
}
このように同じセレクタ(この場合はp要素)が複数存在してしまうと、スタイルがバッティングしてしまう。そこで、バッティングを防ぐために、".oldArea"というルールセットの中で、古いCSSファイルをインポートする。
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;
}
これで、古いCSSファイルのルールセットすべてに".oldArea"という親のセレクタを加えることができるので、古いCSSファイルをそのまま使うことが可能になる。
あとは、HTML側にclassやidなどを追加すれば良い。@importのネストを使えば複数のルールセットをまとめてインポートすることも可能だが、@extendやミックスインを使うことでより柔軟にスタイルを継承したり使い回したりすることが可能になる。
