はじめに
絶賛HTMLとCSSを復習中！
今回は Saasという言語を学び始めたのでアウトプットします
Saasとは
公式サイト
Saasとは「Syntactically Awesome StyleSheet」の略で
Syntactically（文法的に）
Awesome（最高・素晴らしい）
StyleSheet（スタイルシート）
という言語です。
公式抜粋
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
略
Sassは、世界で最も成熟した、安定した、強力なプロフェッショナルグレードのCSS拡張言語です。
めちゃくちゃ凄そう！
自分なりに簡単にまとめてみると・・・
CSSをより便利に記述できるようにしたもので、cssでいっぱい記述するよりも完結に記述ができ、関数を設定してコードを再利用したりできます。
しかし、ブラウザ上ではSaasは読み込む事は出来ません。
そのため必ずSaasからCSSに変換してブラウザー上に反映させます。
変数
CSSの場合、
style.css
#container {
color: white;
}
.btn {
color: white;
}
CSSでは変数は定義出来ないがSaasの中では定義する事ができます。
共通の数値や色の指定などに便利だと思います。
style.scss
//色を定義
$cWhite: white;
#container {
color: $cWhite;
}
.btn {
background-color: $cWhite;
}
ネスト
入れ子という言葉はrailsでよく使いました。
CSSでは1つのブロックの中に他のブロックを含める事は出来ませんが、Saasの中では異なるブロックを含める事ができます。
本来のCSSの記述
style.css
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
Saasの場合
style.scss
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
上記のように、Sassではネストで書くことができ、コードの可読性が向上します。
終わり
もっともっと良いメリットがあると思いますが、これから学習していきます！
↧