インストール
Sass は Ruby で書かれているため、Sass を使用したい場合は、まず Ruby をダウンロードする必要があります。Ruby は以下のサポートのみを提供します。 Sass が動作する Ruby が分からなくても大丈夫Ruby をインストール後、公式サイトから Sass をダウンロードすると使えるようになりますSass の使い方
1. 変数
Sass は、ドル記号を使用して変数//Sass源码
$highlight-color: #000000;
.selected {
border: 1px solid $highlight-color;
}
//编译后的CSS
.selected {
border: 1px solid #000000;
}
2 を使用します。 # Sass のネスト Less
3 のように直接記述するだけ コード再利用@mixin @include @extend @function @import Sass は
@mixin を使用してコード ブロックを定義し、@include を使用して再利用できます。 @mixin はパラメーターもサポートしています <pre class="brush:css;toolbar:false">//Sass源码
@mixin border-radius($radius){
-moz-border-radius:$radius;
-webkit-border-radius:$radius;
border-radius:$radius;
}
button{
@include border-radius(5px);
}
//编译后的CSS
button {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}</pre>Sass は
//Sass源码
.block{
padding: 15px;
margin-bottom: 15px;
}
.block-primary{
@extend .block;
color: #00aff0;
}
//编译后的CSS
.block, .block-primary {
padding: 15px;
margin-bottom: 15px;
}
.block-primary {
color: #00aff0;
}Sass @import を使用して外部ファイルをインポートすることもできます。##@function を使用して関数を定義することもできます。 #4. Sass は 分岐とループをサポートします。 @if @else if @else @for @while<pre class="brush:css;toolbar:false;">//Sass源码
@mixin add-background($color){
background: $color;
@if $color==#000000{
color: #666666;
}@else {
color: #ffffff;
}
}
.section-primary{
@include add-background(#ffffff);
}
//编译后的CSS
.section-primary {
background: #ffffff;
color: #ffffff;
}</pre>
bootstrap チュートリアル ")