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