- Web制作ネタ帳
writer / たいよー
Dart Sass (scss) 【よく使う機能・書き方まとめ】
今年ももうすぐ終わりですね。
フロントエンドエンジニアのたいよーです。
いきなりですが、最近のコーディング業務では「Dart Sass (scss)」を使うことが当たり前となってきました。
今回はそんな「Dart Sass (scss)」のよく使う機能・書き方について、使用頻度のレベルに分けて厳選してみました。
自分自身のメモ代わりになればいいなと思っていますが、「Dart Sass (scss)」を利用してコーディングする方やこれから勉強しようと思ってる方の参考になれば幸いです。
使用レベル：★★★
■ 変数（Variables）
変数（variable）は、データ（値）を一時的に記憶しておくための仕組みで、任意の名前を付けておき、必要に応じてデータ（値）を呼び出すことができます。
Sassの変数は $ から始まる変数名にコロン（ : ）で区切って値を指定します。
カラーコードなど一括で管理したい値などは基本的に変数するのがベターですね。
SCSS
$white01: #ffffff; /* 変数の宣言（ 変数名 : 値 ; ） */
#main {
background: $white01; /* 変数の使用 */
}
CSS
#main {
background: #ffffff;
}
■ @mixinと@include ミックスイン
ミックスインはよく利用するCSSのスタイルを定義しておいて、別の場所でそのスタイルを使い回せるようにする機能です。
CSSでは、一度定義したスタイルの再利用は難しいですが、Sassではミックスインを使うことでスタイルの再利用が可能になります。
また、ミックスインでは引数を取ることができるので、より柔軟な使い回しが可能になります。
よく使うスタイルなどはミックスインで使い回すと管理的に便利になります。
・ミックスインの定義
SCSS
/* 変数の宣言 */
$transition01: .2s;
$opacity: .7;
/* ミックスインの定義 */
@mixin hover01 {
transition: opacity $transition01;
&:hover {
opacity: $opacity;
}
}
.link {
/* 定義したミックスインの呼び出し */
@include hover01; /* ここにコードが展開される */
}
CSS
.link {
-webkit-transition: opacity 0.2s;
transition: opacity 0.2s;
}
.link:hover {
opacity: 0.7;
}
・引数を使ったミックスイン
SCSS
$black01: #000000;
@mixin border($color, $width, $radius) {
border: {
color: $color;
width: $width;
radius: $radius;
}
}
p {
@include border($black01, 1px, 3px);
}
CSS
p {
border-color: #000000;
border-width: 1px;
border-radius: 3px;
}
■ @mixin、@contentを利用したメディアクエリ（ブレークポイント）
@contentはルールセットやスタイルなどのコンテンツ（記述した内容）をミックスインに渡す機能です。
@mixinと組み合わせてメディアクエリ（ブレークポイント）を簡易的に記述できます。
SCSS
$breakpoints: (
"sp": "screen and (max-width: 599px)",
"tab": "screen and (max-width: 1023px)",
"pc-tab": "screen and (min-width: 600px)",
"pc-only": "screen and (min-width: 1024px)",
"tab-only": "screen and (min-width: 600px) and (max-width: 1023px)",
) !default;
@mixin media($breakpoint: sp) {
@media #{map-get($breakpoints, $breakpoint)} {
@content;
}
}
.item {
width: 20%;
@include media(tab) {
width: 50%;
}
@include media(sp) {
width: 100%;
}
}
CSS
.item {
width: 20%;
}
@media screen and (max-width: 1023px) {
.item {
width: 50%;
}
}
@media screen and (max-width: 599px) {
.item {
width: 100%;
}
}
■ @extend セレクタ
@extendは既存のスタイルを継承して新たなスタイルを作成する機能です。
また継承したスタイルを上書きすることもできるので、特定のスタイルのみ変更することも可能です。
懸念点として、コンパイルしたcssのソースが読みづらくなったり、大量のセレクタが生成されてしまう可能性があるので、プレースホルダーやミックスインを使用した方が良い場合もあります。
SCSS
/* 基底のクラス */
.box {
margin: 20px 0;
padding: 10px;
border: 1px solid #000000;
}
/* 基底のクラスを拡張して新たなクラスを作成 */
.box--primary {
@extend .box; /* .box のスタイルを全て継承 */
border-color: #0000ff; /* スタイルを追加したり特定のスタイルを上書き */
background: #CDEBF8;
}
.box--error {
@extend .box;
border-color: #ff0000;
background-color: #F8D0D1;
}
CSS
.box, .box--error, .box--primary {
margin: 20px 0;
padding: 10px;
border: 1px solid #000000;
}
.box--primary {
border-color: #0000ff;
background: #CDEBF8;
}
.box--error {
border-color: #ff0000;
background-color: #F8D0D1;
}
使用レベル：★★☆
■ % プレースホルダーセレクタ
@extendを使ってスタイルを定義すると、コンパイル後のCSSには継承元のセレクタも生成されます。
@extendのためだけに宣言する場合など継承元のセレクタが不要な場合は、%をセレクタ名の先頭に付けることでそのセレクタを生成させないことができます。
SCSS
/* セレクタ名を % で始める */
%box {
margin: 20px 0;
padding: 10px;
border: 1px solid #000000;
}
.box--primary {
@extend %box; /* %box を継承 */
border-color: #0000ff;
background-color: #CDEBF8;
}
.box--error {
@extend %box; /* %box を継承 */
border-color: #ff0000;
background-color: #F8D0D1;
}
CSS
.box--error, .box--primary {
margin: 20px 0;
padding: 10px;
border: 1px solid #000000;
}
.box--primary {
border-color: #0000ff;
background-color: #CDEBF8;
}
.box--error {
border-color: #ff0000;
background-color: #F8D0D1;
}
■ 変数と親セレクタの参照(&)を利用したクラス
ネストしている親セレクタを(&)で参照し、変数してクラス名を指定することができます。
長いクラス名などを変数化しておくと記述が楽になります。
SCSS
.l-header {
$header: &; /* 親セレクタを参照し、変数に */
&__wrap {
#{$header}__title {
font-size: 1.6rem;
font-weight: bold;
}
}
&__read {
@extend #{$header}__title;
font-size: 1.4rem;
}
}
CSS
.l-header__wrap .l-header__title, .l-header__wrap .l-header__read {
font-size: 1.6rem;
font-weight: bold;
}
.l-header__read {
font-size: 1.4rem;
}
使用レベル：★☆☆
■ @each リストやマップの繰り返し処理
@eachを使用すると、リストの各要素やマップの各ペアを順番に処理することができます。
ユーティリティクラスを作成する際などに重宝します。
・リスト
SCSS
/* リストの変数 */
$display-group: block, inline-block, inline, none;
@each $value in $display-group {
.display--#{$value} {
display: $value !important;
}
}
CSS
.display--block {
display: block !important;
}
.display--inline-block {
display: inline-block !important;
}
.display--inline {
display: inline !important;
}
.display--none {
display: none !important;
}
・マップ
SCSS
/* マップの変数 */
$utility-color: (
white01: #ffffff,
black01: #000000,
red01: #ff0000,
blue01: #0000ff,
);
@each $class, $value in $utility-color {
.text--#{$class} {
color: $value !important;
}
}
CSS
.text--white01 {
color: #ffffff !important;
}
.text--black01 {
color: #000000 !important;
}
.text--red01 {
color: #ff0000 !important;
}
.text--blue01 {
color: #0000ff !important;
}
■ @for を使った繰り返し処理
@forは、あらかじめ指定された回数だけ繰り返し処理を実行します。
繰り返しの処理は、from で指定した「開始の番号」から through または to で指定した「終了の番号」まで値を１ずつ増やし（または減らし）ながら行われます。
途中の各番号は、指定された変数名に割り当てられます。
こちらもユーティリティクラスを作成する際によく利用します。
SCSS
@for $i from 1 through 5 {
.margin-top--#{$i * 5} {
margin-top: 5px * $i;
}
}
CSS
.margin-top--5 {
margin-top: 5px;
}
.margin-top--10 {
margin-top: 10px;
}
.margin-top--15 {
margin-top: 15px;
}
.margin-top--20 {
margin-top: 20px;
}
.margin-top--25 {
margin-top: 25px;
}
■ @function 自作関数の定義
@functionを使って、独自の関数を定義することができます。
独自の関数を定義するには @function で関数の宣言をし、関数名を指定して引数を設定し、@return を使って戻り値を返します。
規則性のあるスタイルを指定する際に使用することがしばしば。
SCSS
/* 関数 double() の定義 */
@function double($value) {
@return $value * 2;
}
.hoge {
width: double(200px) ; /* 関数 double() の呼び出し */
}
CSS
.hoge {
width: 400px;
}
まとめ
いかがだったでしょうか？
今回は厳選して紹介しましたが、その他にも多くの機能があり、よりシステム的に記述することも可能です。
まだまだ奥の深い「Dart Sass (scss)」ですが、深掘りした内容はまたどこかの機会でご紹介できればと思います。
それでは皆さん、良いコーディングライフを！
参考ページ：SASS (scss) の基本的な使い方
