【自分用学習メモ・備忘録】Sass

###Sassを使うと…

• CSSより記述量を減らせる（拡張子.scss）
• コードを再利用できる

☆入れ子構造（同じセレクタを何度も書かなくて良い！）

.header{
　width: 100%; 
　
  ul{
　　padding: 10px;
　}
}

☆&記号
li{
　font-size: 15px;
　&:hover{
　　background-color: red;
　}
}

☆li:hover → &:hoverに書き換えられる（同じ扱い）
:activeなどにも同じように利用可能
☆特定要素の指定も&記号で記述できる（e.g. li.second → &.second）

変数
$変数名 :値;　で定義できる。
文字色や文字サイズなどを定義して、値に変数名を記述すると繰り返し使えて変更も簡単。
※利用する箇所より前で定義する！

mixin
@mixin mixin名{コード}で定義できる。
複数のコードをまとめて呼び出せる。
@include mixin名;　で呼び出せる！

引数

☆mixinの引数 
@mixin font-data($color){
　font-size: 14px;
　color: $color;
}
.card{
　@include font-data(#ff0000);
}
☆includeごとに値指定できる。

関数

• color: darken(色, 50%); 色を暗くする関数
• color: lighten(色, 50%); 色を明るくする関数
• color: rgba(色, 0.5); 色の透明度を指定する関数

import （ファイル読み込み）
読み込み先のファイルの先頭には　「_」アンダーバーをつける
ファイルを読み込むには　@import"ファイル名"
と記述する（アンダーバーと拡張子.scssを省略できる）

☆mixinやimportを組み合わせて効率よくコードを書くとよし！