ブートストラップサスの使い方-ブートストラップのチュートリアル-php.cn

ブートストラップサスの使い方

藏色散人

リリース： 2023-02-08 11:46:31

オリジナル

2191 人が閲覧しました

#この記事の動作環境: Windows7 システム、bootstrap3、Dell G3 コンピューター。

インストール

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 はパラメーターもサポートしています <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">ログイン後にコピー</div></div>Sass は

@extend## を使用できます# クラスを継承する

//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

//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; 
}

ログイン後にコピー

(推奨: "bootstrap チュートリアル ")

以上がブートストラップサスの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。