本のSassクラッシュコース

🤷‍♂️SASSとは
SASS(構文的に素晴らしいスタイルシートの略)は、変数、ネストされたルール、インラインインポート、およびその他のようなものを使用することができるCSSの拡張です.また、物事を整理し、より速くスタイルシートを作成することができます.
SASSを使用する利点は、SASSはCSSのすべてのバージョンと互換性があるということです.
継続する前に、私はあなたにこの完全な記事を読んで、それから15分である私のSassクラッシュコースビデオを見ることを奨励します.このように、あなたの記憶はいつもよりずっと長く残るでしょう.

15分で本のSassクラッシュコース

01📦SASS変数を格納するデータ
CSSと異なるSASSの特徴は、変数を使用することです.データをJavaScriptと同様の変数として格納するように宣言できます.
JavaScriptでは、変数はletとconstキーワードを使用して宣言されます.sassでは変数は変数名の後に$で始まります.

ここでは、実際の例です🔻
名前を繰り返すことなく、別の場所で成功色'緑'を使用する必要があるとしましょう.したがって、次のようなコードを書く必要があります.

$success-color: green;

このようにグローバル変数を使用します.

.success {
color: $sucess-color;
}

h3 {
color: $success-color;
}

変数が有用な1つの例は、多くの要素が同じ色である必要があるときです.その色が変わるならば、コードを編集する唯一の場所は変数値です👌.

02🤏ネストCSS
SASSは、スタイルシートを整理する便利な方法であるHTMLの同じビジュアル階層に従ってCSSセレクタをネストさせます.
通常、各要素は、そのようにスタイルを変えるために異なる行を対象とします👇
ネスティングなしで

footer {
background-color: #000;
}

footer ul {
list-style: none;
}

footer ul li {
display: flex;
}

ネスティング後

footer {
  background-color: #000;

  ul {
   list-style: none;

   li {
    display: flex;
   }
  }
}

これは入れ子が子要素の規則をそれぞれの親要素内に配置することでコードを整理するのに役立ちます.

03🧣ミックスを使用して再利用可能なCSSを作成する
SASSでは、mixinはCSS宣言のグループです.それで、我々は我々のスタイルシートで彼らを再利用することができます.
あなたがすべてのブラウザと完全に互換性がある前に、新しいCSS機能が時間がかかるということを知っているように.機能はブラウザに採用されているので、それらを使用してCSSのルールは、ベンダーの接頭辞を必要とする場合があります.B * OX Shadow *プロパティの例として.
ミックスなしで:

.card {
  -webkit-box-shadow: 0px 0px 4px #fff;
  -moz-box-shadow: 0px 0px 4px #fff;
  -ms-box-shadow: 0px 0px 4px #fff;
   box-shadow: 0px 0px 4px #fff;
}

想像して、私たちのボックスの影のさまざまな影響を持つ当社のウェブサイト上でカードの種類が異なる.すべてのブラウザをサポートするためにこの規則を書き直すことは、たくさんのタイプです.
これはミックスが来るところです.ミックスはCSSのJavaScript関数のようです.以下に書く方法を示します.
mixed

@mixin box-shadow($x, $y, $blur, $c) {
  -webkit-box-shadow: $x $y $blur $c;
  -moz-box-shadow: $x $y $blur $c;
  -ms-box-shadow: $x $y $blur $c;
   box-shadow: $x $y $blur $c;
}

定義は@ mixinで始まり、カスタム名が続きます.パラメータ(上記の例では$ x , $ y , $ blur , $ c )はオプションです.今すぐボックスシャドウルールが必要なときは、すべてのベンダーの接頭辞を入力する必要がありますミックスの呼び出しを1行だけを呼び出します.
@ mixinを指令と呼ぶ必要があります.目が見える👇

.card {
  @include box-shadow(0px, 0px, 5px, #000);
}

.popup-card {
  @include box-shadow(2px, 2px, 10px, #000);
}

04 .🔍@ ifを使用し、あなたのスタイルにロジックを追加するには
SASSで@ if文はJavaScriptと似ています.任意のスタイルを適用する前に特定の条件を検索するとき、それは非常にSASSで便利です.そうです.

@mixin text-color($val) {
  @if $val == danger {
    color: red;
  }
  @else if $val == success {
    color: green;
  }
  @else {
    color: black;
  }
}

次に、このミックスを異なる場所に適用する必要があります.

h1 {
 @include text-color(danger);
 font-size: 2rem; // We can add additional properties.
}

.sucess-text {
  @include text-color(success);
  font-weight: bold; // We can add additional properties.
}

05➰ループ@ループ
SASSは他のプログラミング言語と同様にいくつかのループオプションを持っています.ループ、@ループ、@ whileループを含みます.これらのループは、CSSコードを生成するための非常に強力なツールです.なぜなら、コード生成を反復可能なタスクに移すことができるからです.

♾SAPループを作成するには@を使います.
SASSでは、@ forは2つの方法で使用されます.これらの2つの方法の主な違いは、「start - to - end」はカウントの一部として終了番号を除外します、そして、「スタートスルー終わり」はカウントの一部として終わり番号を含みます.
以下に例を示します.🔻

@for $i from 1 through 5 {
  .text-#{$i} { font-size: 10px * $i; }
}

は、変数(i)とテキストを組み合わせて文字列を作る構文です.したがって、このsassファイルがcssに変換されると、次のようになります.

.text-1 {
  font-size: 10px;
}

.text-2 {
  font-size: 20px;
}

.text-3 {
  font-size: 30px;
}

.text-4 {
  font-size: 40px;
}

.text-5 {
  font-size: 50px;
}

これは非常に長いグリッドレイアウトやコードの1行で任意のHTML要素を作成する強力な方法です.現在、あなたはあなたのウェブサイトのためにCSSクラスとして利用できる5つの異なるテキストサイズを持ちます.
“start to end”は“start - through - end”と同じです.ただ、“start to end”は、カウントの一部として終了番号を除外します.
はじめに🔻

@for $j from 1 to 6 {
  .text-#{$j} {font-size: 10px * $j}
}

//The result will look like this:
.text-1 {
  font-size: 10px;
}

.text-2 {
  font-size: 20px;
}

.text-3 {
  font-size: 30px;
}

.text-4 {
  font-size: 40px;
}

.text-5 {
  font-size: 50px;
}

ここでは、最後の数(6)がこのループに含まれていないのを見ることができます.

🏹リスト内の項目をマップするには、それぞれを使用します.
@各ルールは、リスト内の各要素またはマップ内の各ペアのスタイルを評価したり、コードを簡単に評価できます.各反復処理が完了すると、変数はリストまたはマップから現在の値に割り当てられます.
地図なしで見てください

@each $color in red, green, yellow {
  .#{$color}-text {color: $color;}
}

地図を見てください.

$colors: (color1: red, color2: green, color3: yellow);

@each $key, $color in $colors {
  .#{$color}-text {color: $color;}
}

あなたが見ることができる、マップはJavaScriptのようにわずかに異なる構文を持っています.そこで、ここで$ key変数がマップのキーを参照するために必要です.$ keyを供給しないならば、コンパイルされたCSSはColor 1 , Color 2 ...そして、実際の値に触れることはありません.
上記のコード例の両方を次のCSSに変換します.

.red-text {
  color: red;
}

.green-text {
  color: green;
}

.yellow-text {
  color: yellow;
}

🔐スタイルを満たすために条件が満たされるまで@を使用します.
SASSでは、@ whileディレクティブとJavaScriptとの違いはありません.条件が満たされるまでCSSルールを作成します.
以前は、重複することなく繰り返しタスクを作成するために@ forのディレクティブを使用します.これは@ whileで行うことができます.
見てみる

$i: 1;
@while $i < 6 {
  .text-#{$i} { font-size: 10px * $i;}
   $i: $i + 1;
}

そこで、まず変数を取り、1に設定します.次に、$ iが6より小さい間、@ whileディレクティブで条件をチェックして、異なるサイズのテキストを作成します.CSSルールを設定した後に無限ループを避けるために$ Iを1ずつインクリメントしてください.

06 .🗳あなたのスタイルをより小さなチャンクに分割するために
部分的には、下位のアンダースコア、すなわちE : Eという名前のSASSファイルです.SCSSアンダースコアは、特定のファイルが部分的でCSSファイルに生成されないことをSASSに知らせます.sassパーティションは@ importディレクティブで使用することを意図しています.これは、モジュールに似たようなコードをグループ化する素晴らしい方法です.
例えば、あなたのすべてのテキスト・カラーが別々のsassファイルに保存されるならば、「Count TextColor . scss」と呼ばれて、あなたはメインで彼らを望みます.scssモジュールは、メインのsassファイルで使用する方法です.

@import 'textColor'

インポート文でアンダースコアとファイル拡張子を指定する必要はありません.Sassが理解するので、それは部分です.部分がファイルにインポートされると、すべてのテキストの色、ミックス、およびコードの他の束が使用可能です.

07.💱CSSスタイルのセットを
@ extendsは、クラスが互いの特性のセットを共有するのを許容するSASSの特徴です.
たとえば、CSS規則スタイルの下のブロック.カードクラス.それは背景色、幅、高さのようないくつかのプロパティを持っています.

.card {
  background-color: #fff;
  width: 200px;
  height: 150px; 
}

これで「popup card」という別のカードが欲しい.これは基本の“カード”クラスと同じプロパティを持っています.しかし、ポップアップカードに追加のプロパティが必要です.ベースクラスからターゲットクラスにコピー・ペーストすることができます.しかし@ extendsディレクティブでそれを行うにはずっと良い方法があります.
見てみる

.popup-card {
  @extend .card;
  border-radius: 5px;
  background-color: #349db;
}

ご覧のように、基本クラスのスタイルをターゲットクラスに上書きすることで、値を再割り当てできます.さもなければ、私たちは私たちの追加のスタイルと同様にベース“. card”と同じ特性を持ちます.

あなたが私の記事と説明ビデオが好きならば、私がこのようにより多くの内容をするのを手伝うために、私の購読を確実にしてください.
☕_コーヒーを買ってください
https://www.buymeacoffee.com/codewithshahan
コメントを残して自由にしてください.