サイト制作において、デザイン通りにWebサイトを装飾していくために使用される言語がCSSになります。
Sassとは、CSSの機能を拡張し、より効率的にコーディングを行う為に開発された言語になります。
しかし、書かれたコードをCSSに変換するという機能上、新しいCSSの記述に非対応だったり、あくまでCSSとは別の言語なので、Sass独自の記法がCSS自体では活用できなかったりと、いくつかのデメリットがあります。
さらに、CSSは利用者の要望に合わせてアップデートを続けており、常に便利な機能が追加され続けているので、それらの機能を完全に扱えないことがデメリットとして大きくなってきています。
また、PostCSSなどの登場により、脱Sassを行うコーダーも増えてきています。今回は脱Sassを行っても困らないよう、Sassの主要機能について、CSSで再現する方法を紹介します。
変数の再現方法
Sass変数は、色やsizeなどのCSSの値を保存し、再利用するために使用されます。
//SCSSで実装
$red: #ea5550;//#ea5550を、$redとして保存
.box1{
width: 300px;
height: 300px;
background-color: $red;//$red保存した#ea5550を呼び出す。
}
そんな便利な変数ですが、CSSでも同じくらい簡単に利用することが可能です。
これにより、カラーコードやfont-sizeを正確に覚えていなくても変数名で指定することができ、それらの値に変更があった場合は、まとめてコードの修正をすることができます。
See the Pen CSS変数 by 師岡崚汰 (@rxsocktt-the-scripter) on CodePen.
こちらが、CSSで変数を設定する方法です。
記述の仕方さえ覚えてしまえば、CSSでもSassの変数と同じくらい簡単に利用することができると思います。
入れ子(ネスト)の再現方法
Sassの入れ子とは、CSSで親要素の中に子要素のスタイルを記述というようにHTMLと同じ階層構造で記述できる機能です。
//SCSSで実装
.text {
font-size: 18px;
}
.bold {
.text {
font-weight: bold;
}
}
こちらの入れ子(ネスト)機能は、CSSにおいても同じ様に使用できます。
See the Pen CSSネスト by 師岡崚汰 (@rxsocktt-the-scripter) on CodePen.
こちらがCSSネストになります。SCSSとあまり記述が変わらないので、覚えやすいのではないでしょうか。
ファイル分割機能の再現方法
Sassのファイル分割は、スタイルシートを複数のシートに分けて管理する機能です。
分けられたシートはメインのスタイルシートに組み込まれ、ひとつのスタイルシートとなります。
//SCSSで実装 @import 'header.scss';//同じ階層にある、header.scssの記述を取り込む
こちらは同じ階層にある、header.scssを取り込むための記述です。
この様に記述することで、別のシートに記述されたSCSSファイルを、一つのSCSSに取り込むことができます。
実は、CSSでも@importを使用することでファイル分割を行うことができます。
//CSSで実装
@import url("header.css");//同じ階層にある、header.cssの記述を取り込む
しかし、CSSでのファイル分割では、CSSの読み込みに時間がかかってしまう様です。
そのため、あまり使われない手法となっており、ファイル分割をしたい場合はPostCSSなどを使用する必要があります。
PostCSSは、CSSの機能を拡張するために開発者がプラグインを使用して必要な機能を追加していくツールになりますが、PostCSSはSassと違い、あくまでCSS自体の機能を拡張したものになるので、ブログ冒頭で紹介したデメリットの影響を受けません。
PostCSSではpostcss-importを使用することで、@importを使用できます。
//PostCSSで記述 @import 'header';//同じ階層にある、header.cssの記述を取り込む
@mixinの再現方法
@mixinはSassで複数行に渡るCSSのコードを保存し、それを繰り返しの使用できる様にする機能です。
これにより、別々の要素の共通のスタイルを共有することができます。
//SCSSで実装
@mixin box-template { //@mixinでCSSを保存
width: 100px;
height: 100px;
}
.box-red {
@include box-template;//保存したCSSを呼びだす
background-color: red;
}
.box-green {
@include box-template;//保存したCSSを呼びだす
background-color: green;
}
こちらは、CSSでは再現ができない機能になります。
共通デザイン用のclassを作成する形で実装を行いましょう。
See the Pen インポート方法 by 師岡崚汰 (@rxsocktt-the-scripter) on CodePen.
また、Sassでは@mixinを使用してメディアクエリの記述をすることが多いですが、こちらはPostCSSを使用することで同じ機能のものを使用できる様になります。
PostCSSでは@custom-mediaを使用することで、@mixinの機能を再現できます。
//PostCSSで記述
@custom-media --mobile-screen (max-width: 767px);
@media (--mobile-screen) {
//スマホ幅のCSSを記述
}
最後に
以上で、CSSによるSassの主要機能の再現方法についての紹介を終わります。
以前はSassの利点が大きく、多くの場合Sassが選ばれてきました。しかし、Web技術の進化や、PostCSSなどの登場により、Sass以外の選択肢のメリットが大きくなってきています。
この機会に脱Sassについて検討してみてはいかがでしょうか。
