最近はフロント関連の学習もやっています。SCSSを業務では使っています。
業務では、このあたりも結構複雑な構成になっており、作ったらビルドコマンド流してビルドして確認、という手順を取ります。
ただ、自分の学習のためにそこまで作っていられないし、わざわざnpmとか使って環境構築するのも面倒…というわけで、VSCode単体でSCSSからCSSが作成できる拡張機能を使っています。
バージョン等
| 項目 | バージョン |
|---|---|
| Visual Studio Code | 1.34.0 |
| Easy Sass | 0.0.6 |
| IntelliSense for CSS class names in HTML | 1.19.0 |
| CSS Peek | 2.2.0 |
紹介
拡張機能の画面で「easy sass」等で検索したら出てくると思います。インストールしたら使えます。
機能をざっくりいうと、
です。以上です。とにかくcss自動生成が非常に便利です。
試す
VSCodeで試したいフォルダを開き、
- index.html
- main.scss
- cssフォルダ
を作成します。
既定では、css出力フォルダが./cssになっています。そのため、同階層にcssフォルダを作成する必要があります。これをやらないとファイルが作成されません。
index.htmlで、cssフォルダに作成されるであろうcssファイルを参照します。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/main.min.css"> <title>Document</title> </head> <body> <div id="main-content"> <p>Hello world!</p> <p>Next Sentence.</p> </div> </body>
そして、とりあえずmain.scssを編集しましょう。変数を使っています。
$theme-color: yellow; #main-content { background-color: $theme-color; }
編集したmain.scssを保存すると、cssフォルダにmain.cssとmain.min.cssが生成されます。main.cssは以下のようにコンパイルされた内容となっています。
#main-content { background-color: yellow; }
基本はこれだけです。お手軽です。
その他
htmlからcssを参照したい
上記のように、VSCodeで手軽にscssを扱えます。ただ、それをやったとしてもhtmlファイルからcssのクラス等を指定するときは文字列扱いになります。
そこで役に立つのが、最初に書いた二つの拡張機能です。
IntelliSense for CSS class names in HTML
htmlでクラス名を入力する際、cssに定義されているクラス名をIntelliSenseで表示してくれる、というものです。
CSS Peek
htmlに書いたcssのclassの参照元をcssから探してくれ、ジャンプできます。
cssがどこに適用されるか知りたい
scss使うと、cssのクラス等をすっきりと記述できますが、htmlの構成上結局どこにそれが適用されるのか、分からなくなる時があります。
そういうときは、VSCode標準機能だと思いますが、階層を表示してくれる機能があります。
上の画像のように、cssやscssの名前にカーソルを合わせると、どういう階層だと指定している部分が適用されるのか、出てきます。
私のような、勉強中の初心者には助かる機能です。
むしろ、これのおかげで隣接セレクタの+と同階層全適用の~の違いを知りました。
おわりに
IDEだと、上記の機能が提供されているものもあります。ただ、学習のためにIDE使うのは面倒。という場合に今回の話は役立つと思います。
あくまでEasyなものなので、特定のファイルだけビルドするような機能はありませんが、学習用途ならこれで十分です。
なお、私が作ろうとしていたのはcssとhtmlだけでアコーディオンを実現する方法でした。bootstrap使えばいいというのは無しで。
もっとつよつよエンジニアになりたいものです。
