Sass 式と制御コマンド_html/css_WEB-ITnose

Sass を深く使用したことがある人なら、ミックスインに触れたことがあるはずです。独立したミックスインは、多くの場合、複雑な機能を実装するために多数の制御命令を集約します。

この記事では、これらの制御命令と表現を説明し、実践していきます。必ずしも開発でこれらを使用するわけではないかもしれませんが、これらの命令に慣れていれば、予期せぬ利益が得られるかもしれません。

if()

if() は Sass の組み込み関数であり、同様に @if は組み込みディレクティブです。 if() は、条件判断を行い、特定の値を返すために使用されます。例は次のとおりです。

@mixin test($condition) {    $color: if($condition, blue, red);    color:$color}.firstClass {    @include test(true);}.secondClass {    @include test(false);}

コンパイル結果:

.firstClass {    color: blue;}.secondClass {    color: red;}

上記の例では、次の 3 つの関数が使用されます。 if() 関数 パラメーターはそれぞれ、テスト条件、テスト成功の戻り値、テスト失敗の戻り値を表します (false と null を除くすべてのテスト条件はテスト成功とみなされます)。上記の例で条件として数値が使用されている場合、成功したテスト値も返されます。

.firstClass {    @include test(1);}

@if

@if の後に式が続き、結果が式が true の場合、特定のスタイルを返します。例は次のとおりです:

@mixin txt($weight) {    color: white;    @if $weight == bold { font-weight: bold;}}.txt1 {    @include txt(none);}.txt2 {    @include txt(bold);}

コンパイル結果:

.txt1 {    color: white;}.txt2 {    color: white;    font-weight: bold;}

さらに、 @if ... を使用することもできます。 @else if ... @else 処理する構造体 複数の条件、例は次のとおりです:

@mixin txt($weight) {    color: white;    @if $weight == bold { font-weight: bold;}    @else if $weight == light { font-weight: 100;}    @else if $weight == heavy { font-weight: 900;}    @else { font-weight: normal;}}.txt1 {    @include txt(bold);}.txt2 {    @include txt(light);}.txt3 {    @include txt(heavy);}.txt4 { @include txt(none);}.txt5 {    @include txt(normal)}

コンパイル結果:

.txt1 {    color: white;    font-weight: bold;}.txt2 {    color: white;    font-weight: 100;}.txt3 {    color: white;    font-weight: 900;}.txt4 {    color: white;    font-weight: normal;}.txt5 {    color: white;    font-weight: normal;}

ここでの .txt4 と .txt5 は、次の目的で使用されます。 @if の解析メカニズムを示します。 .txt1 では、bold が渡されない場合、フォントの太さに関連するスタイルは生成されません。

@for

@for コマンドはループ出力によく使用されます。 @for を使用するには、「開始から終了」と「開始から終了」の 2 つの方法があります。この 2 つの違いは、前者は範囲 [start, end] を横断するのに対し、後者は範囲 [start, end-1] を横断することです。 。 @for ループで固定変数を使用して、トラバースされた要素を置き換えます。大きいものから小さいものへと移動したい場合は、start を end よりも大きくするだけです。 @for の簡単な例を次に示します。

@for $i from 1 through 4 {    .col-#{$i} { width: 100/4 * $i + %;}}

上記の例を使用すると、単純なグリッド システムを作成できます。コンパイルされた結果は次のようになります。

.col-1 {  width: 25%;}.col-2 {  width: 50%;}.col-3 {  width: 75%;}.col-4 {  width: 100%;}

上からこの例では、ループ、変数、計算などの Sass の複数の関数を組み合わせます。

@each

@each コマンドはループ出力にも使用できます。@for との違いは、@each がリストまたはマップを走査することによってループ出力を実装することです。 >

@each の後の $usr 変数は、毎回走査される要素を保存するために使用され、その後、差分構文 (#{var}) を使用して正しいイメージ パスを結合します。 コンパイル結果は次のとおりです:

@each $usr in bob, john, bill, mike {    .#{$usr}-avatar {        background-image: url('/img/#{$usr}.png');     }}

走査対象のオブジェクトがマップの場合、要素のキーと値を格納するために 2 つの変数を使用できます。例は次のとおりです。

.bob-avatar {    background-image: url("/img/bob.png");}.john-avatar {    background-image: url("/img/john.png");}.bill-avatar {    background-image: url("/img/bill.png");}.mike-avatar {    background-image: url("/img/mike.png");}

さらに、走査の場合。複数のリストがある場合は、複数のパラメータを使用して対応する要素を保存することもできます:

$ppl: ( usr1:bob, usr2:john, usr3:bill, usr4:mike );@each $key, $usr in $ppl  {    .#{$usr}-avatar {        background-image: url('/img/#{$usr}.png');    }}

コンパイル結果は次のとおりです:

$alt: alert, yellow, red;$sub: submit, white, green;$bck: back, blue, transparent;@each $type, $txt, $back in $alt,$sub,$bck {    .#{$type}-button {        color: $txt;        background-color: $back;    }}

@while

.alert-button {    color: yellow;    background-color: red;}.submit-button {    color: white;    background-color: green;}.back-button {    color: blue;    background-color: transparent;}

@whileディレクティブはループ出力にも使用できます。その後に、式が false と評価された場合にループ本体を停止する式が続きます。以下では @while を使用して上記の @for を書き換えます。

上記の例では、式を使用して @while 命令の実行を制御します。式には変数 $x があります。 , この変数は補間計算に使用される一方で、ループ本体内で累算を実行します。最後に、$x 概要

Sass の多くの機能により、フロントエンド開発は非常に簡単になりますが、Sass の命令は非常に強力ですが、エレファント フレームワークを構築しないとその美しさを感じることができないことがよくあります。それの。 Sass についてさらに学ぶと、いつかこれらの手順が必要になるでしょう ^_^。

翻訳者: Nanb​​ei 英語原文: Sass Basics: Control Directives and Expressions 翻訳アドレス: http://www.w3cplus.com/preprocessor/sass-basics-control-directives-expressions.html