こんにちは。
節分にみなさん巻寿司を食べられましたか？？
私は昨日結局、寄ったスーパーの巻寿司が売り切れてて食べられませんでした（ ; ; ）
わざわざ他のスーパーに行く気も起こらず・・・
でもやっぱり日本の文化ですし食べたかったなと少し後悔しています^^;
来年は必ず食べます！！笑
ま、それはさておきProgateでSassの勉強をしたのでその復習も兼ねてポイントだけ書いていこうと思いますー！
Sassとは
SassとはCSSのメタ語と呼ばれるもの。
Web制作の現場ではCSSをそのまま記述するのではなく、Sassのようなメタ語を使用することが当たり前みたいです！
HTMLから直接Sassファイルを読み込めないのでCSSファイルに変換して（コンパイル）して利用します。
主な機能
- 記述の簡略化ができる（セレクタを入れ子で記述できる）
- 記述量を減らせる
- 変数が使える（同じ値を使いまわせる）
- スタイルを使いまわせる
- 修正しやすい
などなど・・・
記法は２つあり、SASS記法とSCSS記法。
でも主流なのはSCSS記法。
ということで下記からSCSS記法について書いていきます！！＾＾
ネスト（入れ子）
上の画像のように.mainのなかにh1、pがあるという場合マトリョーシカのようにmainのなかに記述していけます！
親子関係も一目瞭然なので整理しやすそうですね＾＾
&:hover &:active $.セレクタ名
&:hover &:active
ホバー時やボタンを押している間のCSSを記述するとき普通だと
.クラス名:hover{}
.クラス名:active{}
と記述しますよね。
これを「&」を使って下記のように記述できます。
&:hover{}
&:active{}
$.セレクタ名
特定の要素の記述方法としてlistの中にtxtというクラスがある場合、
普通は
li.txt{
color: #2828;
}
などと記述しますが
Sassでは
&.txt{
color: #2828;
}
と記述できます＾＾
まとめ
今日はSassについて勉強したことのアウトプットでした。
明日も引き続きアウトプットしていきます！
今日はここまで〜〜
コメント