Webフロントエンド
Sassを使ったテーマ：SCSSチュートリアル
Sassを使用したスタイルシート開発は、プロパティや変数のネストなどの最も基本的な機能を使用している場合でも、貴重な時間を節約し、 フロントエンド開発者 。 CSSプリプロセッサがウェブサイトやアプリケーションのスタイルを作成する事実上の方法として広く採用されているのは当然のことです。もはや彼らなしでは生きていけません。
それになると テーマ ;つまり、レイアウトを維持しながらWebサイトのルックアンドフィールを変更すると、ミックスインや関数などのSassの機能は、歩く代わりに飛行機に乗るような感覚になります。このSCSSチュートリアルでは、最小限のテーマを作成し、SCSSを使用してCSSプログラミングにいくつかの超能力を与えます。
基本的なミックスインアプローチ
次のレイアウトがあるとしましょう。
asp.netコア2および角度5
Left Right Button 
複数のテーマを作成するように依頼されました。テーマは、すべてのコンテナー（メインコンテナーを含む）とボタンの色を変更する必要があります。テーマは、本体のクラスによって決定されます。または、「外部」コンテナーにすることもできます。
@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; } } } } パラメータとして配色を含む「themable」という名前のミックスインを作成しましょう。
@include themable(theme-1, #f7eb80, #497265, #82aa91, #fff, #bc6a49); @include themable(theme-2, #e4ada7, #d88880, #cc6359, #fff, #481b16); 次に、それを使用してテーマを生成します。
$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 ) ); 
この時点で、すでに多くの時間を節約できましたが、このアプローチにはいくつかの問題があります。
テーマには通常、色以外にもさまざまなプロパティがあります。たとえば、Bootstrapテーマを変更したい場合、前の「レシピ」に続いてミックスインを作成すると、保守が難しく、コードが読みにくくなります。さらに、Sassのベストプラクティスに従っていません。たとえば、16進カラーコードをミックスインに直接入力します。
Sassマップを使用してスタイルスキームを設計する
主にキーインデックス配列のようなマップの助けを借りて、テーマのよりセマンティックで意味のあるスタイルのセットを構築できます。これにより、同僚の開発者は保守と理解を容易にできます。使用できます リスト 同様に、しかし、個人的には、私はこの目的により適した地図を見つけます。キーは自明ですが、リストにはキーがありません。
新しいアプローチのマップは次のようになります ネストされた 地図：
theme-1スキームの各セクションにアクセスしたい場合@eachおよびそのサブマップでは、@each $section, $map in $theme-1 を使用します。 指令 それらのそれぞれをループする：
$section$mapを返します キー 現在のセクションのmap-getそのキーに対応するネストされたマップを返します。
次に、map-get($map, bg) を使用して、各マップのプロパティ、たとえば背景（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); } も使用していることに注意してください 指令 ボタンではないセクションのプロパティを区別するため。
lightenこのようにして、一部のセクションに異なるプロパティを追加して特定のプロパティやルールを作成したり、単一の値を持つキーとネストされたマップを持つ別のキーを区別したりできます。
私たちのテーマは、スタイルシートのさまざまな部分に適用された、いくつかのミックスインで使用される多くのマップで構成することもできます。それはすべて、基本レイアウトの複雑さと、もちろん、個人的なアプローチに依存します。
さらなる最適化
Sassには、さらに多くの作業を節約するための便利な組み込み関数が用意されています。たとえば、hslはdarkenのように機能しますまたは@if ($section != button) { height: map-get($map, height); width: map-get($map, width); } @else { &:hover { background-color: lighten(map-get($map, bg), 20%); } } たとえば、ボタンにカーソルを合わせたときのボタンの色を計算します。
元の背景色に関係なく、ホバー時に背景を明るくするようにボタンコードを変更できます。このように、この状態に別の色を追加する必要はありません。
コードをテストする方法
@import 'theme-1'; @import 'theme-2'; @import 'theme-3'; … … @mixin themable($theme-name, $theme-map) { .#{$theme-name} { .container { … … また、Sassモジュールを使用すると、コードがさらに読みやすくスケーラブルになります。各テーママップをモジュールに含めて、メインのスタイルシートにインポートすることができます。
/ ├── _theme-1.scss ├── _theme-2.scss └── _theme-2.scss これには、モジュールを次のようにプロジェクトに配置する必要があります。
|_+_|
Sassを使用してCSSを乾燥させる方法について詳しく知りたい場合は、ApeeScapeerの仲間であるJustinBrazeauと Sass愛好家 彼の素晴らしい記事でこれについて説明しています Sass Mixins：スタイルシートを乾いた状態に保つ 。
基本を理解する
Sassとは何ですか？
Syntactically Awesome Style Sheets（Sass）は、プログラミングタイプの機能を提供し、CSSにプリコンパイルするCSSスーパーセットです。
SassとSCSSの違いは何ですか？
Sass 3以降、新しいSass構文とファイル拡張子はSCSSと呼ばれます。
