2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

SCSS まとめ3(コンパイル方法)

Last updated at Posted at 2021-03-06

SCSSまとめ集

  1. 基本文法
  2. 関数
  3. コンパイル方法

目次

  1. Live Sass Compilerを使用したコンパイル方法
  2. コンパイル場所を指定する
  3. Live Sass Compilerのsetting.jsonについて

1. Live Sass Compilerを使用したコンパイル方法

公式サイト
https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md

  1. エディタはVisual Studio Codeを使用。

  2. 拡張機能としてLive Sass Compilerをインストールする。
    image.png

  3. SCSSファイルを作成し、コードを記述した後、下の「Watch Sass」を押す。
    image.png

  4. 同一フォルダにcssファイルとmapファイルが作成される。

  • mapファイルには、参考にしたscssファイルと出力されたcssファイルの情報が記載されてある。
  • 以下、保存する度にコンパイルが自動でされる。
  • 自動コンパイル時に、Successなら成功、Errorなら失敗(コード内にエラーがある)
  • 自動コンパイルをやめたい場合は、「Watching...」を押す。

image.png

2. コンパイル場所を指定する

・エディタ自体にコンパイル場所を設定する場合

  1. 拡張機能より「Live Sass Compiler」を右クリック→拡張機能の設定をつける
    image.png

  2. ユーザータブを選択し、Formats→settings.jsonで編集をクリック
    image.png

  3. 例として以下のコードをsettings.jsonに記載する()

    "liveSassCompile.settings.formats":[
        // This is Default.
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": null
        },
        // You can add more
        {
            "format": "compressed",
            "extensionName": ".min.css",
            "savePath": "/dist/css"
        },
        // More Complex
        {
            "format": "compressed",
            "extensionName": ".min.css",
            "savePath": "~/../css/"
        }
    ]
  • format コンパイル後のcssファイルの記載方法。expanded, compact, compressed, nestedを指定する
css
/* expanded */
p {
  font-size: 16px;
}

p span {
  color: blue;
}

/* compact */
p { font-size: 16px; }

p span { color: blue; }

/* compressed */
p{font-size:16px}p span{color:blue}

/* nested */
p {
  font-size: 16px; }
  p span {
    color: blue; }
  • extensionName...拡張子を設定
  • savePath...コンパイル先のパスを設定

4.コンパイルすると以下のような感じになる。
image.png

・プロジェクトごとにコンパイル場所を設定する場合

  1. 上記の2.の手順にて、ユーザータブではなく、ワークスペースタブを選択。
    image.png

  2. ローカルに作成されたsettings.jsonに同じように記述してコンパイルすればOK。

3. Live Sass Compilerのsettings.jsonについて

設定項目 内容
Autoprefix 自動でベンダープレフィックスを追加する際に対象とするブラウザの条件
Exclude List コンパイル対象から除外するファイルの指定
Formats コンパイル後のCSSファイルのフォーマットや保存先のパスなど
Generate Map コンパイル時にMAPファイルを出力するか
Include Items コンパイル対象に含めるファイルの指定
Show Output Window 出力パネルを自動的に表示するかどうか

詳しい内容は後で記載。

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?