So verwenden Sie Bootstrap-Sass

So verwenden Sie Bootstrap-Sass: 1. Laden Sie Ruby herunter. 2. Laden Sie Sass von der offiziellen Website herunter. 3. Definieren Sie Codeblöcke über „@mixin“.

Die Betriebsumgebung dieses Artikels: Windows 7-System, Bootstrap3, Dell G3-Computer.

Installation

Sass ist in Ruby geschrieben. Wenn Sie also Sass verwenden möchten, müssen Sie zuerst Ruby herunterladen. Ruby bietet nur Unterstützung für die Ausführung von Sass. Es spielt keine Rolle, ob Sie Ruby nicht verstehen

Nach der Installation von Ruby können Sie es von der offiziellen Website Sass herunterladen

Sass-Nutzung

1 Die Verschachtelung von Sass ist die gleiche wie bei Less und wird direkt in Just inside geschrieben

3 Wiederverwendung von Code

@mixin @include @extend @function @import

Sass kann @mixin verwenden Definieren Sie Codeblöcke und verwenden Sie dann @include. Um @mixin wiederzuverwenden, unterstützt es auch Parameter.

//Sass源码
$highlight-color: #000000;
.selected {
  border: 1px solid $highlight-color;
}
//编译后的CSS
.selected {
  border: 1px solid #000000; 
}

Sass kann @extend verwenden, um eine Klasse zu erben @import zum Importieren externer Dateien. Ja. Verwenden Sie @function, um Funktionen zu definieren

4. Sass unterstützt

Branching und Looping @if @else if @else @for @while

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

(empfohlen: „@mixin 来定义代码块 然后用@include 来复用 @mixin同样也支持参数

//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可以使用@extend 来继承一个类

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

Sass 还可以使用@import来导入外部文件  可以使用@functionBootstrap-Tutorial

“)

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Bootstrap-Sass. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!