主に社内用にサクッとコンパイルして値を確認できるようにと思って作りました。
sassの機能を利用してエディター(vscode)で関数やmixinで値を計算します。
├── .vscode
│ └── settings.json
├── css
│ ├── clamp.css
│ └── lh.css
├── sass
│ ├── _function.scss
│ ├── clamp.scss
│ └── lh.scss
├── .editorconfig
└── README.md
.vscode
vscodeの設定ファイルなどが収められたディレクトリsettings.json
vscodeの設定ファイル
css
cssファイルが収められたディレクトリclamp.css
関数 fs を記述したscssファイルをコンパイルしたcssファイルlh.css
mixin lh を記述したscssファイルをコンパイルしたcssファイル
sass
scssファイルが収められたディレクトリ_function.scss
関数・mixinの設定ファイルclamp.scss
関数 fs を記述したファイルlh.scss
mixin lh を記述したファイル
.editorconfig
EditorConfigの設定ファイルREADME.md
説明などを記載
- ダウンロードしたsassディレクトリ配下の
clamp.scss
とlh.scss
を参考にしてください。 - 関数やmixinは
_function.scss
を参考にしてください。
- 関数 fs はclampを計算し mixin lh はラインハイトの上下の余白を相殺します。
- sassディレクトリ配下に作成した◯◯.scssと同じ名前もcssファイルがcssディレクトリ配下にコンパイルされた状態で作成されます。 (sassディレクトリ配下のscssファイルの箇所がややこしくて、申し訳ないです)
- コンパイルする場所やベンダープレフィックスを変更したいなどありましたら、
.vscode
ディレクトリ配下のsettings.json
を編集してください。
以下のサイトを参考に作成させていただきました。
- line-heightで出来るスペースをSCSSのmixinを使って効率よく消す方法
- Sass と clamp() で作る可変のフォントサイズ
- Min-Max-Value Interpolation
- Easy Clamp Generator
sassをコンパイルできるようであれば、どのようなツールでも構いません。
目的は、社内用でサクッとなので必須プラグインでLive Sass Compiler
を指定させていただきました。
できればインストールしたほうがいいプラグインEditorConfig for VS Code
も必須ではありませんが、インデントや改行コードを統一できるので記載しました。