Sass 使用上の注意_html/css_WEB-ITnose

sass (Syntactical Awesome Style Sheets) は、多くの便利な記述方法を提供する CSS プリプロセッサです。 Sass は DRY (同じことを繰り返さない) の原則を遵守しています。これにより、CSS 開発の効率が向上し、CSS の保守が容易になります。

1.

gulp-sass プラグインをインストールします。

npm install gulp-sass --save-dev

2 を使用します。 >sass には 2 つの接尾辞ファイルがあります。名前は .sass と .scss です

.sass を使用する場合は中括弧は使用できません。セレクターとルールを区別するには復帰と少なくとも 2 つのスペースを使用してください

例:

.scss を使用する場合、基本的には通常の CSS を記述するのと同じで、セレクターとルールを区別するために中括弧が使用されます。 scss は css と互換性があり、日常の執筆習慣により適合しているため、通常は接尾辞として scss を使用します。

p    color:#f00;b    background:#ddd;

例:

gulp-sass の使用法

p{    color:#f00;}b{    background:#ddd;}

上記は gulp-sass の基本的な使用法です。つまり、gulp と gulp を参照してください。 -sass プラグインを追加し、コンパイル用の scss ファイルを読み込み、出力形式が圧縮され、正常にコンパイルされた css ファイルを css フォルダーに出力します。

var gulp = require('gulp');var gulp-sass = require('gulp-sass');gulp.task('sass',function(){    gulp.src('./sass/**/*.scss')    .pipe(sass(outputStyle:'compressed'))    .pipe(gulp.dest('./css'));});

gulp-sass プラグインの使用法の詳細については、ここをクリックしてジャンプしてください

3. 基本的な使用法

3.1 変数

すべて$ で始まる変数 Sass は変数の定義にコロン (:) を使用します。

上記のコードは

$blue:#1875e7;div{    color:$blue;}

にコンパイルされます。変数を文字列に埋め込む必要がある場合は、#{}

div{color:#1875e7;}

に記述する必要があります。

上記のコードは

$side:left;    div{    border-#{side}-radius:5px;}

にコンパイルされます。 3.2 計算関数

div{border-left-radius:5px;}

Sass ではコード内で計算を使用できます。 Sass の算術演算子は次のとおりです:

Add(+)

• Subtract(-)
• Multiply(*)
• Divide(/ )
• Remainder (%)
上記の演算子は、同じ単位の数値演算にのみ使用できることに注意してください。

さらに、同じ単位の 2 つの値を乗算しても有効な CSS を生成できません

h2{    font-size:5px+2em;//错误！！！编译报错    font-size:5px+2;//7px}

/ 演算子自体は、次のような CSS 省略構文の一部です。 :16px/24px Arial; ただし、Sass はこの演算子をオーバーロードして除算演算を実行します。

h2{font-size:5px*2px;}//invalid css

演算子の優先順位:

h2{     //不执行除法操作，原样输出    font-size:16px/24px;    //使用差值语法之后，原样输出    font-size:#{$base-size}/#{$line-height};    //使用括号包裹之后，执行除法操作    font-size:(16px/24px);    //使用变量，执行除法操作    font-size:$base-size/$line-height;    //调用函数，执行除法操作    opacity:random(4)/5;    //使用算术操作符，执行除法操作    padding-right:2px/4px+3px;}

ブラケットが最も優先されます。

• 乗算、除算は加算、減算より優先されます
簡単な計算例を書きます:

上記のコードは

$var:2;body{    margin:(14px/2);    top:50px+100px;    right:$var*10%;}

< にコンパイルされます。 🎜>

3.3 ネスト

body{margin:7px;top:150px;right:20%;}

は、コードを記述するときに最も一般的な使用法です ps: 次のような属性もネストできます:

注: ボーダー コロンを追加する必要があります

p{    border:{        color:red;    }}

3.4 コメント

sass には 2 種類のコメントがあります

4. コードの再利用

//......(编译后被省略)/*......*/（保留到编译后）

4. 継承

Sass では、あるセレクターが別のセレクターを継承できます

4.2 Mixin

.class1{}.class2{    @extend .class1;    .......}

Mixin は C 言語のマクロに似ており、@Mixin A を使用して定義された再利用可能なコード ブロックです。コード ブロック

は、@include コマンドを使用して mixin を呼び出します

@mixin left{    float:left;    margin-left:10px;}

mixin の利点は、パラメーターとデフォルト値を指定できることです

div{    @include left}

@mixin left($value:10px){    float:left;    margin-right:$value;}

4.3 カラー関数

div{    @include left(20px);}

sass は、一連の色を生成するためのいくつかの組み込みカラー関数を提供します

4.4 ファイルの挿入

lighten(#ccc,10%);darken(#ccc,10%);grayscale(#ccc);complement(#ccc);

@import コマンド、外部ファイルを挿入 @import "..."; @import は css ファイルをインポートすることも、sass ファイルをインポートして @import として存在することもできます。 @import によって参照される CSS は、ページが完全にダウンロードされるまで待ってから読み込まれるため、CSS の使用はお勧めできません。そのため、@import が CSS をロードするページを閲覧すると、最初はスタイルが表示されない (ちらつくだけです) ことがありますが、これはネットワーク速度が遅い場合には明らかです。 sass ファイルをインポートすると、コンパイル中に 2 つの sass ファイルが実際にマージされて 1 つの css ファイルにコンパイルされます。

5. 高度な使用法

5. 1 条件文

@if...@else....

上記のコード

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

5. 2 つのループ ステートメント

.txt1{font-weight:blod;}.txt2{font-weight:100;}.txt3{font-weight:900;}

@for@for には 2 つの使用方法があります。開始から終了まで、範囲 [start, end-1] を走査します。開始から終了まで、範囲を移動します [開始、終了]

この Sass コードは

@for $i from 1 to 10{    .border-#{$i}{        border:#{$i}px solid blue;    }}

@while

.border-1{border:1px solid blue;}.border-2{border:2px solid blue;}.border-3{border:3px solid blue;}.border-4{border:4px solid blue;}.border-5{border:5px solid blue;}.border-6{border:6px solid blue;}.border-7{border:7px solid blue;}.border-8{border:8px solid blue;}.border-9{border:9px solid blue;}

上記にコンパイルされますコードは

 $i:1; @while $i<5{    .item-#{$i}{width:2em*$i;}    $i:$i+1;}

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

.item-1 {width: 2em; }.item-2 {width: 4em; }.item-3 {width: 6em; }.item-4 {width: 8em; }

上記のコードは

 @each $member in a,b,c,d{    .#{$member}{        background-image:url("/images/#{$member}.jpg");    }}

5、3 つのカスタム関数

.a{background-image:url("/image/a.jpg");}.b{background-image:url("/image/b.jpg");}.c{background-image:url("/image/c.jpg");}.d{background-image:url("/image/d.jpg");}

sass ではユーザー定義関数が可能

上記のコードは

@function double($n){    @return $n*2;}div{    width:double(5px);}

にコンパイルされます。これは、

div{width:10px}

などの HTML 要素のフォント サイズに基づいてパーセンテージを計算したり、レムを計算したりするためにプロジェクトでよく使用されます。上記のコードは次のようにコンパイルされます:

@function to_rem($px){    @return $px/50 + rem;}.a{width:to_rem(30);}

この記事はインターネットと「Sass and Compass in Practice」から編集されたものであり、今後も改善および更新されます。参考記事：Sass式と制御コマンド

.a{width:0.6rem}