【CSS】コーディングが超絶早くなる！Sass（SCSS）を使ってみよう！基礎編
【CSS】コーディングが超絶早くなる！Sass（SCSS）を使ってみよう！基礎編
「便利らしいのは知っているけど、導入に踏み切れずにいる」
「最初の準備が大変そうで面倒」
そんな理由でSassを使うのをためらっている方もいるのではないでしょうか。
けれど、実際のところSassを利用すれば、コーディングやCSSの管理の効率はかなり良くなります。
そこで今回は、基礎編、導入編、実践編の3回に分けて、Sassの魅力と簡単な導入方法についてご紹介します。
基礎編
１.Sassとは
CSSを効率的にコーディングできるように、ネストや変数などの拡張機能を持たせたメタ言語です。コンパイルをすることで通常のCSSとして生成されます。
Sassは、HAMLという文法で記述するSASSと、よりCSSライクに再実装したSCSSという文法の２種類があります。ここでは、CSSの文法とほとんど変わらない形で記述することができるSCSSを用いて解説していきます。
SCSSは、CSSを使ってきた人にとっては非常に扱いやすい言語。互換性があるので、実はそのままCSSの文法で記述をしても問題はなく、安心して使えます。
それでは、Sassを導入するメリットとは何でしょうか。
具体的に見ていきましょう。
2.Sassのここがイイ！
a.変数が使える
$を付けることで変数として扱うことができます。
例えば、
/*SCSS*/
$mgn:0 auto 0 auto;
$red:#ff0000;
p{
margin : $mgn;
color: $red;
}
/*コンパイル後のCSS*/
p{
margin: 0 auto 0 auto;
color:#ffffff;
}
変数を使うことで、何度も同じコードを書く必要がなくなります。カラーコードなどの値を覚えなくてもいい点も便利。
さらに、以下のように計算もしてくれます。
/*SCSS*/
$mgn10: 10px;
p{
margin:$mgn10 + 10px;
}
/*コンパイル後のCSS*/
p{
margin:20px;
}
b.ネストできる
入れ子構造にできるので、記述がスッキリとして各部分ごとに管理がしやすくなります
/*SCSS*/
header{
width:960px;
h1{
font-size:20px;
img{
float:left;
}
}
}
/*コンパイル後のCSS*/
header{
width:960px;
}
header h1{
font-size:20px;
}
header img{
float:left;
}
c.親セレクタを参照できる
「&」というセレクタを使うことによって、ブロックの親セレクタを参照することができます。
/*scss*/
.btn{
background-color:orange;
&:hover{
background-color:yellow;
}
}
/*コンパイル後のCSS*/
.btn{
background-color:orange;
}
.btn:hover{
background-color:yellow;
}
d.セレクタを継承できる
@extendを利用することによって、一度使用したセレクタの内容を別セレクタでそのまま使えます。
/*scss*/
.box{
width:400px
border:#000000 1px solid;
}
.box02{
@extend .box;
background-color:#fffff;
}
/*コンパイル後のCSS*/
.box,.box02{
width:400px
border:#000000 1px solid;
}
.box02{
background-color:#fffff;
}
e.Mixinを使える
Mixinは、スタイル定義し、呼び出すことができるテクニックです。
例えば、いろんな場面で使用することの多いclearfixをMixinを用いて定義します。
/*SCSS*/
@mixin clearfix {
zoom: 1;
&:before, &:after {
display: table;
content: “”;
}
&:after {
clear: both;
}
}
header {
@include clearfix;
}
/*コンパイル後のCSS*/
header{
zoom: 1;
}
header:before, header:after {
display: block;
height: 0;
visibility: hidden;
content: “\0020”;
}
header:after {
clear: both;
}
一度定義してしまえば、後は@includeとするだけで何度でも簡単に呼び出すことができます。たった１行で書けるなら、HTML側にclearfixクラスを付けなくても、CSSだけでスタイルを管理できますね。
f.@importでファイル管理も効率化
@importを使うと、複数のファイルに分けて記述したSCSSを一つのSCSSファイルに統合することができます。common.scssやheader.scssなど、分割してスタイルの管理ができ、CSSの可読性が高まり、修正や追加がしやくすくなるというメリットがあります。
CSSでも@importという書き方はありますが、これは複数のファイルをブラウザで読み込むため、そのファイル分のHTTPリクエストが発生し、ページの表示が遅くなってしまうという問題がありました。
一方、SCSSの@importは、コンパイル後のCSSにインポートしたCSSがそのまま挿入されるため、１ファイルの読み込みで済み、パフォーマンスの問題が解消されます。
SCSSの使い方
@importするファイルを「_（アンダーバー）」から始まるファイル名にして保存します。メインのファイルに読み込むときは、アンダーバーと拡張子は省略できます。
例：
統合先のメインファイル：style.scss
@importするファイル：_header.scss、_product.scss
/*scss （style.scss）*/
@import “header”;
@import “product”;
※アンダーバーを付けることで、importするためのファイルとして認識されます。これにより、単独のCSSとして不必要にコンパイルされることがなくなります。つまりコンパイル後生成されるcssは、style.cssのみで、header.css、product.cssはstyle.cssの内部に展開されるだけで、個別にファイルが生成されることはありません。
以上、Sassの基本的なメリットをご紹介しました。
CSSに慣れ親しんだ人にとってはSassが難しいものではなく、とても便利で記述も楽ということが分かっていただけたのではないかと思います。次回は、Sassを実際に導入するための簡単なステップについてご紹介します。
ぜひ参考にしてみてください。