SCSS

注記

このページの日本語版はGoogle翻訳による機械翻訳です。

概要

CSS プリプロセッサ (CSS プリプロセッサ言語) は、CSS の拡張スクリプト言語であり、プログラミング言語のように CSS 構文を記述し、それを純粋な CSS にコンパイルするのに役立ちます。 現在、SASS、SCSS、LESS、Stylus、PostCSS など、多くの CSS プリプロセッサがあります。

SASS/SCSS は、CSS をより速く、より明確な構造で作成できるようにする CSS プリプロセッサです。 SASS と SCSS の本質は同じで、記述方法が異なるだけです。

SASS (Syntactical Awesome StyleSheets) は Ruby のような構文を使用し、拡張子 .sass を持ち、コードのブロックを区切るためにインデントを使用し、宣言を区別するために改行を使用します。そのような CSS の書き方は純粋な CSS に「近い」わけではありません。 SASS コードを理解して読むのは困難です。

.c-title 
	color: #fff
	font-size: 50px

2010 年に SASS バージョン 3.0 がリリースされ、拡張子 .scss を持つ SCSS (Sassy CSS) と呼ばれる新しい構文 (アップグレード) が導入されました。 SCSS 構文は CSS にとってよりフレンドリーであり、よりシンプルで理解しやすい方法で CSS を作成するのに役立ちます。

.c-box { 
	padding: 20px;
	.c-box__title {
		color: #fff;
		font-size: 50px;
	}
}

現在、AGL もプロジェクトに SCSS を使用しています。

SCSS を使用する理由

• SCSS は CSS と似た構文を持っているため、学習しやすく、理解しやすく、適用しやすい...
• SCSS はネスト機能を提供し、標準の CSS よりもはるかに簡潔かつ高速にコードを作成できます**。
• SCSS は CSS および SASS で利用可能なすべての機能をサポートできます。
• SCSS では、変数、ミックスイン、拡張機能などの機能により コードの再利用が可能になり、開発者は開発、修復、メンテナンスにかかる時間を大幅に節約できます。
• すべての CSS バージョンと互換性があります。

SCSS の基本機能

1. Variables (変数)

変数は、スタイルシート全体で再利用したい情報を保存する方法と考えてください。
色、フォント スタック、再利用したいと思われる CSS 値などを保存できます。
SCSS は $ 記号を使用して何かを変数にします。 以下に例を示します。

/* Scss */
$font-stack: Helvetica, san-serif;
$primary-color: #333;

body{
    font: 100% $font-stack;
    color: $primary-color;
}

/* Css */
body{
    font: 100% Helvetica, sans-serif;
    color: #333;
}

SCSS が処理されると、$font-stack と $primary-color に対して定義した変数が取得され、CSS に配置された変数値を含む通常の CSS が出力されます。
これは、ブランドカラーを扱い、サイト全体で一貫性を保つ場合に非常に強力です。

2. Nesting (入れ子)

HTML を作成するとき、HTML には明確なネストされた視覚的な階層があることにおそらく気づいたでしょう。 一方、CSS はそうではありません。
SCSS を使用すると、HTML と同じ視覚的な階層に従う方法で CSS セレクターをネストできます。 ルールが過度にネストされていると、過剰に修飾された CSS が生成され、保守が困難になる可能性があり、一般的に悪い習慣であると考えられていることに注意してください。
それを念頭に置いて、サイトのナビゲーションの典型的なスタイルの例をいくつか示します。

/* Scss */
  
nav{
    ul{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    li{
        display: inline-block;
    }
    a{
        display: block;
        padding: 6px 12px;
        text-decoration: none;
    }
}
 
/* Css */
nav ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
nav li{
    display: inline-block;
}
nav a{
    display: block;
    padding: 6px 12px;
    text-decoration: none;
}

ul、li、および a セレクターが nav セレクター内にネストされていることがわかります。
これは、CSS を整理して読みやすくするための優れた方法です。

3. Modules (モジュール)

すべての SCSS を 1 つのファイルに記述する必要はありません。 @use ルールを使用して任意に分割できます。
このルールは、別の SCSS ファイルをモジュールとしてロードします。つまり、ファイル名に基づく名前空間を使用して、SCSS ファイル内の変数、ミックスイン、関数を参照できるようになります。
ファイルを使用すると、コンパイルされた出力に生成される CSS も含まれます。

/* Scss */
    /*_base.scss*/
    $font-stack: Helvetica, sana-serif;
    $primary-color: #333;

    body{
        font: 100% $font-stack;
        color: $primary-color;
    }
    /*styles.scss*/
    @use 'base';
    .inverse{
        background-color: base.$primary-color;
        color: white;
    }

/* Css */
.box{
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
}

@use 'base' を使用していることに注意してください。 style.scss ファイル内。
ファイルを使用する場合、ファイル拡張子を含める必要はありません。 SCSS は賢いので、あなたのためにそれを解決します。

4. Mixins (ミックスイン)

CSS には、特に CSS3 や多数のベンダー プレフィックスが存在する場合、記述するのが少し面倒なものもあります。
ミックスインを使用すると、サイト全体で再利用する CSS 宣言のグループを作成できます。
値を渡してミックスインをより柔軟にすることもできます。 ミックスインの有効な用途は、ベンダー プレフィックスに使用することです。
以下は変換の例です。

/* Scss */
@mixin transform($property){
    -webkit-transform: $property;
    -ms-transform: $property;
    transform: $property;
}
.box{
    @include transform(rotate(30deg));
}

/* Css */
.box{
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
}

ミックスインを作成するには、@mixin ディレクティブを使用して名前を付けます。 mixin トランスフォームに名前を付けました。
括弧内の変数 $property も使用しているので、必要なものを何でも変換して渡すことができます。
ミックスインを作成した後、@include で始まり、その後にミックスインの名前が続く CSS 宣言としてそれを使用できます。

5. Extend/Inheritance (拡張/継承)

これは SCSS の最も便利な機能の 1 つです。 @extend を使用すると、CSS プロパティのセットをあるセレクターから別のセレクターに共有できます。 SCSS を非常に乾燥した状態に保つのに役立ちます。
この例では、@extend のプレースホルダー クラスと連携する別の機能を使用して、エラー、警告、成功に関する一連の単純なメッセージを作成します。
プレースホルダー クラスは、拡張された場合にのみ出力される特別なタイプのクラスであり、コンパイルされた CSS をきれいに保つのに役立ちます。

/* Scss */
    /*This css will print because %message-shared is extended. */
    %message-shared{
        border: 1px solid #ccc;
        padding: 10px;
        color: #333;
    }
    /*This css won't print because %equal-heights is never extended. */
    %equal-heights{
        display: flex;
        flex-wrap: wrap;
    }
    .message{
        @extend %message-shared;
    }
    .success{
        @extend %message-shared;
        border-color: green;
    }
    .error{
        @extend %message-shared;
        border-color: red;
    }
    .warning{
        @extend %message-shared;
        border-color: yellow;
    }

/*Css*/
    /*This css will print because %message-shared is extended. */
    .message, .success, .error, .warning{
        border: 1px solid #ccc;
        padding: 10px;
        color: #333;
    }
    .success{
        border-color: green;
    }
    .error{
        border-color: red;
    }
    .warning{
        border-color: yellow;
    }

上記のコードは、.message、.success、.error、.warning に %message-shared と同じように動作するように指示しています。
つまり、%message-shared が表示される場所であれば、.message、.success、.error、.warning も表示されます。
魔法は生成された CSS で起こり、これらの各クラスは %message-shared と同じ CSS プロパティを取得します。 これにより、HTML 要素に複数のクラス名を記述する必要がなくなります。
SCSS ではプレースホルダー クラスに加えて、ほとんどの単純な CSS セレクターを拡張できますが、スタイル内の別の場所でネストされているクラスを拡張しないようにするには、プレースホルダーを使用するのが最も簡単な方法です。これにより、CSS 内に意図しないセレクターが生成される可能性があります。
%equal-heights は決して拡張されないため、%equal-heights の CSS は生成されないことに注意してください。

6. Operators (オペレーター)

CSS で計算を行うと非常に役立ちます。 SCSS には、+、-、*、/、% などの標準的な算術演算子がいくつかあります。
この例では、簡単な計算を行って余談と記事の幅を計算します。

/*Scss*/
    .container{
        width: 100%;
    }
    .article[role="main"]{
        float: left;
        width: 600px / 960px * 100%;
    }
    .aside[role="complementary"]{
        float: right;
        width: 300px / 960px * 100%;
    }

/*Css*/
    .container{
        width: 100%;
    }
    .article[role="main"]{
        float: left;
        width: 62.5%;
    }
    .aside[role="complementary"]{
        float: right;
        width: 31.25%;
    }

SCSS の高度な機能

👉 詳細はこちら

参照

• Sass Basics
• What Is SCSS? Learn How To Use SCSS To Style HTML
• https://topdev.vn/blog/sass-scss-la-gi/
• https://viblo.asia/p/sassscss-la-gi-tim-hieu-cach-viet-css-bang-sassscss-GrLZDxrVZk0