sass
sass语法:
变量:
sass的变量必须是$开头,如果之后面加上!default则表示默认值。
默认变量:
sass的默认变量仅需要在值后面加上!default即可。默认变量根据需求覆盖,只需要在默认变量之前重新声明下变量。
特殊变量:
一般我们定义的变量都为属性值,可直接使用,但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}}形式使用.
应用于class和属性:
.border-#{$borderDirction}{
border-#{$borderDirction}:1px solid #ccc;
}
应用于复杂的属性值:
body{
font:#{$baseFontSize}/#{$baseLineHeight};
}
多值变量:
多值变量分为list类型和map类型,简单来说list类型有点像js中的数组,而map类型有点像js中的对象。
list:
list数据可通过空格,逗号或小括号分隔多个值,可用nth($var,$index)取值。关于list数据操作还有很多其他函数如length($list),join($list1,$list2,[$separator]),
append($list,$value,[$separator])等.
定义:
//一维数据
$px: 5px 10px 20px 30px;
//二维数据,相当于js中的二维数组
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);
使用:
//sass style
//-------------------------------
$linkColor: #08c #333 !default;//第一个值为默认值,第二个鼠标滑过值
a{
color:nth($linkColor,1);
&:hover{
color:nth($linkColor,2);
}
}
//css style
//-------------------------------
a{
color:#08c;
}
a:hover{
color:#333;
}
map:
map数据以key和value成对出现,其中value又可以是list。格式为:$map: (key1: value1, key2: value2, key3: value3);。可通过map-get($map,$key)取值。
关于map数据还有很多其他函数如map-merge($map1,$map2),map-keys($map),map-values($map)等
使用:
//sass style
//-------------------------------
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
#{$header} {
font-size: $size;
}
}
//css style
//-------------------------------
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
}
全局变量:
在变量值后面加上!global即为全局变量。