2021/10/28までのKindleのキャンペーンでSassの教科書が1000円ちょっとで購入できたので読んでみて、まず基本情報部分を自分なりにまとめて見ました！
Sassとは？
cssを拡張したメタ言語
メタ言語とは、ある言語によるプログラムをより効率的にするために用いられる言語のこと
つまり、Sassはcssをよりパワーアップさせた言語
Sassは何の略？
Syntactically Awesome StyleSheet
日本語だと、構文的にイケてるスタイルシート という意味になる
Sassはどうやって生まれた？
ハンプトン・カトリン（Hampton Catrin）とネイサン・ワイゼンバウム（Nathan Weizenbaum）が2006年にHaml(ハムル)というhtmlをより簡潔に記述できる言語と一緒に開発した。
書き方は？
大きくふたつあり、SASS記法とSCSS記法がある
SASS記法
最初に作られた記法
拡張子は.sass
cssで記述する波括弧({})をインデントで表したり、最後のセミコロン(；)を省略できたりする
通常のcssとの互換性はないため、従来のcssの記述の仕方はできない
SASS記法
Sass3.0というバージョンの時に作られた記法
拡張子は.scss
Sassy CSS（イケてるCSS）の略
通常のcssと互換性があるため、従来のcssの記述でもOK
具体例
例えば以下のようなcssは
div {
padding: 0;
display: none;
}
div p {
margin-top: 3.5rem;
}SASS記法だと
div
padding: 0;
display: none;
p
margin-top: 3.5rem;SCSS記法だと
div {
padding: 0;
display: none;
p {
margin-top: 3.5rem;
}
}になる
ブラウザ表示までどんな流れか？
上記の2記法で作成したファイルの拡張子はそのままではブラウザは認識してくれないため、大きな流れとしては以下のような順番でブラウザ表示される
- Sassファイル(.sass か.scssの拡張子のファイル)を作成する
- 1をcssファイルとしてコンパイルする
- 2で生成したcssファイルをブラウザが読み込む
Sassの特徴は？
以下のような特徴がある
記述の簡略化ができる
同じ値を変数的に使い回すことができる
一度使用したセレクタを使い回せる
条件分岐やループなどプログラム的な処理ができる
（細かくは別記事で解説予定）
読んでいただきありがとうございました！
コメント