Sassの学習

1. SASS とは

SASS は、多くの便利な記述方法を提供し、デザイナーの時間を大幅に節約し、CSS 開発をシンプルかつ保守しやすくする CSS 開発ツールです。この記事では、SASS の主なメソッドをまとめます。この記事の目標は、日常の一般的な使用では公式ドキュメントを読む必要がないことです。

2. インストールと使用

2.1 インストール

SASS は Ruby 言語で書かれていますが、この 2 つの構文は Ruby 言語とは何の関係もありません。 Ruby を理解していなくても、最初に Ruby をインストールしてから SASS をインストールするだけで、コマンドラインに次のコマンドを入力できます:

gem insrall sass

これを使って。

2.2 使用

SASS ファイルは通常のテキスト ファイルであり、その中で CSS 構文を直接使用できます。サフィックス名は .Scss で、Sassy CSS を意味します。以下のコマンドで.scssファイルからcssに変換されたコードを画面上に表示できます。 (ファイル名が test であると仮定します)

sass test.scss

表示された結果をファイルに保存する場合は、その後ろに .css ファイル名を付けます。

sass test.scss test.css

SASS には 4 つのプログラミング スタイル オプションがあります

*nested: ネストされたインデントされた CSS コード。これがデフォルト値です。

*expanded: インデントされていない、展開された CSS コード。

*compact: 簡潔な形式の CSS コード。

*compressed: 圧縮された CSS コード

本番環境では、通常、最後のオプションが使用されます

sass ---style 圧縮 test.sass test.css

また、SASS にファイルまたはディレクトリを監視させることもできます。ファイルが変更されると、コンパイルされたバージョンが自動的に生成されます。

//ファイルを見る

sass --watch input.scss

//ディレクトリを見る

sass --watch app/sass:public/stylesheets

SASS の公式 Web サイトはオンラインコンバーターを提供しています。以下のさまざまな例を実行してください

3. 基本的な使用法

3.1 変数

SASS では変数の使用が許可されているため、変数は $ で始まります。

$blue : #1875e7;

div{

color :$blue

}

変数を文字列に埋め込む必要がある場合は、#{} に記述する必要があります。

$side : left;

.rounded{

border-#{side}-radius:5px;

}

3.2 計算関数

SASS を使用すると、コード内で計算を使用できます

Body{

margin : (14px/2);

top : 50px + 100px;

right : $var * 10%;

}

3.3 ネスト

SASS ではセレクターのネストが可能です。たとえば、次の CSS コード

div h1{

color : red;

}

は、

div{

Hi{

color : red;

}

}

属性として記述できます。入れ子にすることもできます。たとえば、border-color 属性は

p{

border:{

color:red;

}

}

border の後にコロンを追加する必要があることに注意してください。

ネストされたコード内では、& を使用して親要素を参照できます。たとえば、border-color 属性は次のように記述できます:

a{

&:hover{ color : #ffb3ff; }

}

3.4 コメント

SASS には 2 つのコメント スタイルがあります。

標準 CSS コメント /* comment */ はコンパイルされたファイルを保持します。

単一行のコメント //comment は SASS ソースファイルにのみ保持され、コンパイル後に省略されます。

/* の後に感嘆符を追加して、「これが重要なコメントであることを示します」。このコメント行は圧縮モードでコンパイルされた場合でも保持され、通常は著作権情報を宣言するために使用できます。

/*!

重要な注意事項

*/

4. コードの再利用

4.1 継承

SASS では、既存の class1:

.class1{

border:1px などの 1 つのセレクターが許可されます。 Solid #ddd;

}

class1 を継承するには、class2 は @extend コマンドを使用する必要があります:

.class{

@extend.class1;

font-size:120%;

}

4.2 Mixin

Mixin は、再利用可能なコード ブロックである C 言語のマクロ (マクロ) に似ています。

@mixin コマンドを使用してコード ブロックを定義します。

@mixin left{

float:left;

margin-left:10px

}

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

div{

@include left;

}

mixin の違いはパラメータとデフォルト値を指定できることです。

@mimin left($value:10px){

float:left;

Margin-right:$value

}

使用する場合は必要に応じてパラメータを追加してください

div{

@include left(20px ) ;

}

以下は、ブラウザーのプレフィックスを生成するために使用されるミックスインの例です。

@mixinrounded($vert,$horz,$radius:10px){

border-#{$vert}-#{$horz}-radius:$radius;

-moz-border-radius-#{ $vert}#{$horz}:$radius;

-webkit-border-#{$vert}-#{$horz}-radius:$radius;

}

使用する場合は次のように呼び出すことができます

#navbar li{ @includerounded(top,left);}

#footer{ @includerounded(top,left,5px);}

4.3 カラー関数

SASS は、次の目的でいくつかの組み込み関数を提供します。シリーズカラーを生成します。

明るく(#cc3,10%)//#d6d65c

暗く(#cc3,10%)//#a3a329

グレースケール(#cc3)//#808080

補色(#cc3)//#33c

4.4 ファイルの挿入

@import コマンドは、外部ファイルを挿入するために使用されます。

@import “path/filename.scss”;

.css ファイルを挿入する場合は、css import コマンドと同等です。

@import “foo.css”;

5. 高度な使用法

5.1 条件文

@if を使用して判断できます。

p{

@if 1+1 ==2{border:1px Solid ;}

@if 5

}

は @else コマンドでもサポートされています:

@if lightness($color)>30%{

}@else{

}

5.2 ループステートメント

SASS は for ループをサポートしています:

@for $i from 1 to 10 {

.border-#{$i}{

Border:#{$i}px Solid blue;

}

}

while ループもサポート:

$i:6;

@while $i >0{

.item-#{$i}{width:2em *$i}

$i:$i-2

}

各コマンド、次のようなもの:

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

.#{$member}{

Background-image:url(“image/#{$ member }.jpg”);

}

}

5.3 カスタム関数

SASS を使用すると、ユーザーは独自の関数を作成できます。

@function double($n){

@return $n*2;

}

#sidebar{

Width:double(5px);

}