, ,

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

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

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

[markdown]
> * [自動検出と自動修正でCSSを保守する – Qiita](http://qiita.com/r7kamura/items/7addebc61d177313a29d#csscomb-hammer)

## Install

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

> * [CSScomb: Makes your code beautiful](http://csscomb.com/)

“`prettyprinted
% npm install csscomb –save-dev
“`

### IDE

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

> * [CSSCombのAtomプラグイン – 1000ch.net](https://1000ch.net/posts/2015/atom-csscomb.html)
> * [1000ch/atom-csscomb: Sort your CSS properties with CSSComb.](https://github.com/1000ch/atom-csscomb)

“`prettyprinted
% apm install atom-csscomb
“`

## Config

`.csscomb.json` を作成する。
公式サイトの [CSScomb: Build config](http://csscomb.com/config) から質問に回答していくとで自動生成できる。
[Google HTML/CSS Style Guide](http://google.github.io/styleguide/htmlcssguide.xml#CSS_Formatting_Rules) に準拠した `.csscomb.json` を作成。

## Usage

以下で実行できる。

“`prettyprinted
% $(npm bin)/csscomb source.css
“`

## 導入事例

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

> * [Sass-lint: .sass/.scss ファイルを Lint する | Deadwood](https://www.d-wood.com/blog/2016/03/29_7858.html)

### sass-convert

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

> * [Sass・Compass まわりの便利だけど忘れがちな Tips | Deadwood](https://www.d-wood.com/blog/2014/09/18_6826.html)

1ファイルを変換。

“`prettyprinted
% sass-convert source/stylesheets/all.css.sass source/stylesheets/all.css.scss
“`

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

“`prettyprinted
% 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ファイルを整形。

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

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

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

導入メリットが大きい。
[/markdown]