【web系エンジニア必見】1行記入するだけで効率が格段に上がる小技紹介

WEB系のエンジニアの方であれば1度は「Sass」という言葉を聞いたことがあるのでは？と思います。
今回はAtomのsass-autocompileでsass(SCSS)ファイルをコンパイルする際にインデント形式を指定する方法のご紹介です。
4種類あるのでそれぞれ解説していきます。

出力するインデント形式を指定する方法
Compressed
Compact
Nested
Expanded
まとめ

出力するインデント形式を指定する方法

Atomのsass-autocompileで出力方法を指定は、sass(scss)のソース内の一番上の行に記載します。

//ここに出力形式を記載

~ここからスタイルを定義~

※本記事でご紹介するサンプルでは、すべてのサンプルソースの一行目に出力形式を指定しております。

Compressed

Compressedは、コンパイル時にすべての改行やスペースを取り除いてスタイルに関係する文字列のみをCSSファイルに出力します。
一般的にファイルの末尾に「min」がついている状態となります。
何も指定しない場合はデフォルトで「Compressed」で出力されます。
コードがすべて1行で出力されてしまうので、メンテナンス等を行うのに不向きな形式となります。
ですが、ファイルのサイズが圧縮されるので、ファイル容量を限りなく節約したいという方にはこの出力方式がおすすめです。

Sass(SCSS)

//compileExpanded
div{
 display: block;
 margin: 0 auto;
 h2{
  font-size: 2.5rem;
  font-weight: bold;
 }
 button{
  display: block;
  margin: 0 auto;
  width: 100%;
 }
}

コンパイル結果

div{display:block;margin:0 auto}div h2{font-size:2.5rem;font-weight:bold}div button{display:block;margin:0 auto;width:100%}

Compact

Compactは、コンパイル時にプロパティ間の余分な改行やスペースを取り除いてCSSファイルに出力します。
一般的にファイルの末尾に「compact」がついている状態となります。
目視でも内容が理解できる見やすい形式となります。

Sass(SCSS)

//compileCompact
div{
 display: block;
 margin: 0 auto;
 h2{
  font-size: 2.5rem;
  font-weight: bold;
 }
 button{
  display: block;
  margin: 0 auto;
  width: 100%;
 }
}

コンパイル結果

div { display: block; margin: 0 auto; }

div h2 { font-size: 2.5rem; font-weight: bold; }

div button { display: block; margin: 0 auto; width: 100%; }

Nested

Nestedは、Sass(SCSS)のネストを維持した状態でCSSファイルを出力します。
一般的にファイルの末尾に「nasted」がついている状態となります。

Sass(SCSS)

//compileNested
div{
 display: block;
 margin: 0 auto;
 h2{
  font-size: 2.5rem;
  font-weight: bold;
 }
 button{
  display: block;
  margin: 0 auto;
  width: 100%;
 }
}

コンパイル結果

div {
display: block;
margin: 0 auto; }
div h2 {
font-size: 2.5rem;
font-weight: bold; }
div button {
display: block;
margin: 0 auto;
width: 100%; }

Expanded

Expandedは、コンパイル時に一番書き慣れた形式でCSSファイルを出力します。
一般的にファイルの末尾に何も付かずシンプルに「ファイル名.css」となります。

Sass(SCSS)

//compileExpanded
div{
 display: block;
 margin: 0 auto;
 h2{
  font-size: 2.5rem;
  font-weight: bold;
 }
 button{
  display: block;
  margin: 0 auto;
  width: 100%;
 }
}

コンパイル結果

div {
display: block;
margin: 0 auto;
}

div h2 {
font-size: 2.5rem;
font-weight: bold;
}

div button {
display: block;
margin: 0 auto;
width: 100%;
}

まとめ

下記にAtomのsass-autocompileで指定することができる出力形式をまとめます。

Compressed	改行やスペースを除いて1行だけで出力
Compact	プロパティ間の改行を除いて出力
Nested	ネストを維持した状態で出力
Expanded	標準的なCSSファイルの状態で出力

Sass(SCSS)の記法に慣れれば素のcssより何倍も速くソースを書くことができるので皆さんもぜひお試しください！