SCSSについて

SCSS構文は、.scssファイル拡張子を使用します。いくつかの例外を除いて、これはCSSのスーパーセットです。つまり、すべての有効なCSSも有効なSCSSです。CSSと類似しているため、習得が最も簡単な構文であり、最も一般的な構文です。

変数

すべてのSASS変数は$で始まります。次に例を示します。


　　$blue : #1875e7;　

　　div {
　　　color : $blue;
　　}

変数を文字列に埋め込む必要がある場合は、＃{}で記述する必要があります。

　　$side : left;

　　.rounded {
　　　　border-#{$side}-radius: 5px;
　　}

計算機能

SASSを使用すると、コードで計算を使用できます。

　　body {
　　　　margin: (14px/2);
　　　　top: 50px + 100px;
　　　　right: $var * 10%;
　　}

ネスト

SASSを使用すると、セレクターをネストできます。たとえば、次のCSSコード：

　　div h1 {
　　　　color : red;
　　}

次のように書くことができます：

　　div {
　　　　hi {
　　　　　　color:red;
　　　　}
　　}

border-color属性など、次のように記述できる属性をネストすることもできます。

　　p {
　　　　border: {
　　　　　　color: red;
　　　　}
　　}

境界線の後にコロンを追加する必要があることに注意してください。

親要素を参照

ネストされたコードブロック内で、＆を使用して親要素を参照できます。たとえば、a：hover疑似クラスは次のように記述できます。

　　a {
　　　　&:hover { color: #ffb3ff; }
　　}

SASSには2つの注釈スタイルがあります。

標準のCSSコメント/コメント/はコンパイルされたファイルに保持されます。

1行のコメント//コメント。SASSソースファイルにのみ保持され、コンパイル後に省略されます。

！デフォルト

意味は「デフォルト」です。つまり、「デフォルト値は」です。次に例を示します。

$heading-font-family：$body-font-family !default;`

継承

SASSを使用すると、セレクターは別のセレクターを継承できます。たとえば、既存のclass1：

　　.class1 {
　　　　border: 1px solid #ddd;
　　}

class1をclass2から継承するには、@ extendコマンドを使用します。

　　.class2 {
　　　　**@extend** .class1;
　　　　font-size:120%;
　　}

混入します

Mixinは、C言語のマクロに少し似ており、再利用できるコードブロックです。

@mixinコマンドを使用して、コードブロックを定義します。


　　@mixin left {
　　　　float: left;
　　　　margin-left: 10px;
　　}

@includeコマンドを使用して、このミックスインを呼び出します。

　　div {
　　　　@include left;
　　}

ミックスインの利点は、パラメーターとデフォルト値を指定できることです。

　　@mixin left（$ value：10px）{
　　　　float：左;
　　　　マージン右：$ value;
　　}

使用する場合は、必要に応じてパラメータを追加します。

　　div {
　　　　@include left（20px）;
　　}

以下は、ブラウザプレフィックスを生成するためのミックスインの例です。

　　@mixin rounded（$ vert、$ horz、$ radius：10px）{
　　　　border-＃{$ vert}-＃{$ horz} -radius：$ radius;
　　　　-moz-border-radius-＃{$ vert}＃{$ horz}：$ radius;
　　　　-webkit-border-＃{$ vert}-＃{$ horz} -radius：$ radius;
　　}

使用する場合、次のように呼び出すことができます。

　　#navbar li {@include rounded（top、left）; }

　　#footer {@include rounded（top、left、5px）; }

カラー機能

SASSには、一連の色を生成するための組み込みの色関数がいくつか用意されています。

　　lighten（＃cc3、10％）//＃d6d65c
　　darken（＃cc3、10 ％）//＃a3a329
　　グレースケール（＃cc3）//＃808080
　　補完（＃cc3 ）//＃33c

ファイルを挿入

@importコマンドは、外部ファイルを挿入するために使用されます。

　　@import "path / filename.scss";

.cssファイルを挿入する場合、それはcssimportコマンドと同等です。

　　@import "foo.css";

高度な使用法

条件付きステートメント

@ifは判断に使用できます：

　　p {
　　　　@if 1 + 1 == 2 {border：1px solid; }
　　　　@if 5 <3 {border：2px dot; }
　　}

@elseコマンドもあります。

　　@if lightness（$ color）> 30％{
　　　　background-color：＃000;
　　} @else {
　　　　背景色：#fff;
　　}

ループステートメント

SASSはループをサポートします：

　　@for $ i1から10 {
　　　　.border-＃{$ i} {
　　　　　　border：＃{$ i} px solid blue;
　　　　}
　　}

whileループもサポートします。

　　$ i：6;

　　@while $ i> 0 {
　　　　.item-＃{$ i} {幅：2em * $ i; }
　　　　$ i：$ i-2;
　　}

各コマンド

役割は次のようになります。

　　@each $ member in a、b、c、d {
　　　　。＃{$ member} {
　　　　　　background-image：url（ "/ image /＃{$ member} .jpg"）;
　　　　}
　　}

カスタム機能

SASSを使用すると、ユーザーは独自の関数を作成できます。

　　　　@function 　　double（$ n）{ @ return $ n * 2;
　　}

　　#sidebar {
　　　　幅：double（5px）;
　　}

マッピング機能

Sassでは、マップ自体に7つの機能があります。

map-get（$ map、$ key）：指定されたキー値に従って、マップ内の関連する値を返します。
map-merge（$ map1、$ map2）：2つのマップを新しいマップにマージします。
map-remove（$ map、$ key）：マップからキーを削除し、新しいマップを返します。
map-keys（$ map）：マップ内のすべてのキーを返します。
map-values（$ map）：マップ内のすべての値を返します。
map-has-key（$ map、$ key）：指定されたキー値に従ってマップに対応する値の値があるかどうかを判別します。ある場合はtrueを返し、そうでない場合はfalseを返します。
キーワード（$ args）：関数パラメーターを返します。このパラメーターはキーと値を動的に設定できます。
サスマップ機能

1、map-get（$ map、$ key）

map-get（$ map、$ key）の関数は、$ keyパラメーターに従って$ mapに対応する$ keyの値を返すことです。$ keyが$ mapに存在しない場合、null値が返されます。この関数には、次の2つのパラメータが含まれています。

$ map：定義されたマップ。
$ key：トラバースするキー。

// SCSS
$ social-colors :(
ドリブル：＃ea4c89、
facebook：＃3b5998、
github：＃171515、
google：＃db4437、
twitter：＃55acee
）;
.btn-dribble {
color：map-get（$ social-colors、facebook）;
}

//コンパイルされた
css.btn-dribble {color：＃3b5998;}

2、map-has-key（$ map、$ key）　　

map-has-key（$ map、$ key）関数は、ブール値を返します。$ mapにこの$ keyがある場合、関数はtrueを返し、それ以外の場合はfalseを返します。

@if map-has-key（$ social-colors、facebook）{。
btn-facebook {
color：map-get（$ social-colors、facebook）;
}
} @else {
@warn "$でfacebooの色が見つかりませんsocial-colorsmap。プロパティは省略されています。 "
}
しかし、このように書くのはばかげているといつも感じています。キーを取得するたびに@ifステートメントを書くことは不可能です。実際、それほど複雑にする必要はありません。colors（）などの関数をカスタマイズできます。

@functioncolors （$ color）{ @ if not map-has-key（$ social-colors、$ color）{
@ warn " #{$color}$ social-colorsマップに色が見つかりません。プロパティが省略されています。";
}
@ return map- get（$ social-colors、$ color）;
}
この関数を使用すると、次のように使用できます。

.btn-ドリブル{
色：colors（ドリブル）;
}
.btn-facebook {
color：colors（facebook）;
}
.btn-github {
color：colors（github）;
}
.btn-google {
color：colors（google）;
}
.btn-twitter {
color：colors（twitter）;
}
.btn-weibo {
color：colors（weibo）;
}
表、如果你対向Sass的定義熟悉的话、使用@each：
ocial-network ：dribble、facebook、github、google、twtter、weibo; <br> @each $ social-network、$ social-color in $ social -colors {
.btn-＃{$ social-network} {
color：colors（$ social-network）;
}
}

3、map-keys（$ map）

map-keys（$ map）関数は、$ map内のすべてのキーを返します。これらの値は変数に割り当てられ、彼はリストです。といった：

map-keys（$ social-colors）;
戻り値は次のとおりです。

「ドリブル」、「フェイスブック」、「github」、「グーグル」、「ツイッター」

言い換えると：

$ list：map-keys（$ social-colors）;

と同等です：

$ list： "dribble"、 "facebook"、 "github"、 "google"、 "twitter";

現時点では、Sassのリストを使用して多くのことができます。

上記の例では、map-keys（$ map）を使用して変更を加えることができます。

@functioncolors（$ color）{
$ names：map-keys（$ social-colors）;
@ if not index（$ names、$ color）{
@ warn "Waring：#{$color} is not a valid color name.";
}
@return map-get（$ social-色、$ color）;
}
上記のコードの最大の違いは、map-keyを使用して$ social-colorsマップのすべてのキーを取り出し、それらを$ namesという名前のリストに割り当てます。次に、index（$ names、$ color）によって$ namesの位置に$ colorを返します。この位置が存在しない場合はプロンプトメッセージが返され、存在する場合は正しい値が返されます。

同様に、すべての値は@eachまたは@forを介してトラバースできます：

// @each
@each $ name in map-keys（$ social-colors）{。
btn-＃{$ name} {
color：colors（$ name）;
}
}

// @ for
@for $ i from 1 through length（map-keys（$ social-colors））{。
btn-＃{nth（map-keys（$ social-colors）、$ i）} {
color：colors（ nth（map-keys（$ social-colors）、$ i））;
}
}
使用される方法は異なりますが、最終的なCSSは同じです。

4、map-values（$ map）

map-values（$ map）関数はmap-keys（$ map）関数に似ていますが、違いは、map-values（$ map）が$ mapのすべての値を取得することです。これは、リストと言えます。さらに、map-values（$ map）に同じ値がある場合、すべてが取得されます。

前の例のように、次を使用します。

map-values（$ social-colors）
は次を返します：

＃ea4c89、＃3b5998、＃171515、＃db4437、＃55acee
値とその前の値もコンマで区切られます。

5、map-merge（$ map1、$ map2）

map-merge（$ map1、$ map2）
map-merge（$ map1、$ map2）関数は、$ map1と$ map2をマージしてから、新しい$ mapを取得します。この方法は、新しい値を$ mapにすばやく挿入する場合に最適な方法です。

といった：

$ color：（
text：＃f36、
link：＃f63、
border ：＃ddd、backround
：#fff
）;
$ typo :(
font-size：12px、
line-height：1.6
）;
//これら2つを組み合わせる場合$ mapを1つのマップにマージするには、次のようにするだけです。
$ newmap：map-merge（$ color、$ typo）;
//新しいマップが生成されます：
$ newmap :(
text：＃f36、
link：＃f63、
border：＃ddd、
background：＃fff、
font-size：12px、
line-height：1.6
）;
したがって、map-get（）などの関数を使用して他のことを実行できます。

ただし、$ map1と$ map2の$ key名が同じである場合、$ map2の$ keyが$ map1の値に置き換わることに注意してください。

6、map-remove（$ map、$ key）

map-remove（$ map、$ key）関数は、現在の$ map内の特定の$ keyを削除して、新しいマップを取得するために使用されます。戻り値はまだマップです。彼は1つのマップから別のマップを直接削除することはできませんが、マップ内のキーを削除することによってのみ新しいマップを取得できます。といった：

$ map：map-remove（$ social-colors、dribble）;
は新しいマップを返します：

facebook: #3b5998,
github: #171515,
google: #db4437,
twitter: #55acee

）;
削除されたキーが$ mapに存在しない場合、map-remove（）関数によって返される新しいマップは前のマップと同じです。

map-deep-merge新しいマッピング機能

最近、map-deep-mergeマッピング関数がvuetifyに付属のSASS変数定義リストに頻繁に表示され、Web検索に直接対応するコンテンツがないことがわかりました。
最後に、次のように、SASS公式Webサイトで関連する定義を見つけます。

 map.deep-merge($map1, $map2) //=> map

説明は
次のとおりです。「ネストされたマップ値も再帰的にマージされることを除いて、map.merge（）と同じです。」サンプルコードは次のとおりです。

$helvetica-light: ("weights": ("lightest": 100, "light": 300))
$helvetica-heavy: ("weights": ("medium": 500, "bold": 700))

@debug map.deep-merge($helvetica-light, $helvetica-heavy)

実際、Vuetifyアプリケーションでは次の形式がより一般的です。

$ grid-breakpoints：map-deep-merge（（ 'xs'：0、 'sm'：600px、 'md'：960px、 'lg'：1280px-16px、 'xl'：1920px-16px）、$ grid-ブレークポイント）;

参照

http://www.ruanyifeng.com/blog/2012/06/sass.html

https://sass-lang.com/documentation/modules/map#deep-merge

https://www.cnblogs.com/kt520/p/5711740.html
https://vuetifyjs.com/en/api/vuetify/

SASS共通文法メモ