工欲善其事必先利其器,先在sublime 2下安了一个sass高亮插件。下载地址在这里。解压后直接放到data的packages下面。会报错说有个文件配置不对,但重启sublime后的确加亮了,说明起作用了。
sass基础:
1、 嵌套。selector 和 property 都可以嵌套。
2、 换变量。如果变量在某个selector嵌套层里面,那它只在该层起作用,但可用!global强制其为全局变量.
!important: 不能在property的嵌套层中用变量。
#main {
$mid:50% !global;
background: {
color:yellow;
clip:content-box;
// $mid:50% !global;
position: $mid $mid;
}
font:20px/25px fantasy{
weight:$mid;// wrong property , only to show that it works
color:red;
}
}
.ff{
font:fantasy;
margin: $mid;
}
它会被编译成:
#main {
background-color: yellow;
background-clip: content-box;
background-position: 50% 50%;
font: 20px/25px fantasy;
font-weight: 50%;
font-color: red; }
.ff {
font: fantasy;
margin: 50%; }
另外注意/**/中的comments也会被编译到css中,且支持变量替换。但变量要加引号转为string形式。普通的property变量则不要加。例子如下:
$commmonwidth:"40px";
.ff{
width: #{$commmonwidth};
width: $commmonwidth;
}
/*the #{$commmonwidth} is a
string*/
.ff {
width: 40px;
width: "40px"; }
/*the 40px is a
string*/
试了一下,虽然官网中的例子里commments中引用变量用了#{$commmonwidth}这种形式,但去掉#也没影响,到底#是咋回事,往下看,看3。
变量中-与_可以互换。$main-width 等于 $main_width
3、7种变量类型
其余的会被当做 unquoted string
- 数字,10,10px
- 字符串,带不带“”都行,
- 颜色,#fff
小心选择器的名字中夹杂了颜色
- true/false
- null
- 数组,以空格或,间隔,可以用括号或不同的间隔符表示二维数组,and trailing comma is recommended
- map.可以看做对象,但每个value都是字面量,固定形式
$map: (key1: value1, key2: value2, key3: value3);
map key 可以是任一种sass data type。
map不会被直接转为css,但可以用inspect($value)来转一个字符串检查。
4、operations
数字可以加减乘除,%, 而且是有单位的!!单位必须紧跟在数字后面 不要空格不要空格不要空格
看高亮的颜色就知道自己写对了没有
乘除可以直接用变量&数字来做,但加减只能变量对变量,或直接数字加减,margin-left: 5px + 8px/2px; 不然容易报错。特别是如果直接写的话,+和-还不一样,+的语法格式很宽松,但-就很严格,建议写的时候以加负数的形式来写。
$w:100px;
$e:100;
$q:20px;
.redff{
font:fantasy;
// margin: $w-2; 这样不行滴
margin:$w+2; //这个就可以
margin: $w%2;
padding: $q+$w;
}
会被编译成这样:
.redff {
font: fantasy;
margin: 102px;
margin: 0px;
padding: 120px; }
其实-这么严格是有道理的,因为它有太多含义了。。。官方建议是这样的:
- 如果要做减法,前后加空格
- 如果是取负数,前加后不加
- 如果是运算式中表示list,加空格,加括号 10px (-$var)
color的加减乘除是分段式的,r,g,b分别做。a是属性相同的才能一起运算,且不改变a的值
opacify和transparentize分别可以增加a和降低a。用法是:
color: opacify($translucent-red, 0.3); background-color: transparentize($translucent-red, 0.25);
string的相加中,quoted string 和 unquoted string 是谁在前,遵循谁的格式。
p:before {
content: "Foo " + Bar;
font-family: sans- + "serif";
}
编译为
p:before {
content: "Foo Bar";
font-family: sans-serif; }
5、interpolation #{}
#{}可以把quoted string转成unquoted(直接取其值),这样可以直接在字符串中引用。在一些时候,比如在mixin中使用selector的名字时会更方便。
再比如。
//这是错误的写法!!!!!
$name:foo;
$attr:border;
p.$name {
$attr-color: blue;
}
这时候就会报错了,Error: Invalid CSS after “p.”: expected class name, was “$name” on line 4 of play.scss
正确的姿势是
p.#{$name} {
#{$attr}-color: blue;
}
会编译成:
p.foo {
border-color: blue; }
再比如
p { $font-size: 12px; $line-height: 30px; font: #{$font-size}/#{$line-height}; }
it will be treated as plain css.
otherwise:
//scss:
p {
$font-size: 12px;
$line-height: 30px;
font: $font-size/$line-height;
}
//css:
p {
font: 0.4;
}
&代指父选择器,两种用处。
- 在嵌套层中引用平行状态。如伪类。
a {
&:hover { text-decoration: underline; }
body.firefox & { font-weight: normal; }
}
// and it will be compiled to:
a:hover {
text-decoration: underline; }
body.firefox a {
font-weight: normal; }
还可以用来指变量。比如
.foo.bar .baz.bang, .bip.qux {
$selector: &;
}
等于重设了selector变量的值,是个list, ((“.foo.bar” “.baz.bang”), “.bip.qux”). 但能干啥还不知道。
可以在@mixin 中以@if @else的方式来判断有无父元素
!default
在变量命名中加上!default ,会”没有就加上,有就不管它“,这里的没有既是指unassigned也是null。