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);}