【Sass】Sass ～ 入門編 ～

CSS/SCSS/SASS

■ はじめに

最近、フロントエンドを書いていて
Sass (サース / サス) について、あんまり勉強してなかったので
いい機会なので、勉強してみた

目次

【１】Sassとは
　特徴
【２】記法
【３】開発環境
　１）Web
　２）VS Code
【４】サンプル

【１】Sassとは

* Sass = Syntactically Awesome Style Sheets
 => Syntactically = 構文的に, Awesome = 素晴らしい
 => CSSを扱いやすくしたスタイルシート

* TypeScript をコンパイル（トランスパイル）して、JavaScriptを作るように
　Sass(SCSS)をコンパイル（トランスパイル）して、CSSを作る

特徴

* ネスト構造でCSSを書ける
 => HTML構造と重なるので可読性がいい
* 変数が使える
* Mixin（ミックスイン）や継承により、使いまわしできる

【２】記法

１）SASS（拡張子：.sass）
２）SCSS（拡張子：.scss）<< こっちの方が一般的

記法の違いの詳細は、以下を参照。以降、SCSSを扱う。

https://qiita.com/m0nch1/items/b01c966dd2273e3f6abe

【３】開発環境

色々あるが、とりあえず、以下を調べた

１）Web
２）VS Code
etc...

１）Web

* 簡単に試したかったら、以下のサイトがいい

SassMeister
https://www.sassmeister.com/

２）VS Code

https://www.youtube.com/watch?v=s9Z-kOzqwTw

で紹介(10:00付近)されている 拡張機能「Live Sass Compiler」を入れる

設定 

Sass用のフォルダを作成し、Sassファイル（e.g. sample.scss）を作成すると
VS Codeの下の青い欄に「Watch Sass」って出てくるので、押せば
勝手にCSSにコンパイルしてくれる

【４】サンプル

sample.scss 

/* このコメントは変換される */
#main {
    // このコメントは変換されない
    width: 90%;
    div {
        color: red;
    }
    p {
        font-size: 16px;
    }
}

【変換後】sample.css 

@charset "UTF-8";
/* このコメントは変換される */
#main {
  width: 90%;
}
#main div {
  color: red;
}
#main p {
  font-size: 16px;
}

参考文献

動画
https://www.youtube.com/watch?v=_Dl1y2DXONQ

* 無料だと途中だけど、取っ掛かりになる

https://dotinstall.com/lessons/basic_sass/10201
レッスンサイト 

* こちらも、無料だと途中だけど、取っ掛かりになる

https://prog-8.com/languages/sass

関連記事

Sass ～ 基本編 ～
https://dk521123.hatenablog.com/entry/2021/03/16/164723