, ,

[Front-End General] CSScomb: .scss ファイルを自動修正する

公開日: 2016/03/30
更新日: 2018/12/26

.css 対象だが .scss もおおむね機能するようなので導入する。

Contents

Install

プロジェクトディレクトリにインストールする。

% npm install csscomb --save-dev

IDE

公式にあるプラグイン以外にも、Atom があってありがたい。

% apm install atom-csscomb

Config

.csscomb.json を作成する。
公式サイトの CSScomb: Build config から質問に回答していくとで自動生成できる。
Google HTML/CSS Style Guide に準拠した .csscomb.json を作成。

Usage

以下で実行できる。

% $(npm bin)/csscomb source.css

導入事例

SCSS 記法への乗り換えをしつつ、CSScomb をかける。

sass-convert

.sass ファイルを .scss ファイルに一括変換する。

1ファイルを変換。

% sass-convert source/stylesheets/all.css.sass source/stylesheets/all.css.scss

ディレクトリが対象であれば、以下を実行する。

% sass-convert --recursive  --from sass --to scss source/stylesheets/layouts
    convert source/stylesheets/layouts/_footer.sass
     create source/stylesheets/layouts/_footer.scss
    convert source/stylesheets/layouts/_header.sass
     create source/stylesheets/layouts/_header.scss
    convert source/stylesheets/layouts/_main.sass
     create source/stylesheets/layouts/_main.scss
    convert source/stylesheets/layouts/_sidebar.sass
     create source/stylesheets/layouts/_sidebar.scss

CSScomb

.scss ファイルを一括で整形する。
1ファイルを整形。

% $(npm bin)/csscomb source/stylesheets/all.css.scss

ディレクトリが対象であれば、以下を実行する。

% $(npm bin)/csscomb source/stylesheets/layouts/*.scss

導入メリットが大きい。