Sass 学習 Research_html/css_WEB-ITnose

この記事は、過去 2 日間で Sass を学習したことの要約と要約として捉えることができ、簡単に記録するだけです。皆さんのお役に立てれば幸いです

誰もが今の Sass が何なのかを理解しているかもしれません。実はCSSの開発ツール、あるいはCSSのプログラミングとも言えます。実際、これはlessと非常によく似ています。あるいはほぼ同じです。しかし、これら 2 つの高度な用途では、個人的には Sass の方が好きです。

sass のインストールとコンパイルについては、オンラインで確認したのでこれ以上は言いません

Iコアラと一緒にまとめました。

以下は、sass のいくつかの機能の簡単な要約です。

1. 変数:

sass では変数が使用でき、sass 内の変数はすべて $ で始まります。

$blue:#249804;

div{

color:$blue;

}

文字列に変数を埋め込む必要がある場合は、 #{}

と同様に匯でやった 聊義でのカスタムグリッド幅のsass記述方法:

@mixincolWidth($value:20%) {

-webkit-box-flex: 0;

-webkit-flex: 0 0 $value;

-moz-box-flex: 0;

-moz-flex: 0 0 $value;

- ms -flex: 0 0 $value;

flex: 0 0 $value;

}

$i:1;

@while $i

.col-#{$i}{

@includecolWidth($i* 1 %);

$i:$i+1;

}

}

／／使用ここで、Mixin とループについては後で説明します。

変数は非常に単純で、基本的にはそれだけです。

2. 計算関数

非常に簡単ですので、例を示します

は、$i*1%;

などの上記の例でも使用されます: margin: (10px+2px);

3. ネスト

ここでのネストは、dom ツリーのツリー構造のように感じられます。

非常に簡単ですので、例を挙げてみましょう

.hly{

.expense-type-icon-list {

box-shadow：inset 0px 3px 5px 3px rgba（0、0、.26）; img {

margin-left: 0px;

}

}

対応する生成された CSS:

.hly .create-invoice .expense-type-icon-list {

box-shadow: inset 0px 3px 5px 3px rgba(0, 0, 0, 0.26); }

.hly .create-invoice .expense-type-icon-list .scroll {

float: left;

.hly .create-invoice .expense-type-icon-list .scroll .scroll-content-container {

幅: 35em;

パディング: 8px 10px;

float: left; }

.hly .create-invoice .expense-type-icon-list .scroll .scroll-content-container img {

float: left ;

margin-left: 5px; }

.hly .create-invoice .expense-type-icon-list .scroll .scroll-content-container img: first-child {

margin-left: 0px; }

4. Sass では 1 つのセレクターを継承できます。たとえば、別のセレクターとして、

.class1{

border:1px soild #ddd;

があります。

}

class2 が class1 の属性を継承したいので、@extend コマンド

.class2{

を使用します。 @extend .class1;

font-size:1.5em;

}

5. Mixin

これマクロの定義については、変数の例でangularjsの命令を記載しています。より具体的に説明しましょう

ここでは、ミックスインを通じてコード ブロックを定義します

または、上記の例を取り上げます:

@ mixin ColWidth($value:20%) {

-webkit-box-flex: 0;

-webkit-flex: 0 0 $value;

-moz-box -flex: 0;

-moz-flex: 0 0 $value;

-ms-flex: 0 0 $value;

flex: 0 0 $value ;

}

@include を使用して呼び出します。

div{

@includecolWidth(30%);

}

これを見ると混乱するかもしれません質問があるのですが、なぜここのミックスインにパラメーターがあるのでしょうか?

実際、これが Mixin の機能です (もちろん、指定する必要はありません)

指定すると、別の値を渡すことも、もちろん、デフォルトの場合、例えば上記の例では 20%

6. カラー関数

, 基本的には必要ないと思うのでよくわかりません。私はインターネットからいくつかの例を見つけただけです:

lighten(#cc3, 10%) // #d6d65c

darken(#cc3, 10%) // #a3a329

greyscale(#cc3) // #808080

complement(#cc3) // #33c

これをさらに確認できます。

7. ファイルを挿入します

簡単なコマンド @import

@import("path/fileName.scss");

.css ファイルの場合

@import "fileName.css";

8. 条件文

ここからは、sass

@if を使用して

div{

@if 1+2 ==3 {border:1px soild #ddd};

@if 3 }

もちろん、if が存在するので、else は必須である必要があります。使用法は次のとおりです。

@if lightness($color) > 30% {

background-color: #000;

} @else {

sass は for ループ、while ループ、および each をサポートします。コマンド

for ループ:

@for $i form 1 to 10{

.class-#{i}{

margin-left:#{i}px;

}

}

while ループ (Huilian Yizhong の例も同様) ):

@mixincolWidth($value:20%) {

-webkit-box-flex: 0;

-webkit-flex: 0 0 $ value;

-moz-box-flex: 0;

-moz-flex: 0 0 $value;

-ms-flex: 0 0 $value;

フレックス: 0 0 $value;

}

$i:1;

@while $i
.col-#{$i}{

@includecolWidth($i*1%);

$i :$i+1;

}

}

各例:

@each $member in a , b, c, d {

.#{$member} {

background-image: url("/image/#{$member}.jpg");

}

}

10. カスタム関数

もちろん特殊記号もあります: @function @return

@function double($i){

@return $i*2;

}

div{

margin:double(2em);

}

最後に、プロジェクトではあまり高度でない sass の使用法を使用してみてください。プロジェクトの実行が非常に遅くコンパイルされたり、高度な使用法でスタックして他の sass スタイルをコンパイルできなくなったりする可能性があるためです。 >

たとえば、カスタム グリッドに使用する Mixin はプロジェクト内ですぐにコンパイルできますが、while ループで使用するとスタックします。その後、コアラがコンパイルしたCSSファイルをプロジェクトに導入しました~