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を組み合わせて効率よくコードを書くとよし！