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即为全局变量。
转载于:https://www.cnblogs.com/min-ym/p/6088018.html
相关资源：数据结构—成绩单生成器