Sass備忘録

勉強しながらメモしたことをそのまま記述しています。

・Sassには2通りの書き方がある
SASS記法サス
SCSS記法
Progateではこっちを使う

Sassのメリット
CSSより記述量を減らせる
コードを再利用できる

入れ子構造
同じセレクタをいちいち書かなくてよくなる

・&記号
&:hover{
マウスが乗った時の処理を書ける
}

・変数の定義
$progate-color: #26546a;
変数は、使うところより前の部分に書かないと使えない
スコープ外は使えない

・mixin

いくつかのコードを1つにまとめて複数個所で簡単に呼び出すことができる

@mixin lesson-card{
width: 300px;
padding: 40px;
}

呼び出しは、includeを使う
@include lesson-card;

mixinには引数を指定できる
@mixin font-data($color)
{
font-size: 14px;
color: $color;
}

・関数
暗くする
darken(色、50%)
明るくする
lighten(色、50%)
色の不透明度を指定する
rgba(色、0.5

・import
読み込み元のファイル名の先頭に_をつける
_colors.scss

読み込み先で以下のようにする
@import "_colors.scss"
以下のように省略できる
@import "colors"