1. 定义变量 重复定义 拼接
-
$baseWidth:200px; $baseWidth:100px !default; $str:'img.png'; $strNoQout:abc; $class:'.div'; $wd:idth #{$class} { w#{$wd} : $baseWidth; background: url('./img/' + $strNoQout); background: url('./img/' + $str); background: url('./img/#{$strNoQout}'); background: url('./img/#{$str}'); }- 有default则为200 没default则为100 - 4种拼接 - 变量作为类名 必须用#{$}
2. 作用域
-
.div1{ $widthInner:100px; width:$widthInner; } .div2{ width:$widthInner; }- div2中无法使用div1中定义的变量 有作用域的问题 - 可以在属性中定义变量
3. 引用
- sass中引用CSS文件
@import 'org.css';则编译成的CSS文件中转化成原生的CSS引入@import url(org.css) - 被引用的文件通常以下划线开头
_base.scss引用的文件@import 'base';,且@import放在文件的哪个位置，编译的结果就在哪个位置 - 要想不受@import位置的影响，可以在_base.scss文件中的属性后加
！default
4. Sass基本数据类型
- 数字类型
$num:2; - 字符串
$string:'hello'; - 数组
$list:(100px,'string',3);下标从1开始- 使用数组中的元素
.div{ width: nth($list,1);} - 找到元素在数组中的下标
index($list,'string');
- 使用数组中的元素
- map
$map:(top:1px,left:2px);- 得到key对应的value
map-get($map,top); - 遍历
.div{ @each $key,$value in $map{ #{$key}:$value; } }
- 得到key对应的value
5. Sass基本运算
- 加减乘除
$num1=100px; $num2=200px; $width= $num1 + $num2; .div{ font-size: (10px * 8); line-height: (10px / 8); width:$width/2; height:(5px + 9px/2); }- *可不加() ；/得加() - 颜色运算
$color1:#f0f0f0; $color2:#000000; $color3=mix($color1,$color2); $color4=red($color1); $color5=green($color1); $color6=blue($color1); $color=rgb($color4,$color5,$color6);- mix 取两颜色中间值 - red 取该颜色的rgb红色度 - 字符串运算
background: url('./img/' + $strNoQout); background: url('./img/' + $str); background: url('./img/#{$strNoQout}'); background: url('./img/#{$str}');
6. Sass宏（代码块）
- 无参mixin
@mixin hello1{ display: block; font:{ size: 20px; weight: 500; } color:red; } @mixin hello2{ padding:10px; @include hello1; } .div{ width:100px; @include hello2; }- font中编译出来是 font-size和font-weight - mixin中可以嵌套mixin 但是重复的属性会都编译出来 并不会合并 - 有参mixin
@mixin bd($color,$width){ border:{ color:$color; width:$width; style:dashed; } } .div{ @include bd(blue,2px); }
7. 继承
- 简单继承
.div{ border:1px; } .div1{ @extend .div; border-width:3px; } - 关联属性继承
.div.other{ border:1px; } .div1{ @extend .div; }- 编译结果 .div.other, .other.div1 {border: 1px; } - 伪类继承
编译结果a:hover{ text-decoration: underline; } .hoverLink{ color:red; @extend :hover; }a:hover a.hoverLink{ text-decoration: underline; } .hoverLink{ color:red; }
8. 嵌套
.div1{
height:100px;
.div-inner{
width:200px;
}
}
编译结果
.div1 {
height: 100px; }
.div1 .div-inner {
width: 200px; }
- 嵌套使代码层级更明显 但是加重浏览器渲染
9. 条件控制
- if
$type:'tony'; p{ @if $type=='bufy'{color:red;} @else if $type=='tim'{color:blue;} @else{color:black;} } @if $type == 'bufy'{ .div{color:red;} } @else { .div{color:blue;} } - for
@for $i from 1 through 3 { .item#{$i} { width: 10px * $i; } } $list:(1,2,3,4,5); @for $i from 1 through length($list) { .item#{$i} { width: 10px * $i; } }- 如果用 to 则只是1到2 - while
$i:6; @while $i > 0 { .item#{$i} { width: 1px * $i; } $i:$i-2; }- $i:$i-2; i自减2 - each
$map:(top:1px,left:2px); .div{ @each $key,$value in $map{ #{$key}:$value; } }
10. 函数
- number内置函数
$numberPercent: 0.7; .div{ zoom:percentage($numberPercent); }- zoom:70; - round ceil floor abs min max - random 默认时0-1之间取随机值 random(10)在 0-10之间取随机整数 - list内置函数
@debug //控制台输出 length($list); //数组长度 nth($list,2); //2在数组中的下标 set-nth($list,1,'x'); //第一个数替换成x join($list,(6,7,8)); //数组后添加6，7，8 append($list,'999'); //数组后加入一个数999 index($list,'p'); //p在数组中的下标 - string内置函数
$strinng:'hello'; $noString:hello; unquote($string); //去引号 quote($noString); //加引号 str-length($string); //长度 str-insert($string,'p',2); //hpello str-index($string,'l'); //第一次出现l的位置 to-upper-case($string); //转换成大写 to-lower-case($string); //转换成小写 - map内置函数
$map:(top:1px,left:2px); map-get($map,top); //获得top的值 map-remove($map,left); //移除 map-keys($map); //获得所有key map-values($map); //获得所有value map-has-key($map,left); //判断有没有left - 函数
@mixin foo($args...){ @debug keywords($args); } @include foo($arg1:'abc',$arg2:'efg'); - 自定义函数
$rem1:100px;
@function pm($px){
$rem:20px;
@return ($px/$rem) + rem;
}
.div{width:pm($rem1);}
