フロントエンドアーキテクトテクノロジー Sass

1 CSS の欠点

CSS はプログラミング言語ではなく単なるマークアップ言語であるため、変数をカスタマイズしたり参照したりすることはできません。CSSには主に以下のようなデメリットがあります。

CSS は非手続き型言語であり、変数、関数、SCOPE（スコープ）などの概念がありません。
CSS では、一見非論理的に見えるコードを大量に記述する必要があり、コードの冗長性は比較的高くなります。
CSS はそれほど優れた計算能力を持っていません。
維持や拡張が不便であり、再利用には向きません。

2 サスとは

実際の開発プロセスにおける CSS の問題を解決するには、Sass (CSS プリプロセッサ) を使用してページスタイルを実装します。

Sass は、成熟した安定した強力なプロフェッショナルグレードの CSS 拡張言語です。
CSSを強化するための補助ツールです。
CSS 構文に基づいて、変数、ネストルール、ミックスイン、インラインインポートなどの高度な機能が追加され、CSS がより強力かつエレガントになります。
Sass および Sass スタイルライブラリ (Compass など) を使用すると、スタイルファイルをより適切に整理および管理し、プロジェクトをより効率的に開発できます。
Sass は、CSS のすべてのバージョンと完全な互換性があります。

肝心なのは、書くコードを減らして、より多くのスタイルを実装するということです。

3 Sass コンパイル

Sass オンラインコンパイルツールツールを使用してコンパイルする
VScode は、自動コンパイル用の Easy Sass プラグインをダウンロードしてインストールします。
VScode は、自動コンパイル用の Live Sass Compilerv プラグインをダウンロードしてインストールします。

// Live Sass 配置
"liveSassCompile.settings.generateMap": false,
"liveSassCompile.settings.autoprefix": [
    "> 1%",
    "last 2 versions"
],
"liveSassCompile.settings.excludeList": [
    "**",
    "**/node_modules/**",
    ".vscode/**"
],
"liveSassCompile.settings.formats": [
    {
    
    
        "format": "compressed",
        // "format": "expanded",
        "extensionName": ".min.css",
        "savePath": "~/../css/"
    }
]

4 Sassの基本的な使い方

4.1 Sass の構文形式

1 つは、Indented Sass と呼ばれる最も初期の Sass 構文形式で、「Sass」とも呼ばれる、簡略化された形式です。この形式の拡張子は「.sass」です。(推奨されなくなりました)
もう 1 つの構文形式は SCSS (SassyCSS) です。この形式は CSS3 構文に基づいてのみ拡張されています。すべての CSS3 構文は SCSS で共通ですが、Sass の機能が追加されています。この形式の拡張子は「.scss」です。(現在使用中)

4.2 Sass 変数

Sass は、$highlight-color や $sidebar-width などの変数を識別するために "$" 記号を使用します。

Sass 変数の宣言は、CSS プロパティの宣言と似ています。

$color: #F90;

CSS プロパティ値として使用できる割り当ては、スペースやカンマで区切られた複数のプロパティ値であっても、Sass 変数値として使用できます。

$basic-border: 1px solid black;
$plain-font: "Myriad Pro", "Myriad", "Helvetica", "Neue", "Helvetica";

変数の定義が完了した後は、変数が参照されない限り、その変数は有効になりません。

変数は、CSS プロパティの標準値 (1px や太字など) が存在できる場所であればどこでも使用できます。

CSS が生成されると、変数はその値に置き換えられます。後で別の値が必要になった場合は、この変数の値を変更するだけでよく、この変数を参照するすべての場所で生成される値もそれに応じて変更されます。

$color: #F90;
.selected {
  border: 1px solid $color;
}

特殊変数: 変数を文字列に埋め込む必要がある場合は、#{} で記述する必要があります。

$side: left;
.rounded {
    border-#{$side}-radius: 5px;
}

4.3 Sass の操作

Sass は、数値の加算 (+)、減算 (-)、乗算 (*)、除算 (/)、剰余 (%) などの演算をサポートしており、必要に応じて、異なる単位間の値を変換します。たとえば、1in + 8pt は 1.111in に変換されます（pt の正式名称はポイントで、自然な長さの単位です。1in=72pt です。この式によれば、1in+8pt の変換結果は 1.111in となります）。

// 编译前
p {
    width: 1in + 8pt;
}
// 编译后
p {
    width: 1.111in; 
}

「/」記号は通常、CSS で数値を区切るのに使用され、Sass では「/」に除算演算の機能も与えられますが、この 2 つは矛盾しません。

言い換えれば、Sass で 2 つの数値を「/」で区切ると、コンパイルされた CSS ファイルでも同じ効果が得られます。

// 编译前
p {
    font: 10px/8px;
    $width: 1000px;
    width: $width/2;
    height: (500px/2); 
    margin-left: 5px + 8px/2px; 
}
// 编译后
p {
    font: 10px/8px;
    width: 500px;
    height: 250px;
    margin-left: 9px; 
}

「/」演算子を使用するコードをコンパイルする場合、フォントがかっこで囲まれていないため、フォントのコンパイル結果は変更されません。

変数を使用すると同時に、「/」記号が分割されておらず、CSS ファイルに完全にコンパイルされていることを確認する必要がある場合は、#{} 補間ステートメントで変数をラップするだけで済みます。

p {
    $font-size: 12px;
    $line-height: 30px;
    font: #{$font-size}/#{$line-height};
}

通常の値は「/」で演算され、括弧で囲む必要があります。
変数値を「/」で演算する必要はなく、変数を #{} 補間ステートメントでラップする必要があります。

4.4 Sass のネスト

Sass は、変数に基づいたより強力なツール、つまりルールのネストを提供します。

Sass 変数は、ルールのネストと併用した場合にのみ強力になります。

CSS を使用してコードを記述する場合、セレクターを繰り返し記述するのは非常に面倒であることがわかります。

たとえば、ページの同じブロックを指す一連のスタイルを大量に記述したい場合、同じ ID またはクラス名を何度も記述する必要があることがよくあります。

#content article h1 {
    
     color: #333 }
#content article p {
    
     margin-bottom: 1.4em }
#content aside {
    
     background-color: #eee }

.box article h1 {
    
     color: #333 }
.box article p {
    
     margin-bottom: 1.4em }
.box aside {
    
     background-color: #eee }

Sass は CSS をコンパイルおよび出力するときにこれらのネストされたルールを自動的に処理し、コードの重複を回避し、スタイルを読みやすくします。Sassは一度書くだけで実装できます。

#content {
    article {
        h1 { color: #333 }
        p { margin-bottom: 1.4em }
    }
    aside { background-color: #eee }
}
.box {
    article {
        h1 { color: #333 }
        p { margin-bottom: 1.4em }
    }
    aside { background-color: #eee }
}

border-color プロパティなど、プロパティをネストすることもできます。これは次のように記述できます。

// 编译前
.box {
    border: {
        color: red;
    }
}
// 编译后
.box {
    border-color: red;
}

注: ネストされた属性 (境界線) の後にはコロンを付ける必要があります。

ネストされたコードブロック内では、& を使用して親要素を参照できます。例: hover 疑似クラスは次のように記述できます。

// 编译前
.box {
    &:hover { color: red; }
}
// 编译后
.box:hover {
    color: red;
}

4.4 Sass コメント

Sass には 2 つのコメントスタイルがあります

単一行のコメントは// 注释Sass ソースファイルにのみ保持され、コンパイルされたファイルには保持されません。
標準の CSS コメントは/* 注释 */コンパイルされたファイルに保持され、圧縮時に削除されます。
- 重要なコメントであることを示すために、標準コメントの後に感嘆符を追加します/*! 重要注释 */ 。圧縮モードでは、著作権ステートメントなどのコメントも保持されます。

5 コードの再利用

5.1 Sassの継承

Sass では、継承により、あるセレクターが別のセレクターのすべてのスタイルを継承できます。継承には @extend コマンドを使用します。

// 编译前
.alert{
    padding: 15px;
}

.alert a{
    text-decoration: none;
}

.alert-info{
    @extend .alert;
    background-color: lightblue;
}
// 编译后
.alert, .alert-info {
  padding: 15px;
}

.alert a, .alert-info a {
  text-decoration: none;
}

.alert-info {
  background-color: lightblue;
}

プレースホルダーセレクター % を使用します。Sass 3.2.0 以降では、プレースホルダーセレクター % を定義できます。この利点は、それを呼び出さなくても冗長な CSS ファイルが存在しないことです。

// 编译前
%h1 {
    font-size:20px;
}
div {
    @extend %h1;
    color:red;
}
// 编译后
div {
    font-size:20px;
    color:red;
}

5.2 ミックスイン

ミックスインは、再利用できるコードの塊です。

@mixin コマンドを使用してコードブロックを定義します。
@include コマンドを使用して、このミックスインを呼び出します。

@mixin alert {
    color:#ccc;
    background-color:red;
}
div {
    @include alert;
}

Mxin の優れた点は、パラメーターとデフォルト値を指定できることです。使用する場合は、必要に応じてパラメーターを追加します。

@mixin alert($color:red) {
    color:#ccc;
    background-color:$color;
}
div {
    @include alert(blue);
}

Mixin を使用してブラウザーのプレフィックスを生成できます。

// 设置关键帧
@mixin keyframes($name) {
    @-webkit-keyframes #{$name} {
        @content;
    }
    @-moz-keyframes #{$name} {
        @content;
    }
    @-o-keyframes #{$name} {
        @content;
    }
    @keyframes #{$name} {
        @content;
    }
}
// 引入
@include keyframes(scale) {
    100% {
        transform: scale(0.8);
    }
}
// css编译后
@-webkit-keyframes scale {
    100% {
        transform: scale(0.8);
    }
}
@-moz-keyframes scale {
    100% {
        transform: scale(0.8);
    }
}
@-o-keyframes scale {
    100% {
        transform: scale(0.8);
    }
}
@keyframes scale {
    100% {
        transform: scale(0.8);
    }
}

@mixin rounded($attr, $value) {
    #{$attr}: $value;
    -moz-#{$attr}: $value;
    -webkit-#{$attr}: $value;
}
#navbar li {
    @include rounded(border-radius, 8px);
}

5.3 色の関数

Sass には、一連の色を生成するための組み込みの色関数がいくつか用意されています。

lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c

5.4 ファイルの挿入

@importコマンドを使用して外部ファイルを導入し、インポート後は外部ファイル内の変数などを利用できるようになります。

@import "base.scss";

ファイルが挿入された場合は.css、CSS import コマンドと同等です。

@import "base.css";

6 高度な使い方

6.1 条件文

@ifによる判定とそれに対応する@elseコマンドが利用可能

// Sass样式
$type: monster;
div {
    @if $type == ocean {
        color: blue;
    } @else if $type == matador {
        color: red;
    } @else if $type == monster {
        color: green;
    } @else {
        color: black;
    }
}
// css编译后样式
div {
    color: green;
}

**三眼判定:** 構文は if($condition, $if_true, $if_false) です。

3 つのパラメーターはそれぞれ、条件、条件が true の場合の値、条件が false の場合の値を表します。

if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px

$box: red;
$fontSize: if($box==red, 16px, 14px);
.box {
    font-size: $fontSize;
}

6.2 ループステートメント

for ループには次の 2 つの形式があります。

@for $var from <start> through <end>
@for $var from <start> to <end>

$var は変数を表し、start は開始値を表し、end は終了値を表します。2 つの形式の違いは、through には終了値が含まれるのに対し、to には終了値が含まれないことです。

@for $i from 1 to 10 {
    .border-#{$i} {
        border: #{$i}px solid blue;
    }
}

while ループ

$i: 6;
@while $i > 0 {
    .item-#{$i} {
        width: 2em * $i;
    }
    $i: $i - 2;
}

各コマンドは for に似ています

構文はです@each $var in <list or map>。
$var は変数を表します

@each $member in a, b, c, d {
    .#{$member} {
        background-image: url("/image/#{$member}.jpg");
    }
}

6.3 カスタム関数

Sass を使用すると、ユーザーは @function で始めて @return で値を返す独自の関数を作成できます。

// 常规用法
@function double($n) {
    @return $n * 2;
}
#sidebar {
    width: double(5px);
}

// 常用用法
$fontSize: 100px;
@function pxTorem($px) {
    @return $px / $fontSize * 1rem;
}
div {
    font-size: pxTorem(24px);
}
// css编译后样式
div {
    font-size: .24rem;
}

7 練習課題

Sass 構文を使用してモバイルスタイルシートを最適化する