【Sassの導入から使うまでの手順】


【Sassの導入手順】

  1. プラグインでSCSSをサクッと導入する
  2. ワンクリックでコンパイルする
  3. コンパイルされたCSSファイルの出力先を指定する

【SCSSの3つの導入方法】

  1. テキストエディタのプラグインを使う方法
  2. コンパイルアプリを使う方法
  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の使い方】

  1. 『@mixin 任意の名前』を指定した後に、まとめたいコードを定義する
  2. 呼び出したいところで「@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名」を記載するだけで
その要素に指定されたプロパティと値を継承することができる。

【継承の注意点】

  1. 使いすぎると可読性が悪くなる(いちいち確認しなきゃ中身がわからない)
  2. 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%);
}

上記関数を組み合わせることで、文字や背景色のグラデーション、縞模様などを表現することも可能

タイヤ売るなら

高価買取ゲットへGo!