Heim > Web-Frontend > Bootstrap-Tutorial > So verwenden Sie Bootstrap-Sass

So verwenden Sie Bootstrap-Sass

藏色散人
Freigeben: 2023-02-08 11:46:31
Original
2191 Leute haben es durchsucht

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“.

So verwenden Sie Bootstrap-Sass

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; 
}
Nach dem Login kopieren

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; 
}
Nach dem Login kopieren

(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; 
}
Nach dem Login kopieren

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; 
}
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage