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

@if
@if ディレクティブは、条件に基づいてスタイル ブロックを処理できる SassScript であり、条件が true の場合はスタイル ブロックを返し、そうでない場合は @if に加えて別のスタイル ブロックを返します。 、@else if および eles と一緒に使用できるもあります。 display:block;
}
@else{
@debug "$boolean is #{$boolean}";
display: none; @include blockOrHidden;
css
.block{
}
.hidden{
display:none;
}

@for ループ (その 1)

Sass で @for ループを使用するには 2 つの方法があります:
@for $i from
@for $i from to
$i は変数を表します
start は開始値を表します
end は終了値を表します
両者の違いが鍵です 「through」という言葉は「end」という数字を含むことを意味します「to」には「end」という数字は含まれません。
以下のコードでは、まず through キーワードを使用してみましょう。
@for $i from 1 throug 3 {
.item-#{$i} {
width:2em *$i;
}
}
cssをコンパイル .item-1{ width:2em;
}
.item-2{
width:4em;
}
.item-3{
width:6em;
}
in in in in in in on in .item-#{ $i} { width:2em * $i ;}
}
コンパイル済み css:
.item-1{
width：2em;
}
.item-2{
width：4em;
}

@forループ(その2)

@forが適用されるグリッド システム内で各グリッド クラスのコードを生成します。 float:left;
margin-left:$grid-gutter/2;
-width *$grid-gutter *($i - 1);
@extend %grid;
}
}
コンパイル済みcss
。 span1, .span2, .span3, .span4, .span5
, .span6, .span7, .span8, .span9, .span10,
, .span11,, .span12{
float:left;
margin-left: 10ピクセル;
margin-right:10px;
}
.span1{
width:60px ; .span4{ width:300px; }
.span5{
width:380px ;
}
.span6 {
width:400px;
}
.span7{
width:540px;
}
.span8{
wi dth:620px;
　　　　　　}
.span9{
width:700px;
}
.span11 {
width:860px;
}

. #{ $ Grid-Prefix}#{$ i} {
width: $ Grid-Width * $ I + $ Grid-Grutter * ($ i -1); という点以外はあまり違いはありません。 @for の の値が異なります。 through に一致する の値は 12 であり、トラバーサルの終了値も の値と同じ 12 です。 to と一致する の値は 13 で、トラバーサルの終了値は、 の対応する値から 1 を引いた 12 になります。

@while ループ

他の命令と同じ)、式の値が false
になるまで、異なるスタイルのブロックを生成してループを停止します。これは @for 命令と非常によく似ており、@while の後ろの条件が true である限り実行されます。
例:
//SCSS
$types:4;
width:$type-width + $types;
width:23px;
}
.while-2{
width: 22px; } .ながら-1{
width:21px;
}

@eachループ

@eachループはリストを走査し、それでもリストから対応する値を取り出すことです。
@each ループ命令形式:
@each $var in
例:
@mixin author-images{
@each $author in $list {
. photo-#{$author}{
背景: url("/images/avatars/#{$author}.png") no-repeat;
}
}
}
.anthor-bio{
@include author-images;
}
CSS をコンパイル
.author- bio .photo-adam{
background:url("/images/avatars/adam.png") no -repeat;
}
.author-bio .photo-john {
background:url("/images/avatars/john .png") no -repeat; } .author-bio .photo-wynn{
background:url("/images/avatars/wynn.png") no - 繰り返し;
}
.author-bio .photo- mason{
background:url("/images/avatars/mason.png") no - 繰り返し;
}
.author-bio .photo-kuroir{
背景: url("/images/avatars/wynn.png") no -repeat;
}
Sassの機能紹介
主な機能としては以下が挙げられます。
文字列関数
数値関数
リスト関数
カラー関数
相互観察関数
三項関数 など
String function-unquote() function
String 関数は、その名の通り、文字列を処理するために使用される関数です。Sass には 2 種類の文字列関数があります。
unquote($string): 文字列から引用符を削除します
quote($string): 文字列に引用符を追加します。

1.unquote() 関数。

unquote()関数は主に文字列から引用符を削除するために使用されます。文字列が引用符で囲まれていない場合は、元の文字列が返されます。 .test1{
}
.test5{
content:unquote('"Hello Sass!"');
}
.test6{
content:unquote(Hello Sass) );
}
コンパイルされた css コード
// css
.test1{
content:Hello Sass!; }
.test2{
content:'Hello Sass! }
.test3{
content:I'm Web Designer;テスト4 {
content:'Hello Sass!'; }
.test5{
content:"Hello Sass!"; }
.test6{
content:Hello Sass!;文字列は削除できません。
文字が引用符で囲まれていない場合は、文字列そのものが返されます。 -String 関数 -quote () 関数
Quote () 関数は、主に文字列に引用符を追加するために使用される unquote () 関数とは正反対です。文字列自体に引用符
が含まれている場合は、一律に二重引用符に置き換えられます。 .test3{
content: quote(ImWebDesigner) ;
}
.test4{
content: quote(' ');
}
コンパイルされたcssコード
// css
.test1{
content: "こんにちはサス！」 ;
}
.test2{
content: "Hello Sass!"
}
.test3{
content: "ImWebDesigner";
}
.test4{
content: "";
}
quote() 関数を使用すると、二重引用符は文字列番号にのみ追加し、文字列の途中に一重引用符またはスペースがある場合は、
一重引用符または二重引用符で囲む必要があります。そうしないとコンパイル中にエラーが報告されます。
文字列関数 - 大文字に()、小文字に()
1.大文字に()、小文字に()
大文字に()
//SCSSテスト{text：aaaa;
.test{
text: to- lower - cass(AAAAA);
text: to- lower-case(aA-aAAA-aaa)
}
コンパイルされたcssコード; //css
test{
. ] in � 数値関数について
Sass の配列関数は、数値に対する一連の関数関数を提供する必要があります:
Percentage($value): 単位数値をパーセンテージに変換せずに値を変換します:
round($value): 値を四捨五入して変換します最も近い整数に変換します;
ceil($value): それより大きい小数を次の整数に変換します;
Floor($value ): 数値を小数部分で割ります;
abs($value): 絶対値を返します。数値の。
min($numbers...) いくつかの数値の間の最小値を求める:
max($numbers...) いくつかの数値の間の最大値を求める:
random() 乱数を取得する。
数値関数-percentage()

1.percentage()

Percentage()関数は主に単位のない数値をパーセンテージ形式に変換することです:
>>percentage(.2) 20% > >percentage(2px / 10px)
20%
>>percentage(2em / 10em)
20%
>>
.footer{
width:percentage(. 2)
}
コンパイルされた CSS コード ;
.footer{
width: 20%;
}

Number function-round() function

round() 関数は数値を最も近い整数に丸めることができます;
>>round(12.3)
12
>> ; ラウンド(12.5)
13
>>ラウンド(1.499999)
1
>>ラウンド(20%)
　　　　　　20%
>>round(3.9em)
4em
>>round(2.3px)
2px
>>round(1px /3px)
0
>>round(3px / 2em)
2px/em

.footer{
width:round(12.3px)
}
コンパイル済みcss
.footer{
width:12px;
}
数値関数 - ceil()関数
ulous herdie _ceil() 関数は、数値を次のように変換します。それ自体に最も近い整数は、それ自体の小数点以下に相当する約 1 の整数に変換されます。つまり、入力のみで四捨五入は行われません
2
>>ceil( 2.1)
3
>>ceil (2.6)
3px
>>ceil(2px / 3px )
1
width:ceil(12.3px);
}
コンパイル済みCSSコード:
.footer{
width: 13px;
}
数値関数フロア() 関数
floor() 関数は ceil() 関数の逆で、主に小数部分から数値を削除します。またキャリーは行われません。つまり、キャリーの計算は行わずに丸めのみが行われます。
; gt;
3px/em
.footer{
width:floor(12.3px);
}
コンパイルされたcssコード
.footer{
width:12px;
}


Number function-abs() function

abs( ) functionは数値の絶対値を返します。
em)
2em
> abs(-.5%)
0.5%
>>abs(-1px / 2px)
0.5
.footer{
width:abs(-12.3px)
}
コンパイルしたCSSコード：
. footer{
width:12px;
}

数値関数-min()関数、max()関数

min()関数の主な機能は、複数の数値の中から最小のものを見つけることです。この関数は任意の数のパラメータに設定できます。
>>min(1,2,1%,3.300%)
1%
>> min(1px,2,3px)
1px
>>min(1em,2em,6em) 1em ただし、min()関数内で2種類の異なる単位が同時に現れた場合はエラーメッセージが報告されます。
>>min(1px, 1em)
SyntaxError: Incompatibility Units:'em' and 'px'.

max() 関数

max() 関数は min 関数と同じで、違いは次のとおりです。 max() 関数 一連の書籍番号の最大値を取得するために使用されます。
>> max(1,5)
5
>>max(1px,5px)
5px
同様に、max()関数に異なる単位がある場合、エラーが報告されます:
> > ; max(1,3px,5%,6)
SyntaxError: Incompatibility Units: '%' and 'px'.
Numeric function-random() function
random() 関数は乱数を取得するために使用されます。
>>ランダム()
0.03886
>>ランダム()
0.26839
>>ランダム()
0.85065 リスト関数の紹介

リスト関数には主に以下のものがありますリストパラメータを使用するいくつかの関数。主に次の形式が含まれます。
length($list): リストの長さの値を返す:
nth($list,$n): リストで指定された特定のタグの値を返す。
join($list1,$list2,[$separator]): リストの最後に特定の値を置きます
zip($lists...); 複数のリストを多次元リストに結合します。Index($list,$value) は、リスト内の値の位置の値を返します。
length()関数
length()関数は、主にリストにいくつの値があるかを返すために使用されます。簡単に言うと、リストにいくつの値があるかを返します。 >length(10px)
1
>>length(10px 20px (ボーダー 1px ソリッド) 2em)
4
それ以外の場合、関数はエラーになります
>> length(10px, 20px,(ボーダー 1px ソリッド), 2em)
SyntaxError: 引数の数が違います(4 for 1) for'length
nth($list,$n)
nth()関数はリスト内の特定の位置の値を指定するのに使われますが、Sassでは。 , nth() 関数は他の構文とは異なり、1 はリストの最初のタグ値を参照します
2 はリストのタグ値の 2 番目のタグ値を参照します。
>> nth(10px 20px 30px,1)
10px
>>nth((1px ソリッドレッド) border-top green,1)
(1px "solid" #ff0000)
n番目に$n( $list,$n) 関数は 0 より大きい整数でなければなりません;