您好,登录后才能下订单哦!
这篇文章主要介绍了bootstrap sass的使用方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
bootstrap sass的使用方法:首先下载Ruby;然后从官网下载Sass;接着用“@mixin”来定义代码块;最后用“@include”来复用即可。
安装
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相同 直接写在里面就好了(推荐:《bootstrap教程》)
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; }
感谢你能够认真阅读完这篇文章,希望小编分享的“bootstrap sass的使用方法”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。