SASSを理解しよう！

SASSとは？から始めます！

SASSとは

・CSSを拡張したもので、デザイナーやプログラマーがCSSに対していだいていた不満などが解消されるよう作られたスタイルシート
・CSSのメタ言語（メタ言語とはある言語に別のルールを定義するために使われる言語。）

SASSの特徴

入れ子の使用が可能
変数を利用できる
四則演算が可能
関数を使用できる
ミックスイン・継承による効率化

多分、何言ってるかわからないと思うので実践的に後で、説明致します。

SASSのインストール

先ほどの特徴を説明

入れ子構造ができる。ネストとは？

親要素の中に子要素を入れることができるため、
直感的にHTML的な書き方をすることができる。

div{
	height: auto;
	h2{
	}
	h3{
	}
}

div h2{}というな書き方をしなくてよい。

&を使用して親要素を取得

&で親要素を取得できる。
状態変数を取得できる。
'''
div{
&_btn{
&:hover{
　　}
}
'''

四則演算

グローバル変数とローカル変数を使用することができる。

（例）
$width はローカル変数
$a はグローバル変数

$a = 30 
div {
 $width: 200px;
 width: $width ? 2+ 5 * $a  
}

ミックスイン

ミックスインは@mixin, と@includeの2つで構成されています。
@mixin で定義して、@include で呼び出すが基本です

@mixin box001 {
    padding: 20px;
    margin-top: 30px;
    background-color: #ededed;
}
 
/*定義したミックスインを呼び出し*/
.sample-box {
    @include box001;
}

引数を使うこともできる。

引数を@mixin の（）内に入れて、呼び出すときに（）内に引数を入れる

/*引数を使ったミックスインの定義*/
@mixin box002($value) {
    border: solid 2px #666;
    border-radius: $value;
}

@includで呼び出す

.sample-box {
    @include box002(10px);
}
.test-box {
    @include box002(7px 5px);
}

引数の初期値も設定できる。

/*引数に初期値を設定*/
@mixin box002($value: 10px) {
    border: solid 2px #666;
    border-radius: $value;
}

複数の引数を指定する

カンマでくぎることができる

/*引数を複数設定*/
@mixin box003($padding: 10px, $margin: 30px) {
    padding: $padding;
    margin: $margin;
}

基礎はここまでです。
特にSassは奥が深いので、これからも更新しています。

ご愛読ありがとうございました。
何か気づきや質問があれば、コメントお願いします。
新しい情報を取得するたび、更新していきます。

良ければ、LGTM、ストックよろしくお願いいたします！