ジョイ:スパークスジョイ

SassScript、またはSassは、私たちのスタイルを変更している.開発者として、我々は常に効率を高める方法を見つけるしようとしている.SSSは長いCSSファイルを通して構造を持たないようにコード化するのではなく、いくつかの非常に身近な構文でコードを合理化する方法を導入しました.実際には、SSSファイル内のすべてのCSSコードを書くことができるように、それは完全に互換性があることを知っている.もちろん、それを行うにはポイントがありませんが、アイデアは、あなたがsassを使用できるように完全に新しい言語を学ぶ必要はないということです.あなたはより快適になるように小さな変更を行うことができますし、より良い効率的なコードを作成すると、すべてのトリックsassは、syntactically awesome style sheetsでもたらす学ぶ.
SASSはプリプロセッサです.言い換えれば、それはCSSの拡張ですが、それはブラウザで読み取ることができない形式です.このため、コンパイラが必要になります.VSコードを使用している場合は、Live Sass Compilerという拡張モジュールがインストールできます.VSコードを持っていないなら、sass-lang.comで始めるいくつかの他の方法があります.
それで、何がSassについてとても大きいですか?初心者のために、あなたはあなたの素晴らしいコードの全てを含むCSSファイルを持っていると言いましょう、そして、あなたのクライアントはテキストの色を変えたいです.あなたがこの色を使用して、今狩りをしなければならなくて、彼ら全員を変えなければならない異なるセレクタのすべてについて考えてください.明らかに、これはD . R . Y .の違反です.それは1つの場所で色を変更するだけでより効率的ではないだろうか?SASSを使用すると、繰り返しのコードを置き換える変数を作成することができます.変数は以下のような'$'接頭辞から始まり、プロパティ値として使用できます.

$color-primary: #8429FF

p {
    color: $color-primary;
}

入れ子によってグループ化することもできます.これは、HTMLで見られる入れ子になった要素に視覚的な類似性を持っています.CSSでアンカーセレクタを作成すると、スタイルはページ上のすべてのアンカーに影響します.あなたが異なる方法でナビゲーションバーのアンカーをスタイルにしたいならば、あなたは簡単にNassをSASSでネスティングすることによって目標とすることができます.NAVのアンカータグだけがこのスタイリングの影響を受けるでしょう.もちろん、これはちょうど1つの例です、そして、同様にナビゲーション以外の他の地域を巣に入れることができます.

nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    li {
        display: inline-block;
    }
    a {
        color: $color-secondary;
        text-decoration: none;
    }
}

これは、機能的に視覚的に分離を作成するための本当に簡単な方法です.sassを使ってグループを作るもう一つの方法はモジュールシステムです.2019年に導入されましたが、CSSファイルを1つのアプリケーションで使用することができますが、複数のファイルを使用する場合、CSSは複数のHTTPリクエストを作成しなければなりません.一方、SASSモジュールは一つの大きなCSSファイルにコンパイルされます.
モジュールを示すために、ファイル名はアンダースコアから始めなければなりません.これにより、コンパイラはファイルが部分的であることを知ることができます.あなたがブランディングの色を格納するために別のファイルを持っているとしましょう.アンダースコアプレフィックスを使用して新しいSCSSファイルを作成します.

_branding.scss

このファイルでは、カラースキームに関連する変数があります.他のモジュールのモジュールから色を使用したい場合は、@ useとファイル名で読み込みます.次に、変数を参照するときにファイル名に基づいて名前空間を参照します.

@use 'branding';

body {
    background: branding.$color-primary;
}

ファイル名が特に長い場合は、' as 'を短くすることもできます.上記の「ブランディング」は特に長い名前ではありませんが、例として以下でそれを使用します.

@use 'branding' as brand;

body {
    background: brand.$color-primary;
}

2020年10月の時点で、SASSは、モジュールにアクセスする@ importメソッドが推奨されず、すぐに廃止されると発表しました.@ importを使用するとき、モジュールは、例えば、異なるモジュールが同じ名前を含むならば、予想外の副作用を引き起こすグローバルに利用できます.モジュールを利用するには、上記の@ useメソッドでアクセスします.
再利用可能なスタイルを作成する別の方法は、mixinです.何かを中心に何かコードを使用してください.SASSでは、一度コードを書くことができますし、複数の領域で実装します.ミックスを使用するには、単に
そして、あなたが通常プロパティを書くMixinの名前.

@mixin center() {
    display: flex;
    justify-content: center;
    align-items: center;
}

header {
    @include center();
}

ミックスもよりダイナミックにするためにパラメータを取ることができます.上記の例を追加すると、パラメーターを追加して、その使用に応じて適切にセレクタをどのように調整するかについて、後で決定を行うことができます.パラメータは'$'プレフィックスから始まります.

@mixin center($direction) {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: $direction;
}

header {
    @include center(column);
}

MixinsはSASSの特徴でもある機能に似ていますが、その関数は何かを返す必要があります
私がKevin Powellから学んだ非常に便利なトリックを見てみましょう.たぶん、あなたは色をちりばめているし、暗いか明るい背景が、それを変更するたびに、あなたが可視性のためのテキストの色を変更する必要があるかどうかを決定することはできません.変更を処理する関数を作成できます.SASSでは、条件文を使用することもできます.下の例では、渡される背景色の明るさを評価し、適切な値を返します.

@function text-color($bg-color) {
    @if (lightness($bg-color) > 60) {
        @return #555;
    } @else {
        @return #fff;
    }
}

SASSのもう一つの重要な機能は、継承を使用する能力です.セレクタのプロパティは、@ extendsを使用して他のセレクタに渡すことができます.CSSと同じように、ファイルが一番上から下に読み込まれるので、コードが同じ名前のプロパティが続く場合、一番下のコードが実行されます.

h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
    text-align: center;
    padding: 10px;
}

h4 {
    @extend h1;
    font-weight: 400;
}

上記のコードのクリーナーとより効率的にするためのSASSの基本的ないくつかの機能です.あなたはsass-lang.comで探検する他のヒントやトリックの多くを見つけることができます.