今回はSassの基本的な使い方について学んでいきましょう。
まず「Sassファイル」を作るのですが、基本的に拡張子を.scssにするだけです。
あとはファイルを開き、編集して保存すると、自動的にコンパイルされます。
atomであれば、保存と同時に common.min.css が生成されるでしょう。
scssファイルをコンパイルすると、通常のcssとして書き出されます。
この書き出されたcssをhtmlで読み込んで、反映させます。
上記の画面を見てください。
common.scssを編集し、保存しました。
すると、common.min.cssが同時生成されています。
なお、cssファイルを直接編集することは、まずありません。
変更を加える際は、必ずSassファイルを編集します。
cssを直接編集しても、次回Sassでコンパイルした時に、全て上書きされるためです。
作業が無駄になりますので、必ずSassだけを編集するようにしましょう。
では、具体的なSassの使い方をご説明していきます。
Sassは、普通にCSSを書くだけではありません。
プログラミング的な書き方が可能になります。
今回は、特徴的で頻繁に使う機能を、いくつかご紹介します。
入れ子
もっとも典型的な機能です。
cssを「入れ子」にできます。
一度書いたcssを何度も書く必要がありません。
下記のソースコードを確認してみてください。
common.scss
.sectionStyle1{
width:94%;
max-width:1024px;
margin-left:auto;
margin-right:auto;
.headerMain{
background:#000;
color:#fff;
padding:20px;
display:flex;
h1{
font-size:3em;
}
nav{
text-align:right;
a{
text-decoration: none;
color:#000;
display:inline-block;
margin-left:20px;
}
}
}
.contentMain{
background:#afafaf;
padding:20px;
&:hover{
background:#f5f5f5;
}
}
}
このように、入れ子構造でCSSを記述することができます。
入れ子で記述できると、何度も同じクラスを記述することもなくなります。
結果、よりスピード感を持って、CSSを書くことができるのです。
また「.contentMain」の中にある要素をみてください。
「&:hover」という記述が確認できるでしょうか。
これは「&プレースホルダ」と言い「親要素と繋げて書く」時に使います。
今回の場合であれば.contentMain:hoverと同じ意味になります。
.contentMain:hoverにカーソルを当てると背景色がグレーになります。
今までであれば、.contentMain:hoverと、別途、記述する必要がありました。
2度 .contentMain を書く必要が無いので記述がスムーズです。
この記述をコンパイルすると、下記のようなCSSになります。
common.min.css
.sectionStyle1{width:94%;max-width:1024px;margin-left:auto;margin-right:auto}.sectionStyle1 .headerMain{background:#000;color:#fff;padding:20px;display:flex}.sectionStyle1 .headerMain h1{font-size:3em}.sectionStyle1 .headerMain nav{text-align:right}.sectionStyle1 .headerMain nav a{text-decoration:none;color:#000;display:inline-block;margin-left:20px}.sectionStyle1 .contentMain{background:#afafaf;padding:20px}.sectionStyle1 .contentMain:hover{background:#f5f5f5}
一列になっているのは、無駄にファイルサイズを食わないためです。
このように自動的に綺麗なcssが出来上がります。
入れ子機能は、Sassにおいても特徴的な機能です。
mixin
もう1つ象徴的な機能としてmixinがあります。
mixinは、あらかじめCSSのテンプレートを作っておくイメージです。
このmixinを適応させると「一度CSSで作ったデザイン」を使いまわせます。
また、引数を指定することで、部分的なカスタマイズも可能です。
実際にやってみましょう。
common.scss
@mixin boxStyle($fontColor,$borderColor){
font-size:1.2em;
line-height:1.5em;
margin-left:auto;
margin-right:auto;
width:94%;
max-width:1024px;
padding:30px;
box-sizing: border-box;
//以下の箇所に引数を指定しています。
border:1px solid $borderColor;
color:$fontColor;
}
.sectionStyle1{
//#000が$fontColor、#afafafが$borderColor
@include boxStyle(#000,#afafaf);
}
最初にboxStyleでfontColorとborderColorを指定しています。
これを引数と言い、実際に使う時に、値を指定することができます。
引数の命名自体は、自由に決めることが可能です。
ちなみに引数はmixinのborderとcolorに指定されています。
次にsectionStyle1を見てください。
実際に使う時に @includeでboxStyleを呼び出していますね。
そこで#000と#afafafというカラーを指定しています。
左がfontColorで右がborderColorに対応しています。
このように一定の形をあらかじめテンプレ化できます。
Sassにおける特徴的な便利機能と言えるでしょう。
では、このscssをコンパイルするとどうなるでしょうか。
common.min.css
.sectionStyle1{font-size:1.2em;line-height:1.5em;margin-left:auto;margin-right:auto;width:94%;max-width:1024px;padding:30px;box-sizing:border-box;border:1px solid #afafaf;color:#000}
このように、CSSとして書き出されています。
一定のデザインを使い回しできるので、開発が非常に楽になります。
管理の面から見ても、スムーズに管理することができます。
もし共通で複数箇所のデザインを変更することになったらどうでしょう。
例えば、今回作ったmixinでフォントのカラーを全体的に変えたい時です。
mixinを変えれば全ての共通デザインの箇所が変更できますよね。
1箇所ずつ色を指定していたら、都度全て変更する必要があります。
例えば、全ての色をmixinで統一して管理するとどうでしょう。
背景色が赤、フォントカラーが白、ボタンは黒といったイメージです。
もし全体的に色を変えたい時もmixinをいじれば、一気に変更できますよね。
色のパターン何パターンか見せて欲しい、といった時もすぐ対応できます。
extend
1つ書いたCSSを、あとで使いまわしたい時があります。
今までは、丸ごと前に書いたCSSをコピーしてくる必要がありました。
extendを使えば、他で書いたCSSを丸ごと引用できます。
それも、たった1行で。
common.scss
.btnStyleBase{
display:inline-block;
width:94%;
max-width:300px;
padding:20px;
text-align:center;
background:#000;
border-radius: 5px;
}
.btnStyle1{
@extend .btnStyleBase;
background:#cb292e;
}
こちらでは、まずボタンの共通デザインをCSSで作っています。
btnStyleBaseが全てのボタンの共通デザインとします。
次に.btnStyle1で共通デザインを呼び出します。
この時、ボタンの色を赤に変えています。
一度書いたCSSを丸ごとコピーなんてする必要はありません。
CSSでコンパイルすると、下記のようになります。
common.min.css
.btnStyleBase,.btnStyle1{display:inline-block;width:94%;max-width:300px;padding:20px;text-align:center;background:#000;border-radius:5px}.btnStyle1{background:#cb292e}
extendもよく使う記法ですので、練習してみてください。
使い所を考えながら使う必要があります。
@import
importで他のファイルを読み込めます。
これはSassだけではなく、CSSでもできることですね。
いくつかのSassファイルを1つのファイルでコンパイルできます。
common.scss
@import "basedesign.scss";
@import "bluedesign.scss";
上記をコンパイルすると、2つのcssが1つのファイルに合体してコンパイルされます。
1番目がベースのデザインを構築するファイル。
2番目がベースのデザインを青に色付けするファイル。
今回は、このように分けてみました。
以上のファイルのコンパイル結果が次の記述です。
common.min.css
.mainCont{width:1024px}.mainCont .innerCont{width:924px}.mainCont{background:#3d56ea}
このように、組み合わせ次第で、すぐテンプレートの色を変えたりできます。
Sassは、とにかく実践で使って練習しましょう。
CSSと同じように、頭で理解しただけでは意味がありません。
何度も繰り返し、実践で使うから、使い方もわかってきます。
まだSassには様々な使い方がありますが、今回は、ここまでを使いこなせるように練習してみましょう。
次回は、さらに細かいSassの記法について、ご紹介していきます。
より、プログラミングライクな記述ができるようになります。