SASS文法

サスの説明：

我々はすべて知っているように、cssプログラミング言語ではありません。彼は好きではありませんでしたjsし、pythonそれがロジックに対処する能力を持っている、とさえ輸入その他のcssスタイルでファイルが行うことができます。そしてSass解決するためにcss、これらの問題を。彼はあなたが変数、ネストされたルールを使用することができ  mixins、インポートおよび他の多くの機能を、と完全に互換性があるcss構文。Sassファイルが終了した直接認識ページ、することはできませんSass後、だけでなく、に特殊なツールを必要とするcss使用します。

Sassのファイル拡張子：

Sass2つのファイル拡張子、1がありscss、一つはsass。別の名前サフィックス対応する構文は同じではありません。ここでは、使用scss拡張子を。言及した後に含めSass文法、それはまた、あるscss文法拡張。

Sassの基本的な構文：

コメント：

サポート/* comment */と// 注释二つの方法インチ

ネスト：

Sass構文は入れ子にできます。例えば、#mainクラスがある次の.header、そして我々は次の形式を書くことができます。

#main { 
    背景：#CCC。
    .header { 
        幅：20ピクセル。
        高さ：20ピクセル ; 
    } 
}

 

それらをより直感的に書きます。これは、ことを確認するために.headerある#mainの下で。

親セレクタを指します&）（：

時には、サブセレクタを入れ子になった、あなたは、この時間ができ、親セレクタを使用する必要が&表現すること。次のようにサンプル・コードは次のとおりです。

{ 
    フォント重量：太字。
    テキスト装飾：なし ; 
    ＆：ホバー{ 
        色：＃888。
    } 
}

 

変数を定義します。

はい、あなたは間違って聞きました。ではSass、変数に定義することができます。あなたはそれに直接それを使用したい場合は、より一般的な値のいくつかのために、我々は後に、変数によって、最大保存することができます。使用して変数を定義し$たシンボルを。次のようにサンプル・コードは次のとおりです。

$ mainWidth：980px; 
#main { 
    幅：$ mainWidth。
}

 

操作：

ではSassサポート業務。例えば、今、コンテナの全体の幅をされている900し、我々は変数を介してそれらの幅を設定することができ、内部の3つのボックスの平均を置くために、。次のようにサンプル・コードは次のとおりです。

$ mainWidth：900px; 
■は { 
    幅：$ mainWidth / 3。
}

 

@import構文：

のみインポートファイル、およびサイトのパフォーマンスに大きな影響を与えます。そして、中にセットの完全な実現独自のメカニズムです。彼は単に地元のインポートに指定されたファイルのコードをコピーすることができます。次のようにサンプル・コードは次のとおりです。css@importcssSass@import

@import "init.scss"。

 

@extend構文：

時々 、私たちは、セレクタを持っている、あなたは、私たちがすることができ、別のセレクタのスタイルが必要な場合がありますextend直接参加セレクタのスタイルを割り当てること。次のようにサンプル・コードは次のとおりです。

.ERROR { 
    背景色：#fdd。
    国境：1pxの固体＃1 F00 ; 
} 
.seriousエラー { 
    @extendの.ERROR。
    ボーダー幅：3px ; 
}

 

@mixin構文：

時には、いくつかのスタイルのコード。私たちは、多くの場所を取ることがあります。その後、我々は、私として彼を定義することができますmixin。あなたはそれへの直接参照を使用する必要がある場合。次のようにサンプル・コードは次のとおりです。

大テキスト@mixin { 
  フォント：{ 
    家族：ゴシック ; 
    サイズ：20ピクセル ; 
    重量：太字 ; 
  } 
  カラーます。＃FF0000。
}

 

あなたは残りの使用したい場合はmixin、時間を、それができる@include含まれて。次のようにサンプル・コードは次のとおりです。

.PAGEタイトル { 
  @include大テキスト。
  パディング：4PX。
  マージントップ：10pxの ; 
}

 

@mixinまた、パラメータを使用することができます。次のようにサンプル・コードは次のとおりです。

セクシーボーダー（$色、$幅）@mixin { 
  ボーダー：{ 
    色：$色。
    幅：$幅 ; 
    スタイル：破線 ; 
  } 
}

 

その後にinclude時間、私たちは、パラメータを渡す必要があります。次のようにサンプル・コードは次のとおりです。

P {  
    @includeセクシーボーダー（青、1ピクセル）。
}

 

より詳細なチュートリアル：

ます。http：//sass.bootcss.com/docs/sass-reference/より詳細なチュートリアルでは、参照することができます。