【Sassの導入から使うまでの手順】
【Sassの導入手順】
- プラグインでSCSSをサクッと導入する
- ワンクリックでコンパイルする
- コンパイルされたCSSファイルの出力先を指定する
【SCSSの3つの導入方法】
- テキストエディタのプラグインを使う方法
- コンパイルアプリを使う方法
- コマンドを叩いてSCSSを使う方法
テキストエディタ（VScode）のプラグインを使う方法
人気の「Visual Studio Code（VScode）」のプラグインを使ったSCSS導入方法
SCSSでは「変数」が使える
◎ 以下のCSSコードの場合
.container {
border: 1px solid red;
.wrap {
background-color: red;
.main-text{
color: red;
}
.sub-text {
text-shadow: 1px 2px 3px red;
}
}
}
◎ SCSS変数を使うと以下のようになる。
$mainColor: red;
.container {
border: 1px solid $mainColor;
.wrap {
background-color: $mainColor;
.main-text{
color: $mainColor;
}
.sub-text {
text-shadow: 1px 2px 3px $mainColor;
}
}
}
◎ SCSSコード＠mixinで何度でも使える
SCSSではmixinでよく使うコードに名前をつけてまとめておき、別のところで何度でも使いまわせるありがたい機能のことです。
【mixinの使い方】
- 『@mixin 任意の名前』を指定した後に、まとめたいコードを定義する
- 呼び出したいところで「@include 任意の名前」と記述する
◎ 以下のCSSコードの場合
.container {
display: flex;
justify-content: center;
align-items: center;
background-color: red;
}
◎ SCSS変数を使うと以下のようになる。
@mixin flexCenter /* 任意の名前 */ {
display: flex;
justify-content: center;
align-items: center;
}
.container {
@include flexCenter;
background-color: red;
}
◎ mixinは「引数」を使うこともできる
◎ 以下のCSSコードの場合
.container {
display: flex;
justify-content: center;
align-items: center;
border: 2px solid black; /* ← 引数で指定した値が代入されています！ */
}
◎ SCSS変数を使うと以下のようになる。
@mixin flexCenter($bWeight, $bStyle, $bColor) {
display: flex;
justify-content: center;
align-items: center;
border: $dWeight $bStyle $bColor;
}
.container {
@include flexCenter（2px solid black); /* ←引数を指定 */
}
書き方は「@mixin 任意の名前（引数）」で定義し、
「@include 任意の名前（引数に代入する値）と書くだけでOK。
SCSS「継承」機能
他の要素に使った複数行のCSSコードを、たった1行で使い回すことが可能。
◎ 以下のCSSコードの場合
.main-text {
color: #333;
font-size: 20px;
font-weight: bold;
}
/* .main-textのコードを継承させます */
.sub-text {
color: #333;
font-size: 20px;
font-weight: bold;
padding: 10px;
}
◎ SCSS変数を使うと以下のようになる。
.main-text {
color: #333;
font-size: 20px;
font-weight: bold;
}
/* .main-textのコードを継承させます */
.sub-text {
@extend .main-text;
padding: 10px;
}
「@extend」を使えば、「class名」を記載するだけで
その要素に指定されたプロパティと値を継承することができる。
【継承の注意点】
- 使いすぎると可読性が悪くなる（いちいち確認しなきゃ中身がわからない）
- class名がわかりにくいとパニクる
パーシャルファイルを細かく作成する
パーシャルファイルを細かく作成することで、コードの可読性が高くなり、
メンテナンス性も高まるというメリットがあります。
_button.scss
_color.scss
_display.scss
_form.scss
_slider.scss
図のように下層ページや「header」「footer」などのパーツだけでなく、
「色」や「ボタン」、「フォーム」専用などのSCSSファイルを用意するイメージ
SCSSは「変数」などを使うので、「色専用のファイル」などがあると、格段にメンテナンスがしやすくなる。
CSSに出力する際はパーシャルファイルを全て「@import」で統合することもできます。
SCSSファイル名に「_（アンダースコア）」を付けることで、分割ファイルを統合させられる。
importで読み込む場合は、「@import」の後にアンダースコアと拡張子を除いた任意の名前を指定する形だ。
/* ファイルの統合イメージ */
@import
"header",
"footer",
"color"
SCSSで四則演算もできる
コーディング中に「1366pxを3カラムにしたいんだけど、1カラムは何pxだろう？」と思って、
計算機を叩いた経験はありませんか？
SCSSを使えば、答えを知らずに以下を実現可能です。
◎ HTMLコード
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
◎ 以下のCSSコードの場合
.container {
width: 1366px;
display: flex;
}
container .box {
width: 455.3333333333px;
}
◎ SCSSを使うと以下のようになる。
.container {
width: 1366px;
display: flex;
.box {
width: (1366px / 3);
}
}
SCSSで条件分岐・繰り返し処理など
SCSSでは「条件分岐（if文等）」や「繰り返し処理（for文等）」「関数」などの
プログラミングの処理を実行することもできます。
JavaScriptを使用せずに「画面のスクロール量によってスタイルを変更する」
「複数のclass名」や「擬似要素」などを使う場合は、「&（アンパサンド）」をつけて記載
◎ 以下のCSSコードの場合
/* CSSを以下のように出力する場合 */
.container {
position: relative;
}
/*擬似要素*/
.container::before {
content: "";
display: block;
width: 20px;
height: 2px;
background-color: red;
}
/*複数のclass名（HTML例：<〇〇 class="container box">*/
.container.box {
width: 20%;
}
/*擬似クラス*/
.container.box:nth-of-type(3) {
width: 40%;
}
/* 擬似クラスの連結 */
.container.box:nth-of-type(3):hover {
opacity: .2; transition: all .3s;
}
◎ SCSSを使うと以下のようになる。
/* 「&」をつければOK！ */
.container {
position: relative;
/* 擬似要素 */
&:before {
content: "";
display: block;
width: 20px;
height: 2px;
background-color: red;
}
/* 複数のclass名（HTML例：<〇〇 class="container box"> */
&.box {
width: 20%;
/* 擬似クラス */
&:nth-of-type(3) {
width: 40%;
/* 擬似クラスの連結 */
&:hover {
opacity: .2;
transition: all .3s;
}
}
}
}
変数は「$変数名: 値」で定義し、プロパティの値などに「$変数名」と記述することで、出力される
/* CSSのコンパイル結果 */
.main-text {color: blue; font-size: 15px;}
.main-text .base-text {color: white; content: "sample";}
/* SCSS */
/* 変数を定義（出力する場所より上に記述） */
$mainColor: blue;
$baseColor: white;
$mainFontSize: 15px;
$text: "sample";
.main-text {
color: $mainColor;
font-size: $mainFontSize;
.base-text {
color: $baseColor;
content: $text;
}
}
SASSの書き方
/* SCSS */
.container {
background-color: red;
div {
color: blue;
}
}
/* SASS */
.container
background-color: red
div
color: blue
「{}」と「;セミコロン」がないので記述量が減りますが、少し見にくいというのが本音ですね。
SASSを使うことは多くないですが、基本の書き方くらいは覚えておくと良いでしょう。
ちなみに、「:（コロン）」の後に「半角スペース」が必須です。
プロの制作者が使っている「Sassの小技集」
Sassでは、変数を使って簡単に色の透過指定ができます。
【 CSS 】
div {
background-color: rgba(247, 49, 0, .3);
}
【 SCSS 】
$mainColor: #f73100;
div {
background-color: rgba($mainColor, .3);
}
変数に「パス」を代入する小技
【 SCSS 】
$imgPassRoot: "../images";
div {
background-image: url("$imgPassRoot/kv.jpg");
}
コメントアウトをコンパイル後も残す
// コンパイルしたら、CSSファイルには残らないコメントアウトだよ
/* コンパイル後も、CSSファイルに残るコメントアウトだよ */
Sassはデフォルトで関数が用意されています。
カラーコードが分からなくても、彩度や明度を変更する関数など
もあるので、必要に応じて使ってみると良い
【Sassにデフォルトで用意されている関数一覧】
| ・round() | 数値の小数点以下を四捨五入 |
| ・ceil() | 数値の小数点以下を切り上げ |
| ・floor() | 数値の小数点以下を切り捨て |
| ・rgba() | RGBA形式に変換 |
| ・lighten() | 色の明度を上げる |
| ・darken() | 色の明度を下げる |
| ・saturate() | 色の彩度を上げる |
| ・desaturate() | 色の彩度を下げる |
| ・grayscale() | グレースケールに変換 |
| ・mix() | 2つの色の中間色の設定 |
| ・adjust-hue() | 色相環の角度を調整 |
▼コンパイル結果
/* テキストカラーの明度を下げる */
$main-color: red;
p {
color: #660000;
}
▼ 使用例
/* テキストカラーの明度を下げる */
$main-color: red;
p {
color: darken($main-color, 30%);
}