从语法开始但是语法也不是一两句的事情,首先看基本的导入,使用
一,sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号;另一种就是我们这里使用的scss文件,建议scss.
二,导入
使用@import导入但是和css导入有点区别。
比如基础的文件命名:_mixin.scss导入的时候可以省略下划线写成:
@import "mixin"
三,注释
sass有两种注释方式,一种是标准的css注释方式/* */
,
另一种则是//
双斜杆形式的单行注释,
注意:不过这种单行注释不会被转译出来。
四,变量,必须是以$开头,!default表示默认值,sass是没有局部变量的
1,普通变量
$f:12px;
body{font-size:$f;}
2,默认变量
$f:12px !default;
body{
font-size:$f;
}
3,覆盖默认变量
$f:12px !default;
$f:14px;
body{
font-size:$f;
}
结果font-size:14px;
4,特殊变量:两种情况,一是作属性,二是作值。都以#{$name}的形式
作属性:
$direction:top !default;
.border-#{$direction}{
border-#{$direction}:1px solid #ccc;
}
做值:
$f:12px !default;
$s:1.5 !default;
body{
font:#{$f}/#{$s};
}
作值这里有 点不明白,不能直接写成font:$f/$s;这样吗?
5,多值变量,有两种:list类型和map类型,简单来说list类型有点像js中的数组,而map类型有点像js中的对象。
list:可用nth($var,$index)
取值如:length($f,$s)
一维:$px:5px 1px 2px 3px;
二维:$px:(5px 1px),(2px 3px);
eg:
$linkColor:#222 #333 !default;
a{
color:nth($linkColor,1);
&:hover{color:nth($linkColor,2);}
}
map:map数据以key和value成对出现,其中value又可以是list。
可通过map-get($map,$key)
取值
格式:$map:(key1:val1,key2:val2);
map-m($map1,$map2),map-key($map),map-values($map)
eg:
定义:
$heading:(h1:2em,h2:1em,h3:3em);
使用:
@each $header, $size in $headingss{
#{$header}{
font-size:$size;
}
}