設計
SassとCSS設計
8

最終回はSassの運用と管理について、注意事項やTipsを紹介します。実際に執筆者が業務でよく使っているファイル構成やライブラリについて触れています。

山田 敬美
山田 敬美 | フロントエンド・エンジニア

第7回目はセレクタに指定されたスタイルを継承するextend機能を紹介します。これを使うことで出力されるCSSがよりシンプルになり、CSSファイルそのものが軽くなります。サイトによっては、高速化を図ることができます。

山田 敬美
山田 敬美 | フロントエンド・エンジニア

CSS SpriteのサンプルSassコードをより簡潔に、効率的に、しかもメンテナンス性を高めるように改善しながら、そのキモとなるMixin機能について解説します。

山田 敬美
山田 敬美 | フロントエンド・エンジニア

第5回では演算機能について解説します。演算の記号(演算子)は、CSSとして別の意味を持つこともあるので、自分の意図通りの出力結果を得られるように、書式に注意する必要があります。

山田 敬美
山田 敬美 | フロントエンド・エンジニア

Sassの機能の中でもよく使われる変数の使いどころと、利用する際の注意点を解説します。変数を上手に活用すれば、デザインの変更などにより少ない労力で対応できるコードが書けるようになります。

山田 敬美
山田 敬美 | フロントエンド・エンジニア

便利なネスト機能も使い方を誤ると、いくつかの弊害を引き起こします。第3回目は、その注意点と、解決方法の一例を紹介します。

山田 敬美
山田 敬美 | フロントエンド・エンジニア

第1回目でSassがひととおり使える環境を整えました。第2回目は数あるSassの機能の中から、いちばん使用頻度の高いネスト機能をどのように利用するかについてとりあげます。

山田 敬美
山田 敬美 | フロントエンド・エンジニア

このシリーズでは、CSSのプリプロセッサーであるSassを用いたCSS設計を取り上げます。Sassの機能そのものでなく、機能をどう活用するかを具体的なサンプルを用いて解説します。第1回は、Sassの概要と導入についてです。

山田 敬美
山田 敬美 | フロントエンド・エンジニア