本文都是以.sCSS为准
普通变量
sass的变量必须是以$开头的,后面直接跟变量名
$fontSize: 12px;body{ font-size:$fontSize;}如果变量需要默认值,在变量值的后面加上默认值的声明 变量的默认值的声明方式是变量值后加上!default; 如下:
$baseLineHeight: 2;$baseLineHeight: 1.5 !default;这样编译的结果是2
普通变量的使用:
body{ line-height: $baseLineHeight; }多值变量 多值变量分为list类型(类似js中的数组)和map类型(类似js中的对象) 2.1 list类型 list类型定义
$px: 5px 10px 20px 30px;list类型使用
$linkColor: #08c #333 !default;a{ color:nth($linkColor,1); &:hover{ color:nth($linkColor,2); }}2.2map类型 map数据以key和value成对出现,其中value又可以是list。 map类型定义
$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);map类型使用
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);@each $header, $size in $headings { #{$header} { font-size: $size; }}3.跳出嵌套
//单个选择器跳出.parent-2 { color:#f00; @at-root .child { width:200px; }}//多个选择器跳出.parent-3 { background:#f00; @at-root { .child1 { width:300px; } .child2 { width:400px; } }}默认@at-root只会跳出选择器嵌套,而不能跳出@media,如果要跳出这种,则需使用@at-root (without: media)。这个语法的关键词有四个:all(表示所有),rule(表示常规css),media(表示media),我们默认的@at-root其实就是@at-root (without:rule)。
新闻热点
疑难解答