BLOG
WEB制作の際、コーディングを効率よく行うためにSCSS記述について学習しましたので
SCSSの基本的な記述方法について紹介していきます。
SCSSを使用することで、ネスト（入れ子構造）や変数を使用することができますので、
通常のcssを使用するよりも格段にコーディングが効率的に進めることができます。
またソースコードの可読性・メンテナンス性が優れています。
SCSSでは様々な記述ができますが今回は基本的な記述について紹介します。
入れ子構造(ネスト)です。
入れ子構造は、親要素の中の要素を入れ子にして記述することができます。
サンプルコードをご覧いただくとわかりやすいかと思います。
<div class="parent">
<p>入れ子構造</p>
</div>.parent{
background-color: gray;
p{
color: red;
}
}上記のように記述するとこのように反映されます。
.parent {
background-color: gray;
}
.parent p {
color: red;
}SCSSでは変数の使用ができます。
色の指定やブレイクポイントの指定など変数を定義することができます。
// 変数宣言の仕方
// $変数名: 値;
$maincolor : gray;
$width : 80%;
.test{
background-color: $maincolor;
width: $width;
padding: 1rem;
margin: 1rem auto;
}上記のように記述するとこのように反映されます。
.test {
background-color: gray;
width: 80%;
padding: 1rem;
margin: 1rem auto;
}& を使用することで『擬似クラス』『疑似要素』『複数指定』ができます。
擬似クラスではhover時などのスタイルの記述が可能です。
.ampersand{
&:hover{ //擬似クラス
opacity: .8;
}
}上記のように記述するとこのように反映されます。
.ampersand:hover {
opacity: 0.8;
}疑似要素ではafter要素やbefore要素などの記述ができます。
.ampersand{
&::before{ //疑似要素
content: "『";
color: #23cb99;
}
&::after{ //疑似要素
content: "』";
color: #23cb99;
}
}上記のように記述するとこのように反映されます。
.ampersand::before {
content: "『";
color: #23cb99;
}
.ampersand::after {
content: "』";
color: #23cb99;
}複数指定は特定の複数のクラス名が指定されている要素にのみスタイルが反映されます。
今回の例では『.ampersand』『.multi』がつく要素にスタイルが反映されます。
.ampersand{
&.multi{ //複数指定
color: #23cb99;
}
}上記のように記述するとこのように反映されます。
.ampersand.multi {
color: #23cb99;
}メディアクエリでは、画面幅に応じてスタイルを変更することができます。
後ほど詳しくご説明しますがmixinを使用します。
// 下記でブレイクポイントの指定
$breakpoint-tablet: 640px; /* 変数宣言 */
$breakpoint-pc: 1024px; /* 変数宣言 */
// メディアクエリを定義
@mixin max-screen($break-point) { /* 関数を定義(640px以上) */
@media screen and (min-width: $break-point) {
@content;
}
}
@mixin max-screen($break-point) { /* 関数を定義(1024px以上) */
@media screen and (min-width: $break-point) {
@content;
}
}
// メディアクエリを使用
div {
@include max-screen($breakpoint-tablet) { /* 640px以上のとき */
background: orange;
}
@include max-screen($breakpoint-pc) { /* 640px以上のとき */
background: red;
}
}上記のように記述するとこのように反映されます。
@media screen and (min-width: 640px) {
div {
background: orange;
}
}
@media screen and (min-width: 1024px) {
div {
background: red;
}
}for文では指定回数ループすることができます。
thoroughの値は含みます。
@for $i from 1 through 3 {
.box#{$i} { //文字列として$iを使用する場合は「$i」ではなく「#{$i}」にします
width: 20px * $i;
height: 20px * $i;
margin-bottom: 10px;
}
}上記のように記述するとこのように反映されます。
.box1 {
width: 20px;
height: 20px;
margin-bottom: 10px;
}
.box2 {
width: 40px;
height: 40px;
margin-bottom: 10px;
}
.box3 {
width: 60px;
height: 60px;
margin-bottom: 10px;
}while文ではfor文より複雑な処理が可能です。
$i: 100;
@while $i > 0 {
.width-#{$i} {width: 1% * $i;}
$i: $i - 25;
}上記のように記述するとこのように反映されます。
.width-100 {
width: 100%;
}
.width-75 {
width: 75%;
}
.width-50 {
width: 50%;
}
.width-25 {
width: 25%;
}each文ではリストをループすることができます。
@each $list in red,blue,green {
.color-#{$list}{
color: $list;
}
}上記のように記述するとこのように反映されます。
.color-red {
color: red;
}
.color-blue {
color: blue;
}
.color-green {
color: green;
}mixinは複数のスタイルを定義でき、引数を使用できます。
よく使用するスタイルはmixinを使用し関数にできますが、セレクタがグループ化されませんので、
コンパイル後のcssに同じようなコードが重複します。
引数を使用することでソースコード上の可読性・メンテナンス性が向上しますが、
引数を使用しない場合は後ほどご紹介するextendのほうが良い場合もあります。
mixinの引数は初期値の指定も可能です。初期値が不要な場合は($引数名)のみ記述します。
サンプルコードでは、引数の初期値を設定してます。
// mixinの使用方法
// @mixin 関数名($引数名:初期値){}
// @include 関数名で呼び出します。
@mixin border($color:#666) {
border-bottom: 1px solid $color;
}
.border{
h1{
@include border;
}
h2{
@include border(red);
}
}上記のように記述するとこのように反映されます。
.border h1 {
border-bottom: 1px solid #666;
}
.border h2 {
border-bottom: 1px solid red;
}定義しているスタイルを(入れ子も含め)継承します。
セレクタがグループ化されますので、コードの重複を避けることができますが、
場合によっては可読性が下がりますのでmixinとの使い分けが必要です。
.ex{
color: blue;
padding:10px;
}
.extend{
@extend .ex;
}
.extends{
@extend .ex;
}上記のように記述するとこのように反映されます。
.ex, .extends, .extend {
color: blue;
padding: 10px;
}継承のために定義したスタイル(.ex)もコンパイルされています。
定義したスタイルは使用しない場合はプレースホルダーを使用します。
プレースホルダーを使用することで継承のために定義したスタイルはコンパイルされなくなります。
『.ex』を『%ex』に書き換えるだけでコンパイルされません。
%ex{
color: blue;
padding:10px;
}
.extend{
@extend %ex;
}
.extends{
@extend %ex;
}
上記のように記述するとこのように反映されます。
.extends, .extend {
color: blue;
padding: 10px;
}このようにセレクターをグループ化することでスマートな記述が可能です。
mixinとextendでは定義して再活用するという点では同じようなものに感じますが、
extendはセレクタがグルーピングされてしまうという問題点があり、もちろん便利な場合もありますが、可読性において注意が必要です。
規則性のない要素同士のグルーピング化、また定義したスタイルと継承した要素が離れてしまうことでメンテナンスしづらく、わかりにくいものになってしまいます。
mixinに関しては引数を使用する場合と、規則性のない要素へのスタイルの定義をする際に使用することが望ましいのではないかと思います。
