Sassの基本まとめ

はじめに*********
プログラミング勉強中のものです。
いろいろまとめています
お気づきの点があれば、ご指摘ください。

Sassとは？

Sassはcssをより便利に効率的に書くための記法
sassとscssの２種類あり、一般的にはscssが主流

Sassを使うメリット

1.コードの記述量が減る
2.複数のCSSファイルを1つにまとめることができる
3.同じ値を使い回すことができる

1.コードの記述量が減る

たとえば下記htmlファイルのcssを指定したい時

hoge.html

<div class="header">
 <p>hogehoge</p>
</div>

cssだとheaderを２回書く必要がある
子要素が増えていくと書くのが大変だが。。

hoge.css

.header{
 width:100%
 }
.header p{
 color:#fafafa;
}

scssだと同じセレクタなら記述の省略が可能

css:hoge.scss
.header{
  width:100%
 p{ 
  color:#fafafa;
  }
}

また、入れ子構造内で「＆」を使えばhoverやactiveも使用可能

hoge.scss

.header{
  width:100%
 p{
  color:#fafafa;
  &:hover{
  color:red;
  }
}

2.複数のCSSファイルを1つにまとめることができる

scssにはファイルを分割するバーシャルという機能があり、分割したファイルを１つに統合することも可能

バーシャルファイルは"_（アンダーバー）ファイル名"で作成可
バーシャルファイルの読み込みは　＠immport "ファイル名";

3.変数の定義やスタイルの定義(@mixin)ができる

$変数名: 値; で変数名を指定して、他のファイルで使用することも可

_variable.scss

 $main-color:#fafafa;

hoge.scss

 h1{
 background-color:$main-color;
}

@mixin を使えばスタイルの指定し、複数箇所で簡単に呼び出すことも可能

例えばcssだと同じコードを何回も書く必要があるので、少しめんどくさい

hoge.css

.hoge1{
 width:200px;
 height:100px;
}
.hoge2{
 width:200px;
 height:100px;
}

これに@mixinを省略できる。修正の時も＠mixin部分だけ修正すればOK

hoge.scss

@mixin hoge{
 width:200px;
 height:100px;
}
.hoge1{
 @include hoge;
}
.hoge2{
 @include hoge;
}

ちなみに引数の指定も可能
hoge1とhoge2で違う色の指定ができる

hoge.scss

@mixin hoge（$color){
 width:200px;
 height:100px;
 color:$color;
}
.hoge1{
 @include hoge(#fafafa);
}
.hoge2{
 @include hoge(red);
}