7/27Sass2021年7月27日Sassとは、CSSを効率的に記述できるように設計・開発された言語です。入れ子の使用、変数・関数の使用など便利な機能が多く、Web制作者なら必ず身につけておきたいスキルですね。Sassファイルには.scssまたは.sassという拡張子がつきますが、これらはブラウザが解釈できないためそのまま読み込むことができません。HTMLで読み込むには、SassファイルをCSSファイルに変換する作業(コンパイル)が必要となります。このコンパイル作業でアウトプットされるCSSの形式は、以下の4つから選択することができます。nestedexpandedcompactcompressedコンパイル形式によって、アウトプットされるCSSの見た目が変わります。案件でよく使う形式やそれぞれの特徴を解説していきますので、ぜひ参考にしてみてください。目次Sassで使用できる4つのアウトプット形式Sassで使用できるアウトプット形式は以下の4つです。以下にサンプルのSassコードを用意しましたので、4つのアウトプット形式でどのように見た目が変わるかを見ていきましょう。nestednestedを選択すると、CSSは以下のような見た目になります。}Sassでネストした際のインデントがそのまま保持されていますね。アウトプット形式を何も指定しないとnestedがデフォルトで選択されます。expanded続いてexpandedを指定した場合のCSSを見てみましょう。16px;}こちらの場合は、CSSと同じ一般的な見た目になりましたね。可読性が高いので、スタイルを後から編集する必要がある場合は最適です。compactcompactを指定した場合、以下のような見た目になります。}セレクタとプロパティが1行に圧縮され、コンパクトになりました。compressed最後にcompressedを指定した場合を見てみましょう。span{font-size:16px}インデントや改行が全て取り除かれ、全スタイルが1行に圧縮されました。*/というコメントも消えているのが確認できますね。他の3つの形式ではコメントは消えないままですが、compressedではコメントも削除されてしまいます。案件でよく使用するのはexpandedとcompressedの2つ4つのうち実際によく使用するのは、expandedとcompressedの2つです。ここでは、どのような場合にどちらを使用すべきかを解説していきます。expandedを使用するべき場合CSSファイルを後から編集・追記する可能性がある場合は、expandedを使用しましょう。expandedでアウトプットすると通常のCSSと同じ見た目になるので、可読性が高く編集しやすいです。16px;}こちら↑がexpandedでアウトプットした際の見た目です。CSSの記法と全く同じなので、簡単に編集・追記することができますね。案件によってはSassファイルの納品は必要なく、CSSファイルのみ納品する場合もあります。その場合はSassで記述→最後はexpandedでアウトプットしたCSSファイルのみ納品というパターンが多いですね。後からCSSファイルを編集・追記しない&ファイルサイズを最小限に抑えたい場合はcompressedが最適です。compressedではインデントや改行が削除され、全てのスタイルが1行に圧縮されるので、ファイルサイズは小さくなります。その分可読性は悪くなり、後から編集するのはほぼ不可能ですね。span{font-size:16px}こちら↑がcompressedでアウトプットした際の見た目です。expandedと比べると可読性がかなり悪く、編集・追記には向きません。*/も消えてしまうので注意してください。【まとめ】Sassのアウトプット形式は4つ!よく使用するのはexpandedとcompressedSassで使用可能な4つのアウトプット形式について説明しました。nested...ネストの見た目を保持するexpanded...CSSと同じ一般的な見た目になるcompact...セレクタとプロパティのセットを一行に圧縮compressed...インデントや改行を取り除いて全スタイルを一行に圧縮4つの中でもよく使うのはexpandedとcompressedです。CSSファイルを後から編集・追記する場合→expandedを選択CSSファイルを後から編集・追記しない&ファイルを軽量化したい場合→compressedを選択どれを使うべきかは案件の納品形式や制作会社のルールなどによって変わってきますので、状況に合わせて使い分けてみてください。記事が役に立ったらサポートしてくださいWeb制作に関する記事案を募集中!Web制作について知りたいこと、質問等ありましたら、以下のフォームから気軽に投稿してください。要望が多かったものは解説記事を作成します。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。scale()で要素を上下・左右に反転させる方法CSS【レスポンシブ対応】padding-topで要素の比率を保持しつつサイズを可変させる方法CSS起弥フロントエンドエンジニア兵庫県出身のフリーランスフロントエンドエンジニアです。Web制作を通して気づいたこと、学んだことを発信していきます。当サイトに関する質問はこちら»ポートフォリオサイトWeb制作のポートフォリオサイトです。Web制作の実績等はこちらから確認いただけます。Note」を新設しました2022年4月16日パートナーとして一緒に仕事してくださるデザイナー様を募集中です2021年8月5日GatsbyJSでポートフォリオサイトをリニューアルしました。(2)コーディング代行「CodeHive」コーディング代行チーム「コードハイブ」を立ち上げました。