SE(たぶん)の雑感記

一応SEやっている筆者の思ったことを書き連ねます。会計学もやってたので、両方を生かした記事を書きたいと考えています。 でもテーマが定まってない感がすごい。

VSCodeで手軽にSCSSを使うなら「Easy Sass」が便利

最近はフロント関連の学習もやっています。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

紹介

f:id:hiroronn:20190526153127p:plain

marketplace.visualstudio.com

拡張機能の画面で「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.cssmain.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で表示してくれる、というものです。

f:id:hiroronn:20190526172519p:plain

marketplace.visualstudio.com

CSS Peek

htmlに書いたcssのclassの参照元cssから探してくれ、ジャンプできます。

f:id:hiroronn:20190526172833p:plain

marketplace.visualstudio.com

cssがどこに適用されるか知りたい

scss使うと、cssのクラス等をすっきりと記述できますが、htmlの構成上結局どこにそれが適用されるのか、分からなくなる時があります。

そういうときは、VSCode標準機能だと思いますが、階層を表示してくれる機能があります。

f:id:hiroronn:20190526173656p:plain

上の画像のように、cssやscssの名前にカーソルを合わせると、どういう階層だと指定している部分が適用されるのか、出てきます。

私のような、勉強中の初心者には助かる機能です。

むしろ、これのおかげで隣接セレクタ+と同階層全適用の~の違いを知りました。

おわりに

IDEだと、上記の機能が提供されているものもあります。ただ、学習のためにIDE使うのは面倒。という場合に今回の話は役立つと思います。

あくまでEasyなものなので、特定のファイルだけビルドするような機能はありませんが、学習用途ならこれで十分です。

なお、私が作ろうとしていたのはcssとhtmlだけでアコーディオンを実現する方法でした。bootstrap使えばいいというのは無しで。

もっとつよつよエンジニアになりたいものです。