12周年記念パーティ開催! 2024/5/10(金) 19:00

SassとCSS設計

全8回

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

最終回 運用と管理

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

第7回 セレクタを継承する

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

第6回 Mixinの利用

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

第5回 演算の利用

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

第4回 変数の利用

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

第3回 ネストのルールとCSS設計

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

第2回 ネスト機能の利用

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

第1回 Sassの基本

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