SASS

sassはcssが長すぎるときに使用される文法で、プログラミング言語のようにcssを書くことができます.
プログラミング言語ではsassは変数,関数,繰返し文,演算子などを用いてcssを簡潔に表すことができる.

設定

端末に以下のコマンドを入力してインストールする
yarn add node-sass
cssは単純でノガダ性の原始造形言語であるため,cssに代わるsassを用いた.
node-sassライブラリsassを使用して作成されたスタイルは、cssにコンパイルする役割を果たします.

作成

cssファイルを作成するようにsassはファイル名です.scssという名前のファイルを作成すればいいです.

(Detail.scss 파일)

.red {
  color : #ff0000;
}

SASS構文

1.変数の使用

変数はsassで使用できます.

(Detail.scss 파일)

.red {
  color : red;
}

上記のコード変数は以下のように変更できます.

(Detail.scss 파일)
$메인색상 : #ff0000;
.red {
  color : $메인색상;
}

$変数名:入力する値;
これにより、変数を作成し、必要な場所で変数を使用できます.
色だけでなく、px、%なども使えます.

2. @import

@importは実際にはcss構文ですが、sassはファイル間でインポートすることもできるので、理解してみましょう.
作成したcssを使用したいjsファイルなどでは、以下の内容を使用できます.
@import './どうしよう.css';
ページ全体に共通のスタイルがある場合は、単独で削除して、@importを必要に応じて使用するだけで便利です.

3. nesting

cssを記述する際には、以下に示すように、長くて複雑なコレクタを使用する必要がある場合があります.

div.container h4 {
  color : blue;
}
div.container p {
  color : green;
}

nesting構文を使用すると、以下のようにより可読に記述でき、関連クラスの管理が容易になります.

div.container {
  h4 {
    color : blue;
  }
  p {
    color : green;
  }
}

4. extends

次のスタイルがあるとします.

(Detail.scss 파일)

.my-alert {
  background : #eeeeee;
  padding : 15px;
  border-radius : 5px;
  max-width : 500px;
  width : 100%;
  margin : auto;
}
.my-alert p {
  margin-bottom : 0;
}

小さな灰色のヒントウィンドウが表示されます.
また、同じスタイル、背景色の異なるスタイルが複数必要な場合は、どうすればいいですか?

(Detail.scss 파일)

.my-alert {
  background : #eeeeee;
  padding : 15px;
  border-radius : 5px;
  max-width : 500px;
  width : 100%;
  margin : auto;
}

.my-alert2 {
  background : #yellow;
  padding : 15px;
  border-radius : 5px;
  max-width : 500px;
  width : 100%;
  margin : auto;
}

背景色以外に、別のスタイルをコピーして貼り付ける必要がありますか?
@extendを使用すると、手動でコピーを貼り付けることなくスタイルをインポートできます.

(Detail.scss 파일)

.my-alert {
  background : #eeeeee;
  padding : 15px;
  border-radius : 5px;
  max-width : 500px;
  width : 100%;
  margin : auto;
}
.my-alert2 {
  @extend .my-alert;
  background : yellow;
}

.my-alert p {
  margin-bottom : 0;
}

.my-alter 2 my-alterで@extends背景以外のスタイル.
すなわち,@extendsを用いることでコード再利用を簡略化できる.

@mixin/@include

mixinは関数を作成する構文で、includeは関数を使用する構文です.

function 함수(){
}

jsに示すようにmixinを使用して関数を作成できます.

(Detail.scss 파일)

@mixin 함수() {
  background : #eeeeee;
  padding : 15px;
  border-radius : 5px;
  max-width : 500px;
  width : 100%;
  margin : auto;
}
.my-alert {
  @include 함수()
}

.my-alert p {
  margin-bottom : 0;
}

関数というmixinを作成し、my-alterに関数を含めます.
作成した関数を使用するには、関数名の前に@includeを記述するだけです.
リファレンス
JavaScript構文とは異なり、scssは下で使用するには関数名を宣言する必要があります.