Reras-factory

ガジェットとかAppleとかいろいろ

初めての人のためのSCSS事始め

  • Web
  • 2020/04/4
Web

CSSの拡張メタ言語であるSCSSの簡単なチュートリアルです。

Sassとは

SassとはSyntactically Awesome Style Sheetsの略で『サス』と発音します。従来のCSS記法を拡張したものであり、より効率的なコーディングが可能になる拡張メタ言語です。既存のCSSファイルの拡張子を.sass/.scssに変えるだけで使用できます。少しややこしいですが、『Sass』規格の中に『SASS記法』と『SCSS記法』の2つが存在し、SASSとSCSSの違いは以下のとおりです。

Sassでできること

SASSは癖があるのでSCSSの方が簡単に触れて簡単です。この記事でもSCSSで書いていきます。
環境構築は省略するのでお使いのエディタに合わせて用意してください。

書いてみよう

では実際にSass記法でスタイルシートを書いてみましょう。

入れ子構造

以下のCSSを例にしてみます。

.link{
 background-color:#1e90ff;
 border-radius:5px;
 width:max-content;
}
.link > a{
 text-decoration:none;
 color:#fff;
}
.link > a:visited{
 color:#fff;
}

よくありそうなスタイルです。linkクラスの中にaタグがあり、リンクの下線を消した上で訪問済みでも色が変わらないようにしています。
これにScssの入れ子構造を適用すると以下のようになります

.link{
 background-color:#1e90ff;
 border-radius:5px;
 width:max-content;
 a{
  text-decoration:none;
  color:#fff;
 }
 a:visited{
  color:#fff;
 }
}

linkの中にあるaタグのスタイルはlinkの括弧の中にそのまま入れることができます。適切にインデントを付けると見やすくなりますが、入れ子を増やしすぎても閉じ括弧ばかりで見づらくなってしまうので規則を決めておくと良いでしょう。そして更にa:visitedをはじめとしたa::beforeやa::after、a:hoverなどの疑似要素は&を付けることで親タグの入れ子に加えることができるようになります。それを適用したのが以下です。

.link{
 background-color:#1e90ff;
 border-radius:5px;
 width:max-content;
 a{
  text-decoration:none;
  color:#fff;
  &:visited{
   color:#fff;
  }
 }
}

変数

Scssではjavascriptの様に変数を使用することが出来ます。例えば変数にメインカラーやテキストカラーなどを予め定義しておき、あとから一括で変えたい時は変数の値を変えるだけで変数で色指定している要素の色を全て変えることが出来ます。変数は以下の要領で使用します。

$text-color : #333;

body{
 color : $text-color;
}

変数には上記のような色コードだけでなく、数値や文字列も格納できます。

スタイル定義

Scssでは@mixinで定義したスタイルを@includeで呼び出すことが出来ます。例えばカードデザインの場合、最低限の共通スタイルを用意しておきコンポーネントごとに共通のスタイルを指定したあとで個別に色を変えていく。ということが可能になります。以下がサンプルです。

@mixin card-common{
 box-shadow:1px 1px 3px 3px #ccc;
 padding:5px;
 width:100%;
}
.card-light{
 @include card-common;
 background-color:#fff;
}
.card-dark{
 @include card-common;
 background-color:#1f1f1f;
}

ファイル分割

一般にCSSでは@importを使用した外部ファイルの読み込みは非推奨とされています。これは複数回HTTPリクエストが発生し余計な通信が起きる為で読み込み時間も長くなってしまうからです。しかし近年ではブロック毎やコンポーネント単位にまでスタイルシートファイルを分割して管理する方法が主流になりつつあります。その問題もScssを使えば解決できます。Scss内でいくら外部ファイルを読み込もうと、CSSにコンパイルする際に参照している外部ファイルの記述もまとめてくれるからです。

$main-color : #1159dc;
$text-color : #333;
$background-color : #cfcfcf;

header{
 background-color : $main-color;
}
main{
 background-color : $background-color;
 color : $text-color;
}

これらをそれぞれ記述した2つのファイルを用意し、ファイル名を『asset.scss』と『layout.scss』とします。次にまっさらな『style.scss』を作成して以下のように記述します。

@import 'asset';
@import 'layout';

『@import』でシングルクォートまたはダブルクォートで括った拡張子抜きのファイル名を指定します。このとき呼び出し元のファイルと呼び出し先のファイルは同じディレクトリにしてくださいね。

ファイル分割で注意すること

これを利用すると、各種定義を纏めたファイルとレイアウトファイルやコンポーネントスタイルを記述したファイルなどに分割でき非常に便利なのですが、importするときは順番に気をつけましょう。上の例だと読み込む順番を逆転させるとlayout.scssが未定義の$main-colorを呼び出した所でコンパイルエラーになります。

まとめ

以上の4点がScssで便利な主要機能です。その他にもいろいろあるので気になる方は調べてみてください。ファイル分割はFLOCSS等とも相性が良いので是非活用してくださいね！