Sass 相比 Less 功能更加强大, 使用起来也相对复杂. 那么 Bootstrap 中如何使用 Sass? 下面本篇文章给大家介绍一下. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
安装
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);
- }
- // 编译后的 CSS
- button {
- -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;
- }
更多前端开发学习 https://www.html.cn/ 相关知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/framework/bootstrap/17918.html