PORTFOLIO & WEB DESIGN MEMORANDOM BLOG   
PORTFOLIO & WEB DESIGN MEMORANDOM BLOG   

【CSS】Live Sass Compilerの使い方・設定

タグ :

インストール方法

1. VS Code左の「拡張機能」アイコンをクリック
2. 「Live Sass Compiler」で検索
3. インストール（作者：Ritwick Dey）

基本の使い方（超シンプル）

1. .scssファイルを作る（例：style.scss）
2. 画面右下の「Watch Sass」ボタンをクリック

これだけで保存するたびに自動でCSS生成されます

生成されるファイル例

  2. style.scss → style.css
  3.              → style.css.map

よく使う設定（settings.json）

VS Code設定で下記を追加すると便利です。

  2. "liveSassCompile.settings.formats": [
  3.   {
  4.     "format": "expanded",
  5.     "extensionName": ".css",
  6.     "savePath": "/css"
  7.   }
  8. ],
  9. "liveSassCompile.settings.generateMap": true

ポイント

• /css → CSSをcssフォルダに出力
• expanded → 見やすいCSS
• compressed → 圧縮CSS（本番用）

@useの使い方（Sassの分割）

Sassではファイルを分けて管理できます

ファイル構成例

  2. scss/
  3.  ├ style.scss（メイン）
  4.  ├ _header.scss
  5.  ├ _footer.scss
  6.  ├ _variables.scss

partial（パーシャル）とは?

ファイル名に _ をつけること。

  2. _header.scss

これは「単体ではCSSにしないファイル」という意味になる。

@useの書き方

  2. @use "variables";
  3. @use "header";
  4. @use "footer";

• _は書かない
• .scssも省略OK

CSSはどう書き出されるのか

SCSS（元ファイル）

  2. $main-color: blue;
  4. .header {
  5.   color: $main-color;
  7.   .title {
  8.     font-size: 20px;
  9.   }
  10. }

出力されるCSS

  2. .header {
  3.   color: blue;
  4. }
  6. .header .title {
  7.   font-size: 20px;
  8. }

重要ポイント

• ネスト（入れ子）は展開される
• 変数は普通の値になる
• mixinなども全部展開される

出力の仕組みまとめ

  2. SCSSを書く
  3.    ↓
  4. 保存（Ctrl + S）
  5.    ↓
  6. Live Sassが自動コンパイル
  7.    ↓
  8. CSSファイル生成
  9.    ↓
  10. HTMLで読み込む

HTML側の読み込み

  2. <link rel="stylesheet" href="css/style.css">

※ SCSSは直接読み込めません

よくある便利テク

変数

  2. $color: red;

ネスト

  2. nav {
  3.   ul {
  4.     list-style: none;
  5.   }
  6. }

&（親参照）

  2. .btn {
  3.   &:hover {
  4.     opacity: 0.7;
  5.   }
  6. }

よくあるミス

* Watch Sass押してない
* 保存してない
* パスが間違ってる
* partialに直接書いてる（出力されない）

まとめ

• Live Sassは「保存するだけでCSS生成」
• @importでファイル分割できる
• SCSSは最終的に普通のCSSに変換される

前ページに戻る
MILMONA   MILMONA   MILMONA   MILMONA   MILMONA   
MILMONA   MILMONA   MILMONA   MILMONA   MILMONA