编译工具网址:http://sassmeister.com/
Sass是一门非常优秀的CSS预处语言,简化工作流程,易开发,维护!Sass同css非常相似,但是Sass中没有花括号({})跟分号(;),Sass使用两个空格来定义嵌套的区别,需要安装ruby。
eg:
#skyscraper_ad
display: block
width: 120px
height: 600px
1.变量(Variables):用美元符号$来声明
eg:
$red: #ff4848
2.嵌套(Nesting):选择器嵌套和属性嵌套
eg:
$font-size:12px;
.speak
.name
font:
weight:bold
size:$font-size+10px
.position
font:
weight:normal
size:$font-size
3.混合(Mixins):混合可以让你定义一整块的Sass代码,甚至你可以给他们定义参数,更酷的是你还可以设置默认值。使用@maxin来定义混合,使用@include来调用混合。
eg:
@mixin border-radius($variable:5px)
-webkit-border-radius:$variable
-moz-border-radius:$variable
border-radius:$variable
如何用?
h1
@include border-radius(10px)
p
@include horder-radius
4.选择器继承:选择继承另一个选择器的所有样式风格,使用@extend来继承
eg:
h1
border:1px solid #ddd
border-radius:4px
p
@extend h1
border-color:#f00