Sassによるテーマ設定：SCSSチュートリアル

公開: 2022-03-11

Sassを使用したスタイルシート開発は、プロパティや変数のネストなどの最も基本的な機能を使用している場合でも、貴重な時間を節約し、フロントエンド開発者の作業を楽にします。 CSSプリプロセッサがWebサイトやアプリケーションのスタイルを作成する事実上の方法として広く採用されているのは当然のことです。 私たちはもはや彼らなしでは生きていけません。

テーマに関しては; つまり、レイアウトを維持しながらWebサイトのルックアンドフィールを変更すると、ミックスインや関数などのSassの機能は、歩く代わりに飛行機に乗るような感覚になります。 このSCSSチュートリアルでは、最小限のテーマを作成し、SCSSを使用してCSSプログラミングにいくつかの超能力を与えます。

基本的なミックスインアプローチ

次のレイアウトがあるとしましょう。

 <body class="theme-1"> <div class="container"> <div class="left"> Left </div> <div class="right"> Right <button class="button">Button</button> </div> </div> </body> </html>

空白のcssテーマレイアウトの画像

複数のテーマを作成するように依頼されました。 テーマは、すべてのコンテナー（メインコンテナーを含む）とボタンの色を変更する必要があります。テーマは、本体のクラスによって決定されます。または、「外部」コンテナーにすることもできます。

 <body class="theme-1">

パラメータとして配色を含む「themable」という名前のミックスインを作成しましょう。

 @mixin themable($theme-name, $container-bg, $left-bg, $right-bg, $innertext, $button-bg) { .#{$theme-name} { .container { background-color: $container-bg; border: 1px solid #000; display: flex; height: 500px; justify-content: space-between; margin: 0 auto; padding: 1em; width: 50%; * { color: $innertext; font-size: 2rem; } .left { background-color: $left-bg; height: 100%; width: 69%; } .right { background-color: $right-bg; height: 100%; position: relative; width: 29%; } .button { background-color: $button-bg; border: 0; border-radius: 10px; bottom: 10px; cursor: pointer; font-size: 1rem; font-weight: bold; padding: 1em 2em; position: absolute; right: 10px; } } } }

次に、それを使用してテーマを生成します。

 @include themable(theme-1, #f7eb80, #497265, #82aa91, #fff, #bc6a49); @include themable(theme-2, #e4ada7, #d88880, #cc6359, #fff, #481b16);

Sassを使用して生成されたtheme-1とtheme-2の比較

この時点で、すでに多くの時間を節約できましたが、このアプローチにはいくつかの問題があります。

テーマには通常、色以外にもさまざまなプロパティがあります。 たとえば、Bootstrapテーマを変更したい場合、前の「レシピ」に続いてミックスインを作成すると、保守が難しく、コードが読みにくくなります。 さらに、Sassのベストプラクティスに従っていません。たとえば、16進カラーコードをミックスインに直接入力します。

Sassマップを使用してスタイルスキームを設計する

主にキーインデックス付き配列のようなマップの助けを借りて、テーマのよりセマンティックで意味のあるスタイルのセットを構築できます。これにより、同僚の開発者が保守と理解を容易にできます。 リストを使用することもできますが、個人的には、この目的に適したマップを見つけました。 キーは自明ですが、リストにはキーがありません。

新しいアプローチのマップは、ネストされたマップになります。

 $theme-1: ( container: ( bg: #e4ada7, color: #000, border-color: #000 ), left: ( bg: #d88880, color: #fff, height: 100%, width: 69% ), right: ( bg: #cc6359, color: #fff, height: 100%, width: 29% ), button: ( bg: #481b16, color: #fff ) );

スキームtheme-1とそのサブマップの各セクションにアクセスする場合は、 @eachディレクティブを使用して各セクションをループします。

 @each $section, $map in $theme-1

$sectionは現在のセクションのキーを返し、 $mapはそのキーに対応するネストされたマップを返します。

次に、 map-get関数を使用して、各マップのプロパティ、たとえばbackground（bg）プロパティにアクセスできます。

 map-get($map, bg)

最後に、マップ構造に基づいて新しいミックスインを組み合わせることで、必要な数のテーマを作成できます。

 @mixin themable($theme-name, $theme-map) { .#{$theme-name} { .container { .left, .right { font-size: 2rem; } } .container .right { position: relative } .button { border: 0; border-radius: 10px; bottom: 10px; cursor: pointer; font-size: 1rem; font-weight: bold; padding: 1em 2em; position: absolute; right: 10px; } // Loop through each of the keys (sections) @each $section, $map in $theme-map { @if ($section == container) { .container { background-color: map-get($map, bg); border: 1px solid map-get($map, border-color); display: flex; height: 500px; justify-content: space-between; margin: 0 auto; padding: 1em; width: 50%; } } @else { .#{$section} { background-color: map-get($map, bg); color: map-get($map, color); @if ($section != button) { height: map-get($map, height); width: map-get($map, width); } } } } } } @include themable(theme-1, $theme-1); @include themable(theme-2, $theme-2); … …

ボタンではないセクションのプロパティを区別するために@ifディレクティブも使用していることに注意してください。

 @if ($section != button) { height: map-get($map, height); width: map-get($map, width); }

このようにして、特定のプロパティやルールを作成するために一部のセクションに異なるプロパティを追加したり、ネストされたマップを使用して単一の値を持つキーと別のキーを区別したりできます。

私たちのテーマは、スタイルシートのさまざまな部分に適用された、いくつかのミックスインで使用される多くのマップで構成することもできます。 それはすべて、基本レイアウトの複雑さと、もちろん、私たちの個人的なアプローチに依存します。

さらなる最適化

Sassには、さらに多くの作業を節約するための便利な組み込み関数が用意されています。 たとえば、hslは、ボタンにカーソルを合わせたときのボタンの色などを計算するために、 lightenたりdarkenしたりするように機能します。

元の背景色に関係なく、ホバー時に背景を明るくするようにボタンコードを変更できます。 このように、この状態に別の色を追加する必要はありません。

 @if ($section != button) { height: map-get($map, height); width: map-get($map, width); } @else { &:hover { background-color: lighten(map-get($map, bg), 20%); } }

また、Sassモジュールを使用することで、コードをさらに読みやすくスケーラブルにすることができます。 各テーママップをモジュールに含めて、メインのスタイルシートにインポートすることができます。

 @import 'theme-1'; @import 'theme-2'; @import 'theme-3'; … … @mixin themable($theme-name, $theme-map) { .#{$theme-name} { .container { … …

これには、モジュールを次のようにプロジェクトに配置する必要があります。

/ ├── _theme-1.scss ├── _theme-2.scss └── _theme-2.scss

Sassを使用してCSSを乾燥させる方法について詳しく知りたい場合は、Toptalerの仲間であるJustin BrazeauとSassの愛好家が、彼のすばらしい記事Sass Mixins：Keep YourStylesheetsDRYでこれについて説明しています。