CSS
Tips
基本的なSCSSの書き方とmixinの入れ子
SCSSをはじめると今まで書いていたCSSが面倒になってきます。とはいえ、まだまだアレどうするんだっけ？と思う事も多いので覚え書きです。
参照元：
変数を使う
CSSで色を変更する時にひとつひとつ探して直す人は少ないと思いますが、webカラーを見ただけじゃどこで使った色か覚えていないし、罫線の色だとかアクセントカラーだとかまとめてセットして呼び出すにも便利です。
/*
変数で置き換える場合は
頭に$を付ける
*/
$color-bm1:#99cc33; /* all グリーン */
$color-bm2:#f16529; /* html レッド */
$color-bm3:#eeaa33; /* design オレンジ */
$color-bm4:#00aadd; /* jquery シアン */
$color-bm5:#0173c0; /* css ブルー */
$color-bm6:#7766aa; /* tips パープル */
/* 呼び出すときはそのまま */
/* SCSS */
button i{color:$color-bm1;}
a{border-top:$color-bm2 2px solid;}
/* CSS */
button i{color:#99cc33;}
a{border-top:#f16529 2px solid;}
mixinを使う
ミックスインは変数に対してもっと大きくまとめておける入れ物のようなものです。CSSでは同じ要素を使い回す時、沢山の class 名を , で繋いだり、セレクタがエラい事になったりしていましたが、clearfixだとかベンダープレフィックスが沢山入っちゃったりするヤツも楽に記述出来るようになります。
/*
ミックスインは
@mixinで指定して
*/
@mixin font($size,$weight){
font-size: $size;
font-family: 'Bree Serif', sans serif;
font-weight: $weight;
}
/* @includeで呼び出す */
/* SCSS */
h1{@include font(18px,400)}
/* CSS */
h1{
font-size: 18px;
font-family: 'Bree Serif', sans serif;
font-weight: 400;
}
ネスト=入れ子を使う
これの有る無しでソースの見易さが全然違います。CSSでもインデントでグループ分けしている人を見ますが、入れ子っぽく書くのと実際にネストするのでは書くスピードが大きく変わります。
/*
clearfixをネスト
&は親を継承している
*/
/* SCSS */
.clearfix {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
*zoom: 1;
}
/* CSS */
.clearfix {
*zoom: 1;
}
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
継承を使う
あまり使わないからすぐ忘れる...。継承は html で 1つのタグに複数の class を指定していたり , で繋いでまとめていた class を SCSS 内で、それぞれの場所から呼び出す事が出来ます。
/* 継承するプロパティを呼び出す */
/* SCSS */
.top-title{
font-size: 2.0rem;
position: relative;
padding:0 0 0.3em;
}
h1{
font-weight: 700;
@extend .top-title;
}
h2{
color: red;
@extend .top-title;
}
/* CSS */
.top-title, h1, h2 {
font-size: 2.0rem;
position: relative;
padding: 0 0 0.3em;
}
h1 {font-weight: 700;}
h2 {color: red;}
最後に
下は変数に入れたカテゴリカラーをそれぞれの class から mixin でまとめて呼び出しています。必ずしも書き出されるものが見易かったり、短かったりする訳ではありませんが、効率化はもちろん、自分なりの書き方に変えられるのもSCSSの魅力です。
/* SCSS */
$color-bm2:#f16529;/* html レッド */
$color-bm3:#eeaa33;/* design オレンジ */
@mixin lab-bracket($COLOR-LABO-MIXIN){
strong,i{color:$COLOR-LABO-MIXIN;}
.lab-link{div:after{border-top: $COLOR-LABO-MIXIN 2px solid;}}
.word-current{border-bottom: $COLOR-LABO-MIXIN 2px solid;}
}
.word-html{@include lab-bracket($color-bm2);}
.word-design{@include lab-bracket($color-bm3);}
/* CSS */
.word-html strong, .word-html i {
color: #f16529;
}
.word-html .lab-link div:after {
border-top: #f16529 2px solid;
}
.word-html .word-current {
border-bottom: #f16529 2px solid;
}
.word-design strong, .word-design i {
color: #eeaa33;
}
.word-design .lab-link div:after {
border-top: #eeaa33 2px solid;
}
.word-design .word-current {
border-bottom: #eeaa33 2px solid;
}