良いプログラマーの口癖は「めんどくさい」という話しを聞きました。
効率よく仕事をサクサクっと終わらせて、仕事を終えたい人がプログラマーに向いているのでしょうか。
最近コーディングを効率的に早く終わらせる方法はないかと思いまして、色々と悩んだ結果SASSを復習しようと決めました。
今更感は否めないですが、便利なのに使ってない記法が色々ありました。
sassを使いこなすことで、メンテナンス性も上がりますし、コーディングの効率もあがります。
「sassって聞いたことも使ったこともない！」
って方でも分かりやすくsassを解説していきます。
目次
sassを使ってCSSを効率よくコーディングしよう！
sassとは
CSSを効率的に書くことができ、保守性も向上させることのできる技術です。
スゲエCSSといったところでしょうか。
CSSってなに？って方は今回のblogは必要ないのでこちらの記事がおすすめです。
sassの導入法
弊社スタッフが以前ブログにしていましたので、是非参考にしてみて下さい。
▶Gulpでsassのコンパイルを自動化！快適な作業環境を整えよう！
sass記法を覚えよう
sassのいいところは、多くのCSSの不満点が解消されているという点にあります。
javascriptやphpなどと同じように、引数や変数を使用することができるんです。
かなりプログラミング言語っぽくかける点が嬉しいですね。
ネストが使える
<nav>
<ul>
<li>hoge</li>
<li>hoge</li>
</ul>
</nav>
このようなhtmlにcssをあてたいと場合。
nav{
background: #FFFFFF;
}
nav ul{
text-align: center;
padding: 0 15px;
}
nav ul li{
list-style: none;
display: inline-block;
}
Cこのように、要素をしっかりと指定してあげる必要があります。
sassですと、ネスト（入れ子）にして書くことができるため、もっと見やすく分かりやすくなります。
nav{
background: #FFFFFF;
ul{
text-align: center;
padding: 0 15px;
li{
list-style: none;
display: inline-block;
}
}
}
このような感じでnavの下に下にといった感じで階層を意識してCSSを書くことができます。
親要素を＆で省略して書くことができる
sassでは親要素を&で省略して表す事ができます。
.hogehoge{...}
.hogehoge:hover{...}
といったスタイルを書きたい時、sassですと
a{
font-color:red;
&:hover{
font-color:white;
}
↓コンパイル後
a{
font-color:red;
}
a:hover{
font-color:white;
}
といった書き方が可能です。
クラス名が長くなればなるほど楽になりますね。
sassでBEMを効率よく書ける
&を使ってBEMを効率的に書くことも可能です。
.block{
...
&__element{
...
}
&--modefier{
...
}
}
変数
ホームページのデザインで使用される色数というのはそれほど多くありません。
メインカラーが決まったら、それを何度もなんども使いまわすこととなります。
ホームページ制作がある程度完成した時に、「やっぱりリンクの色全部変えたい」なんて言われた場合。
CSSでは一つ一つ探して変更していくしかありません。
※エディターの機能で一括で変更しちゃうこともできますけど。
sassでは変数を活用することができるため、そういった手間もかけることなく一瞬で変更させることができるんです。
$defalt_fontsize:1.5rem;
$background_color:#aa332f;
.main{
font-size:$defalt_fontsize;
background-color:$background_color;
}
↓コンパイル後
.main{
font-size:1.5rem;
background-color:#aa332f;
}
上記のような記載ができるようになります。
変数を定義すれば、自由に呼び出すことができるため、使いまわしそうなものは全て変数にしてしまうとサイト構築がはかどります。
mixin/includeでスタイルを使いまわそう
変数は数値を使いまわせるだけでしたが、mixinでスタイルを一括で指定してしまい、includeで使いまわすなんてことも可能です。
@mixin defaltfont{
font-size:1.5rem;
color:red;
}
p{
@include defaltfont;
background-color:blue;
}
↓コンパイル後
p{
font-size:1.5rem;
color:red;
background-color:blue;
}
引数も使える。
mixinを使用する場合、引数を使うことも出来ます。
よく使うであろう場面だと下記のようなコード。
@mixin border-radius($r) {
border-radius: $r;
-webkit-border-radius: $r;
-moz-border-radius: $r;
-ms-border-radius: $r;
-o-border-radius: $r;
}
.button {
@include border-radius(5px);
}
includeする際に数値を指定することができます。
ベンダープレフィックスをまとめておくと良いですね。
for文
最近の案件でよく使うのがこのfor文
@for $i from 1 through 3 {
.slider-img-#{$i} {...}
}
↓コンパイル後
.slider-img-1 {
...
}
.slider-img-2{
...
}
.slider-img-3 {
...
}
このように指定した数字文ループしてくれます。
each文
@each $str test,test2,test3{
.#{str}-box{
...
}
↓コンパイル後
.test-box{
...
}
.test2-box{
...
}
.test3-box{
...
}
指定した名前に対して一括でスタイルを指定することができます。
phpなどのeach文がそのままCSSでも使用できるイメージでしょうか。
今年はSassから逃げない
いかがでしょうか。
まだまだ沢山機能がありますが、今回は私がよく使う機能を厳選して紹介してみました。
Sassを覚える事で、今までよりもCSSがもっと便利、効率よく、保守性高く書くことができるようになります。
サイト規模が大きくなればなるほど、「Sassを導入してよかった」と感じる事でしょう。
今年は是非スゲエCSSことSassに挑戦してみてくださいね。
