React 栽培ノート、基盤構築初期段階のフック

もともと知っているつもりだったのですが、基本的にsassは以前の会社で企画書を書くときに使っていた書き方で、とてもスムーズでした。しばらくElement Plusは、自分のコンポーネントライブラリのエンジニアリング構造を参考に設計していたのですが、Element Plusその優雅なsass使い方を見て、自分の浅はかさと無知を恥じるようになりました。これがきっかけで体系的に勉強を始めましたsass. この間、何度も学びと共有を書きたいと思っていましたが、いろいろあってどれも問題なく終わってしまいました. 今日、やっと忙しいスケジュールから抜け出し、励ましの言葉を伝えることができました。

1.はじめに

非常に成熟したcssプリプロセッサとして、sass多くの特別な機能を備えているため、よりエレガントで簡潔なスタイルのコードを書くことができます。以前cssにスタイル変数を導入し、ネスティング、関数、ミキシング、コマンド制御などの機能もサポートしており、スタイルのゲームプレイを大幅に拡張します。

sassとの 2 つの構文形式がありSCSSますSass。

の中でSCSS、現在広く使われている形式であり、の文法ベースのみを展開したものCSS3です。SassCSS hacksvendor-specific syntax.scss

これはSass、中括弧の代わりにインデントを使用し、セミコロンの代わりに改行を使用する、最も初期の文法形式です. この形式は特に簡潔で、より便利に記述できます. この形式もすべての機能をサポートしていますがSass、いくつかの場所でSCSS異なる表現を使用しており、そのファイル拡張子は.sass.

どちらの形式も、別の形式のファイルにインポート (@import) して使用できます。またsass-convert、コマンドラインツールを使用して別の形式に変換することもできます。

# Sass转为SCSS
sass-convert style.sass style.scss

# SCSS转为Sass
sass-convert style.scss style.sass

ここではインストールと使用については紹介しませんが、Sass結局のところ、ほとんどのプロジェクトはwebpackパッケージ化され、他の構築ツールを使用してビルドされloader、コンパイルを支援する対応するツールや他のツールによって補完されます。sassコマンドラインでコマンドを使用してスタイルファイルをコンパイルする必要があるプロジェクトはほとんどないはずです。

ただし、エンコーディング形式には言及する価値があります。と同様にCSS、を使用@hcarsetして特定のエンコーディング形式を宣言できます。スタイルファイルの先頭 (最初の文字)@charset "encoding-name"に挿入するSassと、指定されたエンコーディング形式に従ってファイルがコンパイルされます。もちろん、使用するエンコード形式はUnicode文字セットに変換可能でなければなりません。SassファイルをUTF-8encodingで出力CSSし、コンパイルされたファイルに文字以外が現れる場合は、出力ファイルに宣言をASCII追加します。@charset

2.基本機能拡張

1. ネストされたルール`Nested Rules`

SassCSSあるスタイルセットを別のスタイルセットに埋め込むことをサポートしCSS、内側のスタイルは外側のセレクターを親セレクターとして使用します。

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;}
}

これはSass次のようにコンパイルされますCSS。

#main p {
  color: #00ff00;
  width: 97%; 
}
#main p .redbox {
  background-color: #ff0000;
  color: #000000; 
}

ネスティング機能によりコード量が大幅に削減され、面倒な親セレクターを繰り返し記述する必要がなくなり、管理が容易になります。

2. 親セレクター`&`( `Referencing Parent Selectors: &`)

ネストでは、要素の:hoverスタイルを設定する場合やbody、要素に特定の値がある場合など、親セレクターを参照する必要がある場合は、親セレクター、つまりその外側のセレクターを参照するために使用classnameできます。&

a {
  font-weight: bold;
  text-decoration: none;
  // & 引用父元素&:hover { text-decoration: underline; }
  // body.firefox 可以直接引用
  body.firefox & { font-weight: normal; }
}

次のようにSassコンパイルされますCSS。

a {
  font-weight: bold;
  text-decoration: none; 
}
a:hover {
  text-decoration: underline; 
}
body.firefox a {
    font-weight: normal; 
}

&セレクターの最初の文字である必要がありますが、その後にサフィックスを続けて複合セレクターを生成できます。

#main {
  color: black;
  // #main-sidebar 字符串拼接，这就有点好玩了&-sidebar { border: 1px solid; }
}

これは次のようにコンパイルされます。

#main {
  color: black; 
}
#main-sidebar {
  border: 1px solid; 
}

3. 属性の入れ子`Nested Properties`

両方が属性として名前空間を持っているなどCSS、同じ名前空間 ( ) に従うものもあります。現時点では、記述を簡素化し、管理を容易にするために、属性を名前空間にネストすることが許可されています。namespacefont-family, font-size, font-weightfontSass

.funky {
  // 注意命名空间这里要加冒号
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;}
}

次のようにコンパイルしますCSS。

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; 
}

その中で、名前空間には独自の属性値を含めることもできます。

.funky {
  // font-size/line-height
  font: 20px/24px {
    family: fantasy;
    weight: bold;}
}

コンパイルすると:

.funky {
  /* font-size/line-height */
  font: 20px/24px;
  font-family: fantasy;
  font-weight: bold; 
}

4. プレースホルダーセレクター`%foo`( `Placeholder Selectors`: `%foo`)

プレースホルダーセレクターは、シンボルがであり、命令を介して呼び出す必要があることを除いて、idセレクターおよびセレクターに似ています。そうしないと、コンパイルに参加しません。class%@extendSass

5. 注意事項`Comments`

Sass単一行コメント//と複数行コメントの両方がサポートされてい/* */ます。複数行のコメントはコンパイル済みCSSファイルに完全に出力されます。複数行のコメントの最初の文字は、このコメントを圧縮出力モード!で保持し、通常は著作権情報を追加するために使用されるファイルに出力することを意味します。補間ステートメント ( )は、複数行のコメントで変数値を出力できます。(補間に使用します。)CSSinterpolation#{$val}

// Sass
$version: "1.2.3";
/* This CSS is generated by My Snazzy Framework version #{$version}. */

// 编译为CSS：
/* This CSS is generated by My Snazzy Framework version 1.2.3. */

3.高度な機能拡張

1.`SassScript`

Sassという名前の強力な関数を提供しますSassScript。この関数は任意の属性に適用でき、変数や算術演算などの追加関数を属性で使用できます。

1.1`Interactive Shell`

Interactive Shellコマンドラインでテストできる機能SassScript。コマンドラインsass -iでと入力し、テストする内容を入力しSassScriptて出力を表示します。

sass -i
>> "Hello, Sassy World!"
"Hello, Sassy World!"
>> 1px + 1px + 1px
3px
>> #777 + #777
#eeeeee
>> #777 + #888
white

1.2 変数`$` `Variables: $`

変数の使用は非常に簡単です。

// 声明变量
$width: 5em;

#main {// 使用变量
  width: $width;
}

変数にはブロックレベルのスコープがあり、ネストされたルール内の変数は、ネストされたルール内でのみ使用できるローカル変数です。グローバル変数はどこでも使用できます。宣言を追加!globalすると、ローカル変数がグローバル変数に変わります。

// Sass
#main {// !global声明，转换为全局变量
  $width: 5em !global;
  width: $width;
}

#sidebar {
  // 使用全局变量
  width: $width;
}

// 编译为CSS:
#main {
  width: 5em;
}
#sidebar {
  width: 5em;
}

1.3 データ型`Data Types`

SassScript7主なデータ型がサポートされています:

数字、単位1, 2, 3, 6, 10pxなど;
string (引用符付きと引用符なしの両方がサポートされています), "foo", "bar", baz;
色blue, #04a3f9, rgba(255,0,0,0.5)など;
ブール値、true, false;
ヌル、null;
list区切り文字としてスペースまたはカンマを使用した配列 ( ) 1.5em 1em 0 2em, Helvetica, Arial, sans-serif;
mapsJS、これはwhere Object、と同等(key1: value1, key2: value2)です。

さらに、文字セットや宣言など、他の属性値SassScriptもサポートされていますが、これらは特別に扱われず、引用符で囲まれていない文字列として扱われます。CSSUnicode!important

1.3.1 文字列

SassScript引用符付き文字列 ( )と引用符なし文字列 ( )の両方がquoted stringsサポートされています。これら 2 つの文字列はコンパイル時に相互に変換されませんが、1 つのケースを除きます。( ) を使用すると、引用符で囲まれた文字列が引用符なしの文字列にコンパイルされます。これは、でセレクター名を引用するのに便利です。unquoted strings#{}interpolationmixin

// Sass
@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";}
}
@include firefox-message(".header");

// 编译为CSS
body.firefox .header:before {
  content: "Hi, Firefox users!"; 
}

1.3.2 配列 ( `lists`)

配列とは、スペースまたはカンマで区切られた、またはそのような一連の値Sassを処理する方法を指します。実際、個々の値も 1 つの値のみを含む配列として扱われます。CSSmargin: 10px 15px 0 0font-face: Helvetica, Arial, sans-serif

配列自体には多くの関数はありませんが、Sass list functions多くの新しい関数を配列にもたらします:nth関数は配列内の項目に直接アクセスできます;join関数は複数の配列を一緒に接続できます;append関数は配列に新しい値を追加できます;@each関数配列内の各項目を走査できます。

配列にはサブ配列を含めることができます。たとえば1px 2px, 5px 6px、はと2 つ1px 2pxの配列を含む配列です。5px 6px内側と外側の配列が同じ分離方法を使用している場合、括弧を使用して内側のレイヤーをラップする必要があります(1px 2px) (5px 6px)。括弧はコンパイル時に保持されないため、どちらの書き方をしても1px 2px, 5px 6px、(1px 2px) (5px 6px)最終的なコンパイル結果は同じでSassもファイル内での意味が異なる場合、前者は 4 つの値を含む配列を意味し、後者は配列を意味します。括弧は「グループ化」の概念を強調していると言えます。

()空の配列を表すために使用され、 empty を表すこともできますmap。空の配列は直接コンパイルされずCSS、配列に空の配列または null 値がある場合、それらはコンパイル時にクリアされます。1px 2px () 3pxまたはなど1px 2px null 3px。コンマ区切りの配列では、末尾のコンマを保持できます。これは、特に単一の値のみを含む配列を宣言する必要がある場合に、配列の構造上の関係を強調するためのものです。(1,)たとえば1、のみを含む配列を表します。

1.3.3`maps`

mapはキーと値のペアのコレクションでkeyあり、valueどちらも任意SassScriptのオブジェクトにすることができます。それとlist両方が関数で動作します。たとえば、map-get関数を使用してキー値を検索したり、関数をmap-merge使用して新しいキーと値のペアを追加したり、@eachディレクティブを使用して各キーと値のペアにスタイルを追加したりできます。mapどこでも使用できますがlist、その逆はできません。map関数内で使用する場合は、形式の配列listとして扱われます。key1 value1, key2 value2

1.3.4 色

どのCSSカラー式もカラー値を返しSassScriptます。これには、多数の名前付きの色が含まれています (多くの場合、引用符で囲まれていない文字列unquoted stringsと区別できません)。

1.4 操作`Operations`

すべてのデータ型は等価演算==OR!=をサポートしています。さらに、各データ型には独自の演算メソッドもあります。

1.4.1 数値演算`Number Operations`

SassScript足し算、引き算、掛け算、割り算、丸め演算 ( +, -, *, /, %) をサポートし、必要に応じて値を単位間で変換します。関係演算子 ( >, <, >=, <=) は、数値演算にも使用できます。

// Sass
p {
  width: 1in + 8pt;
}

// 编译为：
p {
  width: 1.111in; 
}

除算操作/

除算演算は別の言及に値します。/記号は通常、CSS数字を区切る役割を果たします。ではSassScript、/数字の区切りだけでなく、割り算にも。次の 3 つの場合/は、除算と見なされます。

値または値の一部が変数または関数の戻り値である場合。
値が括弧で囲まれている場合。
値が算術式の一部である場合。

// Sass
p {
  font: 10px/8px;             // 普通的CSS
  $width: 1000px;
  width: $width/2;            // 使用了变量，是除法运算
  width: round(1.5)/2;        // 函数返回值，是除法运算
  height: (500px/2);          // 使用圆括号，是除法运算
  margin-left: 5px + 8px/2px; // 算数运算表达式的一部分，是除法运算
}

// 编译为CSS
p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px; 
}

/変数を使用する必要があり、それを除算演算子として使用したくない場合は#{}、変数を次のようにラップできます。

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

// 编译为CSS
p {font: 12px/30px; 
}

1.4.2 色値操作`Color Operations`

色値の操作はセクションで計算されます。つまりR, G, B、値は個別に計算されます。

p {
  color: #010203 + #040506;
}

分割して計算し01 + 04 = 05 02 + 05 = 07 03 + 06 = 09、次のようにコンパイルします。

p {
  color: #050709; 
}

を使用できますcolor functions。これは、色の計算よりも少し便利です。

色の値は、数値演算と組み合わせることもできます。

p {
  color: #010203 * 2;
}

// 计算 01 * 2 = 02 02 * 2 = 04 03 * 2 = 06，然后编译为:
p {
  color: #020406; 
}

色の値にが含まれている場合、算術演算は値に対して作用しないため、演算を実行するalpha channelには計算に含まれる色の値が同じ値でなければならないことに注意してください。alphaalpha

p {
	// 需要保证有相同的alpha值color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}

カラー値の値は、機能またはalphaで調整できます。opacitytransparentize

// Sass
$translucent-red: rgba(255, 0, 0, 0.5);
p {
  color: opacify($translucent-red, 0.3);
  background-color: transparentize($translucent-red, 0.25);
}

// 被编译为：
p {
  color: rgba(255, 0, 0, 0.8);
  background-color: rgba(255, 0, 0, 0.25); 
}

1.4.3 文字列操作`String Operations`

+連結文字列を使用します。+左側の値によって、最終的なコンパイル結果が引用されるか引用されないかが決まります。

演算式を他の値と組み合わせて使用する場合は、スペースをコネクタとして使用します。

p {
  margin: 3px + 4px auto;
}
// 编译为：
p {
  margin: 7px auto; 
}

#{}以下を使用して動的な値を挿入できます。

$value: null;
p:before {content: "I ate #{$value} pies!";
}

// 编译为CSS:
p:before {content: "I ate pies!"; 
}

1.4.4 ブール演算`Boolean Operations`

ブール演算のサポートand, or, not.

1.4.5 配列操作

配列は直接操作をサポートしておらず、list functionsを使用してのみ操作できます。

1.5 括弧`(Parentheses)`

括弧が最初にカウントされます。

1.6 関数`Functions`

SassScript多くの関数が組み込まれており、一部はCSS通常のステートメントを使用して呼び出すこともできます。

p {
  color: hsl(0, 100%, 50%);
}
// 编译为：
p {
  color: #ff0000; 
}

キーワード引数Keyword Arguments

Sass関数はキーワード引数を許可します。上記の例は次のように記述できます。

p {
  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}

Sass多くの組み込み関数があるため、ここでは拡張しません。

1.7 補間ステートメント`Interpolation #{}`

変数は、次の方法でセレクターまたはプロパティ名で使用でき#{}ます。

$name: foo;
$attr: border;
p.#{$name} {#{$attr}-color: blue;
}

// 编译为：
p.foo {border-color: blue; 
}

1.8`SassScript`で`&`

&親セレクターを表します。以下のように、&の値((".foo.bar" ".baz.bang"), ".bip.qux")。

.foo.bar .baz.bang, .bip.qux {$selector: &;
}

親セレクターがない場合&、値はnullです。mixinこれは、親セレクターがあるかどうかを検出するために適用できます。

@mixin does-parent-exist {
  @if & {
    // 有父选择器
  &:hover {
      color: red;
  }} @else {
    // 没有父选择器
    a {
      color: red;
  }}
}

1.9 変数のデフォルト値 ( `Variable Defaults`):`!default`

変数の末尾に追加すると、宣言が割り当てられていない変数に値を割り当てる!defaultことができます。!default割り当ては、変数に値が割り当てられていないか、null 値が割り当てられているnull場合にのみ機能します!default。

$content: "First content";
// 变量已被赋值，无效
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
}

// 编译为：
#main {
  content: "First content";
  new-content: "First time reference"; 
}

2.`@-Rules`コマンド ( `Directives`)で

SassすべてCSS3 @-Rulesの、およびSass特定のディレクティブ ( directives) がサポートされています。

2.1`@import`

Sassインポートと@importファイリングを可能にする拡張機能。インポートされたファイルはマージされ、同じファイルにコンパイルされます。さらに、インポートされたファイルに含まれる変数は、インポートされたファイルで使用できる場合と使用できない場合があります。.scss.sassCSSmixin

通常、ファイル@importは検出されてインポートされますが、次の例外は通常の構文Sassとして扱われます。CSS

ファイル拡張子は.css;
ファイル名は次http://で始まります。
ファイル名はurl();
@import含むmedia queries。

一度に複数のファイルをインポートすることができます.拡張子が書かれていない場合は、同じ名前のファイルを検索しようとし.scssます.sass.

@import "rounded-corners", "text-shadow";

インポートファイルでも補間ステートメントを使用できますが、インポートメソッド#{}にのみ使用できます。CSSurl()

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");

// 编译为：
@import url("http://fonts.googleapis.com/css?family=Droid+Sans");

@importsまた、パーシャルとネストという 2 つの特別な使用法もあります。

分音 (Partials)

ファイルをインポートSassしたいが、としてコンパイルしたくないCSS場合があります。ファイル名の前にアンダースコアを追加すると、Sassコンパイルしないように指示されます。import ステートメントではアンダースコアは必要ないことに注意してください。たとえば、ファイルの名前がの場合_colors.scss、次のコードはファイルをインポートしますが、_colors.scssファイルはとしてコンパイルされませんCSS。

@import "colors";

なお、同名で先頭にアンダースコアを含むファイルと先頭にアンダースコアを含まないファイルが存在する場合、アンダースコアを付加したファイルは無視されます。

ネスティング@import

ほとんどのシナリオでは、ファイルの最上位で使用します@imports。実際、ネストはスタイルまたはに@importsネストすることもできます。最上位レイヤーで使用する場合との違いは、この方法でインポートされたスタイルは、「ローカルスコープ」として理解できるネストされたレイヤーにのみ表示されることです。CSS@media

// example.scss
.example {
  color: red;
}

// main.scss
#main {
  @import "example";
}

最終的に次のようにコンパイルされます。

#main .example {
  color: red;
}

ただし、このネストされたフォームによって@importインポートされたファイルには@mixin、などの@charsetトップレベルの命令があってはならないことに注意してください。

2.2`@media`

Sassはと@media同じですCSSが、次の新機能が追加されています。

CSSルール内でネストすることができます。ルールに@mediaネストされるCSSと、コンパイルされると、ファイルの最外層にコンパイルされ、以前にネストされたときに親セレクターが含まれます。これは非常に便利です。

// Sass
.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;}
}

// 编译为
.sidebar {
  width: 300px; 
}
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; } 
}

@mediaネスティングが許可queriesされ、コンパイル時に自動的に追加されますand。

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
  }}
}

// 编译为
@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; } 
}

SassScript条件の名前または値の代わりに (変数、関数など) を使用できます。

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;}
}

// 编译为
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px; } 
}

2.3`@extend`

セレクターは、を介して別のセレクターのスタイルを継承する@extendように作成できます。

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  // 继承，此时所有使用到 .error 的样式都会被继承过来
  @extend .error;
  border-width: 3px;
}

// 编译为
.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }

.error.intrusion, .seriousError.intrusion {
  background-image: url("/image/hacked.png"); 
}

.seriousError {
  border-width: 3px; 
}

Placeholder Selectorsプレースホルダセレクタ

Sass特定の要素ではなく、継承のために一連のスタイルを定義する必要がある場合がありますが、それがコンパイルされて個別に出力されないことを願っています。Sassスタイルライブラリを作成すると、このようなシーンがより頻繁に発生します。こうして、プレースホルダセレクタが誕生しました。その使用法は、idセレクターまたはclassセレクターとほぼ同じです。セレクターの表記は%です。単独で使用すると、プレースホルダーセレクターはSass無視され、出力ファイルにコンパイルされません。

// 不会被编译到输出文件中
#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

@extend次のユーザーが使用する必要があります。

.notice {
  @extend %extreme;
}

// 被编译为
#context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em; 
}

!optional声明

!optional宣言を使用すると、@extend新しいセレクターを生成しないことが可能です。

// 不可以，因为没有 .notice
a.important {
  @extend .notice
}

// 可以
a.important {
  @extend .notice !optional;
}

コマンドで使用@extend

無駄なコードを大量に生成しないようにするため@extendに、命令内で ( ) を拡張し、拡張を同じ命令レベルのセレクターに限定します。

@media print {
  .error {
    border: 1px #f00;
    background-color: #fdd;}
  .seriousError {
    // 可以
    // .error 同在一个 @meida层级中
    @extend .error;
    border-width: 3px;}
}

// 以下为反面栗子
.error {
  border: 1px #f00;
  background-color: #fdd;
}

@media print {
  .seriousError {
    // 不可以, .error 不在当前的@meida指令层级中
    @extend .error;
    border-width: 3px;}
}

2.4`@at-root`

ディレクティブを使用@at-rootして、選択したセレクターを最も外側のレベルに持ち上げます。

.parent {...
  @at-root .child { ... }
}

// 编译为
.parent { ... }
.child { ... }

複数のセレクターを含むブロックレベルの構造にすることができます。

.parent {...
  @at-root {
    .child1 { ... }
    .child2 { ... }}
  .step-child { ... }
}

// 编译为
.parent { ... }
.child1 { ... }
.child2 { ... }
.parent .step-child { ... }

with:xxx yyy ...orを使用without:xxx yyy ...して、最も外側のレイヤーに昇格されたセレクターに対して外側のディレクティブが有効であることを確認します。

// without:
@media print {
  .page {
    width: 8in;
    // without: media 让选择器不受外层的@media影响
    @at-root (without: media) {
      color: red;
  }}
}

// 编译为
@media print {
  .page {
    width: 8in;}
}
.page {
  color: red;
}

3. 制御コマンド`Control Derectives`

コントロールディレクティブは、特定の条件下でスタイルを参照するために使用されます。

3.1`if()`

組み込みif関数は、任意のSassScriptスクリプトコンテキストで使用できます。

3.2`@if`

@if条件は、命令の式の戻り値がfalseまたはでない場合に満たされnullます。後で@else if接続できます@else。

$type: monster;
p {
  @if $type == ocean {
    color: blue;} @else if $type == matador {
    color: red;} @else if $type == monster {
    color: green;} @else {
    color: black;}
}

// 编译为
p {
  color: green; 
}

3.3`@for`

@for $var from <start> through <end>このディレクティブには、、またはの 2 つの形式があります@for $var from <start> to <end>。どちらも開始点を含んでいます<start>が、違いはto含まれていませんが<end>、through含まれています<end>。また、$var任意の変数を指定できますが、整数である必要があります<start>。<end>

@for $i from 1 to 3 {
  .item-#{$i} { width: 2em * $i; }
}

// 编译为
.item-1 {
  width: 2em; 
}
.item-2 {
  width: 4em; 
}

3.4`@each`

@eachコマンド形式:@each $var in <list>

@each $animal in puma, sea-slug, egret, salamander {.#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');}
}

// 编译为
.puma-icon {
  background-image: url('/images/puma.png'); }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); }
.egret-icon {
  background-image: url('/images/egret.png'); }
.salamander-icon {
  background-image: url('/images/salamander.png'); }

複数の変数を同時に適用できます。これは、フォームは似ているが値が異なるスタイルを記述する場合に便利です。

@each $animal, $color, $cursor in (puma, black, default),
                                (sea-slug, blue, pointer),
                                (egret, white, move) {.#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;}
}

// 编译为
.puma-icon {
  background-image: url('/images/puma.png');
  border: 2px solid black;
  cursor: default; }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
  border: 2px solid blue;
  cursor: pointer; }
.egret-icon {
  background-image: url('/images/egret.png');
  border: 2px solid white;
  cursor: move; }

maps配列として扱われるため、次のようlistsに@eachも使用できmapます。

@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {#{$header} {
    font-size: $size;}
}

// 编译为
h1 {
  font-size: 2em; }
h2 {
  font-size: 1.5em; }
h3 {
  font-size: 1.2em; }

3.5`@while`

while循環、わかりました。

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  // 更改条件变量
  $i: $i - 2;
}

//编译为
.item-6 {
  width: 12em; }

.item-4 {
  width: 8em; }

.item-2 {
  width: 4em; }

4. 混合コマンド ( `Mixin Directives`)

mixin再利用可能なスタイルを定義するために使用されます。

4.1 混合命令の定義`@minin`( `Defining a Mixin: @mixin`)

名前とスタイルを追加した後@mixin、混合命令を定義できます.セレクターと属性を含める必要があることに注意してください,また&、親セレクターを参照するために使用することもできます.

// 定义名为 clearfix 的混合指令
@mixin clearfix {
  display: inline-block;
  // & 指代父选择器。注意，这个混合指令里虽然它没有父选择器，
  // 但是混合指令使用的地方，可以产生父选择器&:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
  // 这里的 & 同理* html & { height: 1px }
}

4.2 混合命令の参照`@include`( `Including a Mixin: @include`)

@include MixinNamemixin ディレクティブを引用するために使用します。

.page-title {
  // 引用混合指令，将 clearfix 中的规则混入到 .page-title 中
  @include clearfix;
  padding: 4px;
  margin-top: 10px;
}

また、属性を定義せずに、参照する親セレクターを持たずに、最も外側のレベルで直接参照して混合することもできます。

@mixin silly-links {
  a {
    color: blue;
    background-color: red;}
}
@include silly-links;

//编译为
a {
  color: blue;
  background-color: red; }

作成する mixin ディレクティブでは、ファイルのどこにでも安全にインポートできるように、子孫セレクターのみを定義するのが最善です。

複合ディレクティブは、他の複合ディレクティブを参照できます。

@mixin compound {
  @include highlighted-background;
  @include header-text;
}
@mixin highlighted-background { background-color: #fc0; }
@mixin header-text { font-size: 20px; }

4.3 パラメータ ( `Arguments`)

パラメーターを使用して、混合コマンドのスタイルの変数を設定し、値を割り当てることができます。混合命令を参照して定義する場合、パラメータの順序は 1 対 1 で対応し、パラメータにはデフォルト値を割り当てることができます。

// $width有默认值
@mixin sexy-border($color, $width: 1in) {
  // 注意这里得 border，是CSS命名空间
  border: {
    color: $color;
    width: $width;
    style: dashed;}
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }

// 编译为
p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; }

h1 {
  border-color: blue;
  border-width: 2in;
  border-style: dashed; }

さらに、パラメーターについてさらに 2 つの重要な点があります。

キーワードパラメータ( Keyword Arguments):Mixinパラメータを参照渡しする場合は、パラメータキーワード (パラメータ名) を指定して値を正確に渡します。

p { @include sexy-border($color: blue); }
h1 { @include sexy-border($color: blue, $width: 2in); }

書き方は少し面倒ですが、読みやすく、正確に割り振ることができます。

パラメーター変数( Variable Arguments): 混合コマンドに必要なパラメーターの数がわからない場合は、パラメーターの末尾にパラメーター変数を使用...して宣言Sassできます。これらのパラメーターは値のリストとして扱われます。

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

// 编译为
.shadowed {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

引用するときにパラメーター変数を使用することもできます。

@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}
$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}

// 编译为
.primary {
  color: #ff0000;
  background-color: #00ff00;
  border-color: #0000ff;
}

4.4 コンテンツを混合コマンドにインポートする`@content`( `Passing Content Blocks to a Mixin`)

を引用する場合Mixin、特にファイルの最外層で引用する場合は、@contentプレースホルダーを使用して、テンプレートやスロットなどと同様に、@include次のコンテンツをその位置にインポートできます。@content

@mixin apply-to-ie6-only {* html {
    @content;}
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);}
}

// 编译为
* html #logo {
  background-image: url(/logo.gif);
}

スタイルライブラリで頻繁に使用Mixinされるためです。Sass使い方を簡単にするために、とで=表すことができます。@mixin+@include

// Sass (这里就是Sass格式的语法了，而非SCSS格式)
=apply-to-ie6-only* html
    @content

+apply-to-ie6-only
  #logo
    background-image: url(/logo.gif)

ブロックレベルのコンテンツと変数のスコープ:@contentブロックレベルのコンテンツをインポートすることにより、そのスコープはそれが定義されているコンテキストに関連付けられ、混合命令内のスコープとは関係ありません。

$color: white;
@mixin colors($color: blue) {
  background-color: $color;
  // @content 的内容的作用域在定义它的地方
  @content;
  border-color: $color;
}
.colors {
  @include colors { // 这里的color，虽然会被插入到@content的位置// 但是它的作用域是在定义它的地方，
    // 而定义它的地方，$color是全局变量，值为whitecolor: $color; }
}

// 编译为
.colors {
  background-color: blue;
  color: white;
  border-color: blue;
}

すべての定義がグローバルスコープにあるわけではないことに注意してください。また、定義がセレクターにネストされていて、そのスコープがセレクターのローカルスコープである可能性もあります。

5. 機能説明 ( `Function Directives`)

Sassカスタム関数を許可します。関数は、任意の属性値またはで使用できますSassScript。名前の競合を避けるために、カスタム関数名にプレフィックスを付けることができます。

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }

// 编译为
#sidebar {
  width: 240px; 
}

6. 出力フォーマット

6.1`:nested`

Nested ( :nested) はのデフォルトの出力形式で、との関係sassを明確に反映しています。セレクターと属性は別の行を占め、インデントはファイル内のインデントと一致しており、インデントに依存してネストレベルが反映されます。CSSHTMLsass

// 编译后输出的CSS文件
#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

6.2`:expanded`

エキスパンド（:expanded）形式は手書きと同じで、セレクターはインデントされません。

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

6.3`:compact`

コンパクトな形式 ( Compact) は場所をとらず、各CSSルールは 1 行しか占有しません。ネストされたセレクターは空白行を残しません。ネストされていないセレクターはそれらの間に空白行を残します。

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }

6.4`:compressed`

圧縮形式（Compressed）は、空白行、スペース、コメントなどを残さず、出力量が最も少なくなります。

#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}

やっと

HTML、CSS、JavaScript、HTTP、TCPプロトコル、ブラウザ、VUE、React、データ構造やアルゴリズムなど、「フロントエンドメーカーインタビュー集」をまとめ、合計201問のインタビュー質問をまとめ、それぞれに回答を作成質問答えて分析します。

困っている友達、記事の最後にあるカードをクリックしてこのドキュメントを受け取り、無料で共有できます

ドキュメントの一部は次のとおりです。

記事の長さには制限があり、次のコンテンツは順次表示されません

困っている友達は、下のカードをクリックして無料で入手できます