高度な Sass への道、パート 2 (上級)_html/css_WEB-ITnose

Sass パート 2 (上級)

1. データ型

1.1 Number

• 数値型、10 進数型、ピクセル単位の数値型はすべて Number 型に属します
• 数値型の詳細はここをクリックしてください。以下は小さな例です

1.$n1: 1.2;2.$n2: 12;3.$n3: 14px;4.$n4: 1em;

1.2 String

• 二重引用符なし、二重引用符あり、一重引用符ありはすべて String 型に属します
• String 型の詳細については、以下のここをクリックしてください。小さなデモ

1.$s1: container;2.$s2: 'container';3.$s3: "container";

1.3 List

• リスト型の値、構文 nth (リスト、インデックス)、最初のパラメータは取得する対象、つまりリスト型変数の名前を示し、2 番目のパラメータはインデックスを示します。ここでのインデックスは JavaScript とは少し異なります。JavaScript のインデックスは基本的に 0 から始まります
• リスト型メソッドの詳細については、ここをクリックしてください

1.$padding: 1px 5px 10px 15px;2..container {3.    padding: nth($padding,2) nth($padding,4);4.}5.6.// out css7..container { padding: 5px 15px; }

マップ型の値、構文map-get (map, key)、最初のパラメータは取得対象、つまりマップ型変数の名前を示し、2番目のパラメータは取得するキーを示します
詳しくはここをクリックしてください以下は小さなデモです

1.$map: (color: red,background-color: #f00);2.3.body {4.    color: map-get($map, color);5.}6.7.// out css8.body { color: red; }

1.5 Color

1./*! 颜色类型*/2.$c1: blue;3.$c2: #fff;4.$c3: rgba(255,255,0,0.5);5.body {6.    color: $c3;7.}8.9.// out css10.body { color: rgba(255, 255, 0, 0.5); }

1.6 Boolean

Boolean 型は true と false の 2 つのタイプに分かれています
$bt: true;
$bf: false ;

1.7 Null

null アプリケーションのシナリオは次のとおりです

1.$null: null;2.body {3.    @if $null == null{4.        color: red;5.    }6.}7.8.// out css9.body { color: red; }

2. 変数操作

2.1 ==、!=

をサポート全種類

2.2 <, >,<=,>=

数値型のみをサポートします

2.3 +,-,*,/,%

計算するときに値を区切るにはスペースを使用することをお勧めしますたとえば, マイナス記号が分離されていない場合、2 つの変数は 1 つの変数として扱われます

ここにいくつかの小さな例があります

• 1.// scss 2.$width1: 100px;3.$width2: 125px;4.span {5.    width: $width1 + $width2;6.}7.8.a:hover {9.    cursor: e + -resize;10.}11.a::before {12.    content: A + 'bc';13.}14.a::before {15.    content: "A" + bc;16.}17.p {18.    padding: 3px + 4px auto;19.}20.$version: 3;21.p::before {22.    content: "hello,Sass #{$version}"; /*! 这里如果加上大括号就会输出3,不加的话,会直接输出$version */23.}24.25.p {26.    font: (20px/10px);27.    width: $width2 / 2;28.    width: round($width2 / 2);29.    height: (100px / 2); /*! 这里如果想让100px/2 起作用的话需要加上一个小括号,告诉Sass这是一个表达式,让它进行计算*/30.}31.32.// out css33.span { width: 225px; }34.a:hover { cursor: e-resize; }35.a::before { content: Abc; }36.a::before { content: "Abc"; }37.p { padding: 7px auto; }38.p::before { content: "hello,Sass 3"; /*! 这里如果加上大括号就会输出3,不加的话,会直接输出$version */ }39.p { font: 2; width: 62.5px; width: 63px; height: 50px; /*! 这里如果想让100px/2 起作用的话需要加上一个小括号,告诉Sass这是一个表达式,让它进行计算*/ }40.41.

3.Mixin

3.1 簡単な例

JavaScript を学習したことのある皆さん。このメソッドに精通している場合、Scss の mixin は JavaScript のメソッドと似ています

• 1.// 没有参数的mixin2.@mixin test1 {3.    color: red;4.}5.6.body {7.    @include test1;8.}9.10.// 一个参数11.@mixin test2($color: red) {12.    color: $color;13.}14.body {15.    @include test2(#fff);16.}17.18.// 多个参数19.@mixin test3($color: red, $fontSize: 12px) {20.    color: $color;21.    font-size: $fontSize;22.}23.24.body {25.    // 直接传值, 不可以打乱顺序26.    // @include test(blue, 18px);27.28.    // 通过键值对的方式,可以打乱传值的顺序29.    @include test3($fontSize: 18px, $color: blue);30.}31.32.// out css33./* line 6, test1 */34.body { color: red; }35.36./* line 14, test2*/37.body { color: #fff; }38.39./* line 24, test3*/40.body { color: blue; font-size: 18px; }

3.2 複数値のパラメーターを渡す

複数値のパラメーターを渡す場合は、パラメーターの後に 3 つのドットを追加する必要があります。 .. このパラメータには複数の属性が含まれる可能性があることを示し、カンマを区別せず、渡されたパラメータを 1 つのパラメータとして解析するように Sass に指示します。これを呼び出すと、書き込まれた内容がプレースホルダーに直接配置されます。

• 1.// scss2.// 多值传递3.@mixin test4($shadow...) {4.    text-shadow: $shadow;5.    -webkit-text-shadow: $shadow;6.    -moz-text-shadow: $shadow;7.}8..text {9.    @include test4(1px 1px 10px red, 0 0 5px blue);10.}11.12.// out css13..text { text-shadow: 1px 1px 10px red, 0 0 5px blue; -webkit-text-shadow: 1px 1px 10px red, 0 0 5px blue; -moz-text-shadow: 1px 1px 10px red, 0 0 5px blue; }

4. 関数

4.1 組み込み関数

組み込み関数は、システムによって定義された関数です。ここをクリックしてください

4.2 カスタム関数

関数に関して言えば、Sass では関数と return の前に @ 記号を追加する必要があると考えざるを得ません。次に例を示します。

• 1.// scss2.@mixin style-for-iphone {3.    @media only screen and (min-width:320px) and (max-width:568px){4.       @content;5.    }6.}7.@include style-for-iphone {8.    height: 100px;9.    font-size: 12px;10.}11.12.// out css13.@media only screen and (min-width: 320px) and (max-width: 568px) { height: 100px; font-size: 12px; }

5 . コンパイル出力

5.1 debug

@debug "ここの内容はコンソールに出力されます"

5.2 warn

@warn "ここの内容は次のように出力されますコンソール"

5.3 エラー

6. 条件文とループ文

6.1 条件文のいくつかの使用法

if、次のように

1.// scss2.@function double($width){3.    @return $width * 2;4.}5.6.body {7.    $color: rgba(255,0,0, .3);8.    color: $color;9.    width: 100%;10.    height: 100%;11.    p {12.        // 内置函数13.        color: darken($color, 0.5); // 加深14.        background-color: lighten($color, 0.9);// 变浅15.        z-index: str-length('aaaa'); // 字符串的长度16.        z-index: str-index('aaabddd','b');// 指定字符的索引的位置17.        width: double(5px);18.    }19.}20.21.// out css22.body { color: rgba(255, 0, 0, 0.3); width: 100%; height: 100%; }23.body p { color: rgba(252, 0, 0, 0.3); background-color: rgba(255, 5, 5, 0.3); z-index: 4; z-index: 4; width: 10px; }

6.2 ループ文

文法 1 を $ でi from 1 to 10

this このステートメントは 1 から 10 を意味しますが、10 は含まれません

構文 2 for $i from 1 to 10

このステートメントは、10 を含む 1 から 10 を意味します

• 次のコードは、through の使用法と to の使用法です。ここでは説明しません
  rrree
• 6.3 while
  while を使用するときは、いくつかの点に注意する必要があります
まず、次のとおりです。変数は事前に宣言する必要があります

2番目: ステップサイズはwhileで設定できます

1.// scss2./*!if 的用法*/3.$width: 800;4.body {5.    // 跟三目运算符类似6.    color: if($width > 800, blue, red);7.}8.@if $width > 800 {9.    body {10.        color: red;11.    }12.} 13.@else if $width == 800 {14.    p {15.        color: blue;16.    }17.}18.@else {19.    body{ 20.        color: blue;21.    }22.}23.24./// out css25.body { color: red; }26.p { color: blue; }

• 7. each
  7.1 通常のトラバース

  1.// scss2.@for $i from 1 through 5 {3.    .span#{$i} {4.        width: 20% * $i; 5.    }6.}7.8.// out css9..span1 { width: 20%; }10..span2 { width: 40%; }11..span3 { width: 60%; }12..span4 { width: 80%; }13..span5 { width: 100%; }

  7.2 トラバースリスト
  ここでの表示方法は次のとおりです1 つのキーと 1 つの値の形式で、Index の外側に 1 つ追加し、内部で 1 を追加する操作を実行し、対応する効果を取得することもできます

$key はキーを表します。 value、$color は値を表します

1.// scss2.$j: 6;3.@while $j > 0 {4.    .p#{$j} {5.        width: 20% * $j;6.    }7.    $j: $j - 3;8.}9.10.// out css11..p6 { width: 120%; }12..p3 { width: 60%; }

7.3 マップを走査します

マップを走査します $key はキー値を表し、$val は値を表します

1.//scss2.@each $key, $val in (default: green, dange: blue, error: red) {3.    .alert-#{key} {4.        color: $val;5.    }6.}7.8.// out css9..alert-key { color: green; }10..alert-key { color: blue; }11..alert-key { color: red; }12.

8. 小实例

• 这里写了个小实例, 有兴趣的朋友可以看看,其实我也是抄的别人的实例,等会去写个小项目,orz我要睡觉了,明天写吧….好累的说,代码粘在下面了…

1.// scss2.@function buildContainer($num: 5) {3.    $map: (defaultValue: 0);4.    $rate: percentage(1 / $num); // percentage 求出百分比5.    @for $i from 1 through 5 {6.        $tempMap: (col#{$i} : $rate * $i);7.        $map: map-merge($map, $tempMap);8.    }9.    $map: map-remove($map, defaultValue);10.11.    @return $map;12.13.}14.@mixin buildContainer($num: 5) {15.    $map: buildContainer($num);16.    @each $key, $val in $map {17.        .#{$key} {18.            width: $val;19.        }20.    }21.}22.23.@include buildContainer();24.25.// out css26..col1 { width: 20%; }27..col2 { width: 40%; }28..col3 { width: 60%; }29..col4 { width: 80%; }30..col5 { width: 100%; }