【今日の学び】
・Sass
HTMLに文字の色や大きさ、枠をつけるなどいろいろな装飾ができるCSSというものがあります。
今回は、そのCSSをさらに使いやすくしたSassを紹介します。
Sassは「Syntactically Awsome StyleSheet」との略です。
Sassには2種類の記法があります。
1. Sass記法
div2. Scss記法
background-color: blue
margin: 0 auto
p
padding: 0 0 0 10px
span
font-size: 5em
div {Sassのメリット
background-color: blue;
margin: 0 auto;
p {
padding: 0 0 0 10px;
span {
font-size: 5em;
}
}
}
- ネスト(入れ子)が使えるので構造が把握しやすい
- 変数が使える
- 四則演算ができる
- @mixinでコードを引用、@extendでスタイルを継承することができる