SCSS スタイルのコードを 50% 削減する 14 の実践的な経験

序文

Sass は CSS3 言語の拡張機能です。Sass を使用すると、より良いスタイルシートをより簡単に作成し、繰り返しの作業から解放され、よりクリエイティブな作業が可能になります。変化をより迅速に受け入れることができるため、デザインにおいても大胆な革新を起こせるようになります。作成したスタイルシートは、色の変更や HTML タグの修正に簡単に対応でき、さまざまな本番環境の標準 CSS コードにコンパイルできます。 Sass 構文は比較的シンプルです。難しいのは、Sass を実際のプロジェクトに適用し、CSS の問題点を解決して効率を向上させる方法にあります。実際のプロジェクトを調査した後、皆さんの思考を広げ、実際のプロジェクトに Sass をより適切に適用するのに役立つことを願って、次の 14 の実践的な経験をまとめて共有しました。このプロジェクトでは、従来の CSS のような構文をサポートする Scss を使用しているため、次のプロジェクト体験の概要では Scss を例に挙げています。

1. 変数$の使用

色、境界線のサイズ、画像のパスなどの属性値を変数を通じて再利用できるため、1 か所を変更するだけでグローバルな変更が可能になり、「スキニング」の機能を実現できます。

例 1: コンポーネント ライブラリでは、変数構成を使用して、コンポーネントの色、フォント サイズなどを均一に変更します (スキンの変更)。

$プライマリカラー: #3ecacb;  
$color-成功: #4fc48d;  
$color警告: #f3d93f;  
$color-危険: #f6588e;  
$カラー情報: #27c6fa;

例2: イメージ構成とグローバルインポート

Scss で画像を使用する場合、次の 2 つの問題が発生する可能性があります。

（１）スタイルファイルと、そのスタイルファイルを使用するvueファイルが同じディレクトリにない場合、画像は見つかりません。

（２）画像パス設定変数をvueファイルのスタイルで記述するが、この記述方法では画像とスタイルが分離してしまう場合

イメージ パスを構成ファイルに書き込んでグローバルにインポートすると、イメージ パスを均一に変更できます (この方法では、対応するイメージが使用されるときにのみそのイメージが読み込まれるため、追加のパフォーマンスの問題は発生しません)。

$共通パス: './primary/assets/img/';  
$icon-see: $common-path+'icon-see.png';  
$icon-play: $common-path+'icon-play.png';  
$アイコンコメント: $common-path+'アイコンコメント.png';  
$icon-checkbox: $common-path+'icon-checkbox.png';

2. @importはScssファイルをインポートします

(1) CSSの@importルールを使用すると、他のCSSファイルを1つのCSSファイルにインポートできます。ただし、その結果、ブラウザは @import が実行されたときにのみ他の CSS ファイルをダウンロードするため、ページの読み込みが非常に遅くなります。

(2)Scssの@importルールは、CSSファイルを生成するときに関連ファイルをインポートするという点で異なります。つまり、追加のダウンロード要求を行わなくても、関連するすべてのスタイルが同じ CSS ファイルにグループ化されます。

例 1: コンポーネント ライブラリで、コンポーネント スタイル ファイルを index.scss にインポートします。プロジェクトでコンポーネント ライブラリを使用する場合は、プロジェクトの入り口で index.scss ファイルを導入するだけで済みます。各コンポーネントのスタイル ファイルは、次に示すように index.scss ファイルに導入されます。

@import "./base.scss";  
@import "./webupload.scss";  
@import "./message-hint.scss";

3. ローカルファイル名の使用

scss 部分ファイルのファイル名はアンダースコアで始まります。この方法では、scss はコンパイル時にこのファイルを個別にコンパイルして CSS を出力するのではなく、このファイルをインポートとしてのみ使用します。 scss を使用する場合、ミックスインは CSS ファイルを出力するために個別にコンパイルする必要がないため、ミックスインが最も適した使用例です。

例1: ミキサーの名前をローカルファイル命名方式で以下のように記述します。

4. Scssのネスト機能と親セレクタ識別子

特に CSS クラスで BEM 命名規則を使用していて、スタイル クラスの命名が長い場合は、ネストされた関数と親セレクター識別子 & を使用して、繰り返しコードを削減できます。この関数を使用すると、BEM の名前が長くなる問題を解決し、スタイルを読みやすくすることができます。

例 1: ネスト関数と親セレクタ識別子、および BEM の冗長性の問題の解決:

.tea-assignhw {   
 &__トップ{    
  マージン: 0;    
}   
 ＆__コンテンツ {   
   左パディング: 45px;   
 }    
&__グレード選択{  
   幅: 158ピクセル;    
 } 
}

**例2:** ネストされた要素内で子セレクタ、兄弟セレクタ、疑似クラスセレクタを使用する

（１）子セレクター

&__ヒント{  
  マージン: 20px;   
   フォントサイズ: 14px;   
  > p:最初の子 {   
     フォントの太さ: 太字;    
 }  
}

（２）兄弟セレクター

&__入力{   
 幅: 220ピクセル;   
 & + スパン {     
   左マージン: 10px;    
 }  
}

（３）擬似クラスセレクタ

&__ 参照 {  
  背景: url($btn-search) 繰り返しなし;   
&:ホバー{     
  背景: url($btn-search) -80px 0 繰り返しなし;   
}    
&:訪問済み{   
  背景: url($btn-search) -160px 0 繰り返しなし;   
 }  
}

5. @mixinミキサーと@extendディレクティブの使用

変数を使用するとプロパティ値を再利用できますが、ルールの大部分を再利用したい場合はどうすればよいでしょうか。伝統的なアプローチは

重複が見つかった場合は、共通ルールが抽出され、新しい CSS クラスに配置されます。

Scss では、@mixin および @extend 継承命令を使用して、ルールの大部分を再利用するという上記のシナリオを解決できます。しかし、2 つの使用シナリオの違いは何でしょうか?

（1）@mixinの主な利点は、パラメータを受け入れることができることです。パラメータを渡す場合は、@extend はパラメータを受け入れることができないため、当然 @extend ではなく @mixin を選択します。

（２）ミックスインルールは他のクラスに混在するため、出力スタイルシートでの重複を完全に回避することはできません。セレクタ継承とは、あるセレクタが他のセレクタのすべてのスタイルを、これらのスタイル属性を繰り返さずに再利用できることを意味します。つまり、@extend を使用して DRY CSS スタイル コード (Don't repeat yourself) を生成します。

まとめると、パラメータを渡す必要がある場合は @mixin ミキサーのみを使用でき、それ以外の場合は @extend 継承を使用する方が適切です。

例1: @mixinミキサーの使用

@mixin ペインアクティブ($image, $level, $vertical) {   
  背景: url($image) 繰り返しなし $level $vertical;    
  高さ: 100px;    
  幅: 30ピクセル;   
  位置: 相対的;    
  上位: 50%;  
}  
&--左アクティブ{    
  @include ペインアクティブ($btn-flip, 0, 0);  
}  
&--右アクティブ{   
  @include ペインアクティブ($btn-flip, 0, -105px);  
}

例2: @extend継承の使用

.common-mod {    
  高さ: 250px;   
  幅: 50%;    
  背景色: #fff; 
  テキスト配置: 中央;  
}  
&-mod {   
  .common-mod を拡張します。    
  フロート: 右; 
 }  
&-mod2 {   
  .common-mod を拡張します。  
}

6. @mixinミキサーのデフォルトパラメータ値の使用

ミキサーを @include する場合、すべてのパラメータを渡す必要はありません。パラメータのデフォルト値を指定できます。渡す必要があるパラメータがデフォルト値である場合は、@include が呼び出されるときにパラメータを省略できます。渡す必要があるパラメータがデフォルト値でない場合は、@include が呼び出されるときに新しいパラメータを渡すことができます。

例1: @mixinミキサーのデフォルトパラメータ値を使用する

@mixin ペイン($dir: 左) {    
  幅: 35px;   
  表示: ブロック;    
  浮動小数点数: $dir;    
  背景色: #f1f1f1;  
}  
&__ ペイン左 {   
  @include ペイン;  
}  
&__paneright {  
  @include ペイン(右);  
}

7. #{} 補間の使用

#{} 補間ステートメントを使用すると、セレクターまたは属性名で変数を使用できます。類似したスタイルのページが 2 つある場合、類似したスタイルをページ ミキサーに抽出しますが、BEM 命名仕様によれば、2 つの異なるページ スタイルの命名名を同じにすることはできません。このとき、動的な命名には補間を使用できます。

例 1: #{} 補間を使用してページレベルのミキサーでクラス名を動的に設定する

@mixin ホームコンテンツ($class) {   
 .#{$クラス} {     
   位置: 相対的;  
    背景色: #fff;   
    オーバーフロー-x:非表示;    
    オーバーフロー-y: 非表示;    
  ＆ - 左 {      
    左マージン: 160px;  
  }     
  &--左なし{   
     左マージン: 0;    
 }   
 }  
}

8. 操作の使用

SassScriptは加算、減算、乗算、除算、整数演算（+、-、*、/、%）をサポートします。

例 1: 入力コンポーネントは、以下に示すように、入力ボックスの高さに応じて左と右のパディングを設定します。

ps入力{   
   表示: ブロック;    
   &__内部 {     
    -webkit-appearance: なし;    
     左パディング: #{$--input-height + 10  
   };      
     右パディング: #{$--input-height + 10  
   };     
  }  
}

9. 関連するSCSS組み込み関数の適用

scss には、hsl、mix 関数などのいくつかの関数が付属しています。

**例 1: ボタン コンポーネントのクリック カラーは、複数の色を一定の割合で混合して別の色を生成します。 **以下の通り:

＆：集中 {   
  色: mix($--color-white、$--color-primary、$--button-hover-tint-percent);    
  境界線の色: 透明;    
  背景色: 透明;}  
＆：アクティブ {    
  色: mix($--color-black, $--color-primary, $--button-active-shade-percent);   
  境界線の色: 透明; 背景色: 透明;  
}

10. 関連するSCSS組み込み関数の適用

@for ディレクティブは、制限された範囲内でスタイルを繰り返し出力することができ、そのたびに変数の値に応じて出力結果が変更されます。

例 1: たとえば、プロジェクトでは、hwicon クラスの 2 番目から 8 番目の div 子ノードのスタイルを次のように設定する必要があります。

@for $i は 2 から 8 まで {    
.com-hwicon {      
 > div:n番目の子(#{$i}) {  
    位置: 相対的;  
    フロート: 右;    
   }    
 }  
}

11. 各トラバーサル、マップデータ型、@mixin/@includeミキサー、#{}補間の組み合わせ使用

各トラバーサル、マップ データ型、@mixin/@include ミキサー、#{} 補間を組み合わせることで、異なるセレクター クラスを生成できます。各セレクター クラスの背景画像は、以下に示すように異なります。

$imgリスト: (    
 (アクセス、$papers-access)、   
  (フォルダイメージ、$papers-folder)、  
  (bmpimg、$papers-bmp)、    
  (xlsimg、$papers-excel)、    
  (xlsximg、$papers-excel)、    
  (gifimg, $papers-gif),   
  (jpgimg, $papers-jpg)、    
  (不明画像、$papers-不明) 
 ); 
 $img-list 内の各 $label、$value { 
  .com-hwicon__#{$label}  
    共通画像($value)を@includeします。   
 }  
}

12. スタイルコードのチェックと検証 - stylelint プラグイン

CSS は厳密な意味ではプログラミング言語とは言えませんが、フロントエンドシステムでは過小評価できません。 CSS は記述ベースのスタイルシートです。記述がわかりにくく、ルールがない場合は、他の開発者、特に強迫性障害を持つ開発者にとって間違いなく時限爆弾となります。 CSS はシンプルに見えますが、美しい CSS を書くのはやはりかなり難しいです。したがって、CSS ルールを検証するアクションが差し迫っています。 Stylelint は、開発者が一貫した規則に従い、スタイルシートのエラーを回避できるようにする強力な最新の CSS チェッカーです。

**(1) gulp、stylelint、gulp-postscss、postcss-reporter、stylelint-config-standardをインストールする必要があります。インストールコマンドは次のとおりです。

npm インストール gulp stylelint gulp-postscss postcss-reporter   
stylelint-config-standard --save-dev

（2）インストールが完了すると、プロジェクトのルートディレクトリにgulpfile.jsファイルが作成されます。gulpfile.jsファイルの構成は次のとおりです。

var レポーター = require('postcss-reporter');  
stylelint を require します。  
var スタイルリント設定 = {    
  '拡張': 'stylelint-config-standard',   
  'ルール': {      
  'at-rule-no-unknown': [  
     真実、 {        
     '無視ルール': [    
     '伸ばす'、       
      '含む'、  
      「ミックスイン」、       
      'のために'       
      ]     
     }  
   ]  
  }  
};  
gulp.task('scss-lint', 関数() {
    var プロセッサ = [     
    スタイルリント(スタイルリント設定)     
    レポーター({       
      クリアメッセージ: true、      
      throwError: 真      
   })    
   ];    
 gulp.src( を返す    
   ['src/style/*.scss']// ツールでチェックする必要がある scss ファイル).pipe(postcss(processors));});  
 gulp.task('default', ['scss-lint']);

（３）stylelint-config-standard検証ルール

stylelint-config-standard は stylelint が公式に推奨する標準検証ルールです。具体的な検証ルールについては公式サイトを参照してください。

（4）スタイルをチェックするコマンドを実行する13.スタイル自動修復プラグイン - stylefmtプラグイン

stylefmt は stylelint をベースにしたコード修正ツールです。stylelint のコード標準規則に基づいて設定し、修正可能な領域の出力をフォーマットできます。

(1) gulp.jsの設定ファイルは次のとおりです。

var stylefmt = require('gulp-stylefmt'); // CSSフォーマット自動調整ツール gulp.task('stylefmt', function() {  
  gulp.src( を返す     
  ['src/style/student/index.scss' // ツールチェックが必要な scss ファイル]).pipe(stylefmt(stylelintConfig))  
    .pipe(gulp.dest('src/style/dest/student'));});  
 gulp.task('fix', ['stylefmt']);

（２）下の図のように、スタイルを修復するコマンドを実行します。

14. SCSS 構文を CSS 構文にコンパイルする - gulp-sass プラグイン

最初に SCSS コードを記述したとき、構文に不慣れだったため、記述した SCSS コードによって得られるページ効果は期待したものとは異なっていました。このとき、gulp-sass プラグインを使用して scss コードを監視して、リアルタイムで css コードを生成することができるため、css コードを表示することで、記述した scss コードが正しいかどうかを判断できます。

(1) gulp.jsの設定ファイルは次のとおりです。

gulpsass を require('gulp-sass');  
gulp.task('gulpsass', 関数() {   
  gulp.src('src/style/components/hwIcon.scss') を返します。   
  .pipe(gulpsass().on('error', gulpsass.logError)) でエラーが発生します。     
  .pipe(gulp.dest('src/style/dest'));});  
  gulp.task('watch', 関数() {    
  gulp.watch('src/style/components/hwIcon.scss', ['gulpsass']);  
});

（２）コマンドを実行してscssファイルを監視し、scssコードを動的にコンパイルしてcssコードファイルを生成します（次の図を参照）。

SCSS スタイル コードを 50% 削減する 14 の実践的な経験についての記事はこれで終わりです。SCSS スタイルを削減する関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。