How to use bootstrap sass

How to use bootstrap sass: 1. Download Ruby; 2. Download Sass from the official website; 3. Define code blocks through "@mixin"; 4. Use it through "@include".

The operating environment of this article: Windows7 system, bootstrap3, Dell G3 computer.

Installation

Sass is written in Ruby, so if you want to use Sass, you must first download Ruby. Ruby only provides support for Sass running. It doesn’t matter if you don’t know Ruby

After installing Ruby, download Sass from the official website and you can use it

Sass usage

1. Variable

Sass uses the variable

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

2 through the dollar sign. Nesting

Nesting of Sass Just write it directly in it like Less

3. Code reuse@mixin @include @extend @function @import

Sass can use@mixin to define code blocks and then use @include to reuse @mixin also supports parameters

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

Sass can use @extend to inherit a class

//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 You can also use @import to import external files. You can use @function to define functions.

4. Sass supports branches and loops. @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; 
}

(Recommended: "bootstrap tutorial")

The above is the detailed content of How to use bootstrap sass. For more information, please follow other related articles on the PHP Chinese website!