bootstrap sass 如何使用

百变鹏仔 1个月前 (11-14) #bootstrap

文章标签如何使用

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

本文操作环境：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; }

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);}//编译后的CSSbutton {  -moz-border-radius: 5px;  -webkit-border-radius: 5px;  border-radius: 5px; }

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

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

（推荐：《bootstrap教程》）

文章推荐

bootstrap sass 如何使用

学习bootstrap需要什么基础

bootstrap模态框有什么用

bootstrap是什么意思啊

bootstrap是什么时间开源的

bootstrap怎么实现响应式