Sass の基本 (6)_html/css_WEB-ITnose

join() 関数
join() 関数は 2 つのリストを 1 つのリストに結合します。
,#ff0000,# aabbcc, #ddeeff)
>> ((青赤),join((#abc #def), #dee #eff)))
(#0000ff #ff0000 #aabbb)
もありますjoin() 関数の特別なパラメータ $separator は、主にリスト値をリスト関数に接続するために使用されます。join() のセパレータ記号は
で、デフォルトは auto です。デフォルト値 auto に関数が追加されています。カンマとスペースの 2 つの値もあり、カンマはリスト内の値をスペース (,) で区切って指定します。スペース値は、リスト内のリスト項目がスペース () で区切られることを指定します。
join()関数内で$separatorの値を明示的に指定しないと、様々な状況が発生します
リストの最初のリストの各値の間にカンマ(,)が使用されている場合、join()関数 それぞれの間に使用されるカンママージされたリストのリスト項目、分割:
>> join((blue, red,#fff),(green orange))
(#0000ff,#ff0000,#eeffff,#08000 , #ffa500)
しかし、最初のリストにリスト項目が 1 つだけある場合、join() 関数によってリスト項目がマージされます
項目内の各リスト項目間で使用される区切り記号は、2 番目のリスト項目で使用される区切り記号に基づきます
、 2 番目のリストの項目は、, で区切られます。2 番目の列の項目がスペースで区切られている場合は、スペースを使用して区切ります。
>>join(blue,(green,orang)) If 1、スペースで区切ります:
>>join(blue,red)
(#0000ff #ff0000)

Append()関数
int append((10px,20px),30px)

$separatorパラメータの値が明示的に指定されていない場合指定された場合、デフォルト値は auto
リストにリスト項目が 1 つしかない場合、挿入された値はスペースで区切られます。
リスト内のリスト項目がスペースで区切られている場合、挿入されたリスト項目もスペースで区切られます;
リスト内のリスト項目がカンマで区切られている場合、挿入されたリスト項目もカンマで区切られます。
もちろん、append()関数内で$separatorパラメータを明示的に設定することもできます
値がカンマの場合、リスト項目はカンマで区切られます
値がスペースの場合、リスト項目はスペースで区切られます
>>append((青緑),赤,カンマ)
(#0000fff,#008000,#ff0000)
>>append((青緑),赤,カンマ)
もともとin in in (# 0000ff #008000 #ff0000) append((blue,green),red,comma)
(#0000ff,#008000,#ff0000)
>>append((blue,green),red,space)
(#0000ff) #008000 #ff0000)
>>append(blue,red,space)
(#0000ff #ff0000)

zip()関数

zip()関数は、複数のリスト値を多次元リストに変換します。 :
>>zip( 1px 2px 3px,実線破線点線,緑青赤)
((1px "実線" #008000),(2px "破線" #0000ff),(3px "点線" #ff0000))
((1px "solid" #008000),(2px "dashed" #0000ff),(3px "dotted" #ff0000))
zip(1px 2px 3px、solid, green blue red)を使用します
～ 2pxの破線の青、3pxの点線の赤 index()関数

index()関数はインデックスに似ており、主にリスト内の特定の値の位置を見つけることができます。 Sass では、最初の値は 1
2 番目の値は 2 などとなります:

2
>>index(1px ソリッドレッド, 赤)
3
index() 関数では、指定された値がリストにない(対応する値が見つからない)場合、戻り値は false になり、それ以外の場合は、リスト内の対応する
の位置を返します。 ＆gt;＆gt; index（1px solid red、dotted）// dattedはfalse＆gt;＆gt;返されるのは 2
2

Introspection 関数

Introspection 関数にはいくつかの判定系の関数が含まれています。
Type-of($value): 値の型を返します
Unit($number): 値の単位を返します
Unitless($number) は、値に単位があるかどうかを決定します
Comparable($number-1,$数値 - 2); 2 つの値を加算または減算できるかどうかを決定します。
イントロスペクション関数 -type-of()
type-of() 関数は主に、値がどの型に属するかを決定するために使用されます:
戻り値:
number は数値型です。
String は文字列型
Bool はブール型 Color は色の型 >&g t ;type-of("asdf")
"string"
of(false)
"bool"
> ;>type-of(#fff)
「色」
>>type-of(青)
「色」
>>type-of(1/ 2 =1)
「文字列」

Unit() 関数

unit() 関数は、主に値で使用される単位を取得するために使用され、複雑な計算に遭遇したときに、操作「
」に基づいて「複数の単位の組み合わせ」を取得できます。値ですが、乗算と除算のみが許可されます

>unit(1em)
>>unit(10px * 3em)
"em * px"
>>unit(10px) * 2em /3cm /1rem)
「em/rem」
ただし、加算と減算で単位が異なる場合、unit() 関数は px と cm、mm の演算を除いてエラーを報告します
>>unit(1px + 1cm)
"px"
>>unit(1px - 1cm)
"px"
>>unit(1px +1mm)
"px"
unit()関数は単位演算としては比較的不規則であり、 CSS では、いくつかの単位を 1 つの単位に組み合わせることができません。 g & gt & gt; 単位 (10px * 3EM)
& gt; 単位 (10px / 3EM) です。 em"
& gt; 単位 (10px * 2EM / / 3cm / 1rem)
"em/rem"

unitless() 関数

Unitless() 関数は比較的シンプルで明確です。 value に単位がある場合、返される値は true、単位が指定された場合は false になります。
>>unitless(1/2 +2)
true
>>unitless(1px /2 +2)
false

Compare( ) 関数 Comparable() 関数は、主に 2 つであるかどうかを判断するために使用されます。数値は加算、減算、結合できます。可能であれば戻り値は true、そうでない場合は false;
>>comparable(2px ,1px)
>>comparable(2px,1) %)
false
m,1em)
false
>> 同等(2px,1cm)
true
>>同等(2px,1mm)
true
(2cm,1mm)
true

その他の機能

ここでその他の関数は、主に JavaScript の 3 項判定に非常に似ているため、3 番目の条件関数と呼ばれています。別の値を返します。
if($condition,$if-true,$if-false)
上記の式の意味は、$condition条件が成立した場合は戻り値が$if-true、それ以外の場合は戻り値が$if-となるということです。偽の値。 >>if(true,1px,2px) 1px
>>if(false,1px,2px)
2px
マップ
Sassマップはデータマップと呼ばれることが多く、配列と呼ぶ人もいますなぜなら、それは常に key:value のペアで表示され、JSON データに似ています
":"Anna","lastName":"Smith"}
｝
すると、Sass マップは JSON に非常によく似ています。
$マップ:{
$ key1：value1、$ key2：
$ key3：value3、
}
sassと同様の変数を使用して、マップを宣言するために名前空間を使用しますデータは括弧 () であり、データはキー:値の形式で割り当てられます。キーと値はペアで表示され、各ペアはカンマ (,) で区切られます。最後の文字列の後にはカンマはありません。グループ。
キー key は、関連付けられた値 value を見つけるために使用されます。マップを使用すると、キー値を収集して動的に挿入することが簡単になります。 Sass では一般的に変数が次の方法で定義されていることを思い出してください:
$default-color:#fff !default:
$primary-color:#22ae39 !default;
より適切に管理するためにマップを使用できます:
$ color:(
default:#fff,
primary:#22ae39,
negative:#d9534f
);
Sass マップの場合、実はマップの特定のキーをマップとして使用して、マップをネストすることもできます。内部に進みます
1 つ以上のキーのペアを入力します: value;
$map:(
key1:value1,
key2:(
key-1:value-1,
),
key3 :value3
);
この関数の使用方法カラー変数の管理は非常に体系化されています。
$them-color:(
bgcolor:#000,
text-color: #fff,
link-color:#93f
),
negative:(
bgcolor:#f36,
text-color:#fefefe,
link-color:#d4e
)
);

Sass Maps用関数

変数を管理するためのmapの使用を紹介しましたが、Sassで変数を取得したり、map上でより意図的な操作を行うには、
関数を使用する必要がありますマップの、マップ自体は Sass に 7 つの関数をもたらします:
map- get($map,$key) は、指定されたキー値に基づいてマップ内の関連する値を返します
map-merge($map1,$map2): Merge 2つのマップを新しいマップにします
map-remove($map ,$key): マップ内のすべてのキーから
map-keys($map): マップ内のすべてのキーを返します Map-values($map) : マップ内のすべての値を返します map-has-key($map , $key): 指定されたキー値に基づいて、マップに対応する値があるかどうかを判断します
ある場合は true を返し、そうでない場合は false を返します
キーワード($args): 関数のパラメータを返します。このパラメータはキーと値を動的に設定できます。
Sass Maps function-map-get($map,$key)
map-get($map,$key) function $map の $key に対応する値を返すことです
if $key が $map に存在しない場合、この関数には 2 つのパラメータが含まれます:
$map: 定義されたマップ
$key: キーそれをトラバースする必要があります
$social が定義されていると仮定して、簡単な例を見てみましょう -colors マップ:
37, -aireaire 値に対応する値#3b5998、map-get() 関数を使用して実現できます。
.btn-dribble{
Color:map-get($social-colors,facebook);
}
コンパイルされた CSS:
.btn-dribble{
color:#3b5998;
}
リファレンスの引き継ぎ $social-colorsマップカラーに$weiboキーがありませんでした:map-get($soscial-colors,weibo);
}
でコンパイルされるもの今回は CSS:
.btn-weibo{
font-size: 12px;
}

Sass Maps function -map-has- key($map,$key)

map-has-key($map,$ key) 関数は、$map にこの $key がある場合は true を返し、そうでない場合は false を返します
前の例は、$key が $map にない場合、map-get($map, $key) 関数は null 値を返します
ただし、開発者にはプロンプト情報は表示されません。この状態は、map-has-key($map,$key) 関数を使用すると変更できます。
@if map-has-key($social-colors,facebook){
.btn-facebook{
color:map-get($social-colors,facebook);
}
}@else{
@warn "いいえ$social-colors マップで faceboo の color が見つかりました。プロパティが省略されました。"
}
コンパイル済み:
.btn-fackbook{
color:#3b5998;
}
この関数を使うとこんな感じで使えます。
.btn-dribble{
color:colors(ドリブル)
}
.btn -google{
color:color(google)
}
.btn-twitter{
color:colors(twitter)
}
.btn-weibo{
color:colors(weibo)
}
コンパイル済みCSS
.btn -dribble{
color:#ea4c89;
}
.btn-facebook{
color:#3b5998 ;
}
.btn- github{
color:#171515;
}
.btn-google{
color:#db4437 ;
}
.btn-twitter{
color:#55acee;
}

Sass Maps関数マップキー($map )

map-keys($map)関数は$map key内のすべてのキーを返します。これらの値は変数に代入され、リストになります。
map-keys($social-colors);
戻り値は:
"dribble","facebook","github","goole","twitter" つまり: $list:"dribble" , "facebook","github","twitter";
現時点では、Sass リストを使用してさまざまなことができます。
@function Colors($color){
$names:map-keys($social-colors);
@if not index($names,$color){
@warn "Waring:" '#{$color} は有効な色名ではありません。'";
}
@return map-get($social-color,$color);
}
上記のコードの最大の違いは、 $social- を変更するために map-key を使用していることです。 color
このマップのすべてのキーを取り出して、$names という名前のリストに割り当てます
正しい値を返します
.btn-weibo{
color:色(weibo);

}


Sass Mapsのfunction-map-values($map),map-merge($map1,$map2)

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
Valuesもカンマ区切り
map-merge($map1,$map2)

map-merge($map1,$map2)
map-merge($map1,$map2) 新しい値を素早くインポートしたい場合は、$map1 と $map2 をマージし、新しい $map を待つ機能です。 into $map
backround:#fff ;
）
$typo:(
font-size:12px,
lin-height:1.6
);
この2つの$をマージしたい場合は、このメソッドが最適です。マップを 1 つのマップにまとめるには、これを行うだけです。
$newmap:map-merge($color,$typo);
新しい地図が生成されます:
d,
background: #fff,
font-size:12px,
line-height:1.6
);

Sass Maps function-map-remove($map,$key),keywords($args)

map-remove($map ,$key)
map-remove($map,$key) 関数は、新しい
マップを取得するには、現在の $map の特定の $key を使用し、返される値はマップであることはできません。あるマップから別のマップを削除するには、マップ内のキーを削除することによってのみ新しいマップを取得できます
。 ;
keywords($args)
keywords($args) 関数は混合可能 マクロまたは関数のパラメータはマップを作成します パラメータもペアで表示され、$args がキーになります ($ 記号は自動的に削除されます)、と $args に対応する値は value.
@mixin map($args.. .){
@debug キーワード ($args) $google:#db4437,
$twitter :#55acee
);