Rumah > hujung hadapan web > Tutorial Bootstrap > bootstrap sass 如何使用

bootstrap sass 如何使用

藏色散人
Lepaskan: 2023-02-08 11:46:31
asal
2190 orang telah melayarinya

bootstrap sass的使用方法:1、下载Ruby;2、从官网下载Sass;3、通过“@mixin”来定义代码块;4、通过“@include”来使用即可。

bootstrap sass 如何使用

本文操作环境: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; 
}
Salin selepas log masuk

2、嵌套

Sass的嵌套和Less相同 直接写在里面就好了

3、代码重用 @mixin @include @extend @function @import

Sass可以用@mixin 来定义代码块 然后用@include 来复用 @mixin同样也支持参数

//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; 
}
Salin selepas log masuk

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; 
}
Salin selepas log masuk

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; 
}
Salin selepas log masuk

(推荐:《bootstrap教程》)

Atas ialah kandungan terperinci bootstrap sass 如何使用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan