SCSS導入🎨

注:私はこの小さなガイドでSCSSシンタックスで働いています、しかし、SASSとSCSSは非常に類似しています、そして、ほとんどすべての例は両方のために働きます.
私はしばらくの間242479152について知っています、しかし、私が純粋なCSSが十分に仕事をしていたと思ったので、私は潜入しませんでした.
SCSSを使用して数週間後、ここに私の個人的な意見です.純粋なCSSは十分です、しかし、一度SSSで働いて、それは再びCSSコードを書くことを本当にイライラしています..
SCSSは、フロントエンドの開発者として私たちの生活を容易にするテーブルの上にクールな機能をもたらし、私は誰に興味を持って簡単に紹介を書きたいと思った.

サバ セットアップ

残念なことに、ブラウザはSCSSを理解しません、あなたのSSSコードを使用する前に、それはコンパイルされる必要があります.
➡️ を使用している場合は、単にVSCodeを使用できます.
エクステンションがインストールされると、何かを作成できます.SCSS/.sassファイルをクリックして時計のSassボタンをクリックします.
Live SASS Compiler

あなたは既に行って良いです!保存するたびに自動的に変更をコンパイルします.
➡️ 別のオプションは、あなたのマシン上でグローバルにSASSコンパイラをインストールすることです.npm install -g sass次に、以下のようにCLIからscssファイルをコンパイルします.sass --watch index.scss index.css詳細については、公式のに向かいます.
➡️ 最後に、あなたが反応または他のJavascriptフレームワークを使用しているウェブアプリを構築しているならば、それはたぶん箱から働きそうです.
私は個人的に反応して作成し、任意のアプリケーションを作成すると、アプリケーションのテンプレートは、デフォルトでSCSSをサポートしています.フードの下では、documentationはSSSのローダを使用してSSSコードをコンパイルします.

Webpack 機能

➡️ 変数はCSSによってもサポートされていますが、SCSSは変数を宣言して使用するための構文を使用しています.

$robotoFont: 'Roboto', sans-serif;
$color: (
  primary: #fff,
  secondary: #000,
);

body {
  font-family: $robotoFont;
  background-color: map-get($color, secondary);
}

私は、変数で働くことがどれくらい役に立つかについてあなたの注意を指し示す必要がないと思います.あなたのコードを使用して再利用し、データをより簡単にあなたのアプリケーション全体共有共有.
➡️ 入れ子は、HTMLの要素を選択する新しい方法を紹介します.親から特定の要素を対象とすることができます.

body {
  margin: 0;

  header {
    background-color: red;

    button {
      width: 200px;
      height: 200px;

      &:hover {
        background-color: blue;
      }
    }
  }
}

これは擬似クラスを使用する方法です.
➡️ ルールで新しい機能を追加します.私はそれらのすべてを通過しません、しかし、私にこれをあなたに見せさせてください.

/* second.scss */
$color: red;

@forward 'second.scss';

/* index.scss */
@use 'second.scss';

body {
  background-color: $color;
}

あなたの変数とミックス(これは私が紹介する次の機能です)をエクスポートします@フォワードとSCSSファイルから@ useをインポートします.
➡️ ミックスを使用すると、スタイルシート間で再利用できるスタイルを定義できます.ミックスのおかげで“フロート左”や“フレックスセンター”のようなクラスを避けることができます.

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

@mixin formButton($color) {
  border-radius: 10px;
  background-color: rgba($color: #000000, $alpha: 0);
  color: $color;
  border: solid 3px $color;

  &:hover {
    background-color: $color;
    color: #fff;
    cursor: pointer;
  }
}

form {
  @include centerFlex;

  button {
    @include formButton(blue);
  }
}

新しいスタイルを宣言して、あなたの要素でそれを輸入してください.あなたのMixinの宣言でパラメータを渡す🤸.
➡️ 機能、条件、およびループは利用可能な別の強力な機能です.あなたが一般的にプログラミング言語に精通しているならば、あなたは快適に感じなければなりません.

@function getHeight($width, $ratio) {
  @return $width / $ratio;
}

div {
  width: 200px;
  height: getHeight(200px, 4);
}

@関数を使用して関数を宣言し、名前と括弧(およびオプションの引数)を使って呼び出します.

@mixin drawCircleOnly($width, $height) {
  width: $width;
  height: $height;
  @if $width = $height {
    border-radius: 50%;
  } @else {
    display: none;
  }
}

div {
  background-color: black;
  @include drawCircleOnly(100px, 100px);
}

条件付きで@ ifと.式がtrueを返す場合、コードは実行されます.

@for $i from 1 through 5 {
  .section-#{$i} {
    background-color: black;
    width: 10px * $i;
  }
}

ループのおかげで、同じようなコードを複数回書くことは避けてください.あなたのカウンタを初期化、あなたのコードを一度書いて、あなたは良いです!
➡️ ボーナス!SSSコードを変換するときに、コンパイラが自動的に追加されます- WebKitsはより広いブラウザのサポートを提供するために、あなたはそれについて考える必要はありません、どのようにクールですか?

/* index.scss */
div {
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(180deg);
}

/* index.css */
div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

結論

SCSSはあなたのフロントエンド開発ツールキットに大きな追加です.これは便利な機能を持っていると簡単に始めることです.より多くの会社は、理由のために、CSSプリプロセッサで最近働きます.
私はあなたが読んで楽しんで、すぐにお会い!