sass笔记

sass笔记：
1.注释
/**/
//不会被转义出来
2.变量
$fontSize:12px;
body{
font-size:$fontSize;
}

默认变量会被覆盖,与位置先后无关
$fontSize:12px !default;

变量作为属性药通过#{}解析
$borderDirection: top !default;
body{
border-#{$borderDirection}:1px solid red;
}

多值变量
$listVal val1 val2 val3;//一维数组
$listVal val1 val2, val3 val4//二维数组
$linkColor: red blue !default;
a{
color:nth($linkColor,1);
&:hover{
color:nth($linkColor,2);
}
}

length($list) //数组长度
nth($list,index)//第index个元素，从1开始
set-nth($list,index,$val)//设置第index个元素值
join($list1,$list2,[separator])//合并数组
append($list,val,[separator])//追加
index($list,$val)//返回$val索引

对象map
$headings:{h1:2em,h2:3em,h4:4em};
@each $key,$val in $headings{
#{$key}:{
font-size:$val
}
}

map-get($map,$key);
map-merge($map1,$map2);
map-remove($map,$key1,$key2,...)

全局变量//在3.4以后的版本使用
$fontSize:14px !global;
在3.4版本之前，没有全局变量的说法，后面定义的变量会覆盖前面变量，在选择器中定义同样如此。
3.嵌套
选择器的嵌套：
属性嵌套：
body{
border:{
style:solid;
left:{
width:2px;
color:red;
}
right:{
width:3px;
color:blue;
}
}
}

跳出嵌套@at-root
.parent{
.child{

}
.child2{

}
}
///跳出嵌套写法
.parent{
@at-root{
.child{

}
.child2{

}
}
}

跳出嵌套扩展
@at-root(without:all/rule/media/suport)
all:跳出所有，包括parent，media等
rule:跳出常规css，跳出parent。没有默认为rule
media：跳出media，但不跳出parent。
support：暂时不支持

//rule,默认
@media print{
.parent{
@at-root{//常规rule
.child1{

}
.child2{

}
}
}
}
@media{
.parent{}
.child1{}
.child2{}
}
//media
@media print{
.parent{
@at-root(without=media){
.child1{}
.child2{}
}
}
}
@media print{
.parent{}
}
.parent{
.child1{}
.child2{}
}
//without=all
@media print{
.parent{
@at-root(without=all){
.child1{}
.child2{}
}
}
}
@media print{
.parent{}
}
.child1{}
.child2{}
4.混合@mixin,继承@extend,占位符%
@mixin定义----@include调用，涉及到@content
定义基础样式---->@extend继承；//未用到的样式同样被解析出来
定义基础样式占位符%r----》@extend继承，未用到的样式不会被解析出来
无参数传递用继承，有参数传递用mixin
@mixin多参数
@mixin box-style($border:1px solid red,$background:red){//默认初始值
border:$border;
background:$background;
}
body{
@include box-style(2px solid blue,green);
@include box-style($background:white);//仅仅传递一个参数
}

//继承@extend
h1{
border:1px solid red;
}
body{
@extend h1;
color:red;
}
///////
body{
border:1px solid red;
color:red;
}
//占位符%
%r{
border:1px solid red;
}

h1{
@extend %r;
}
/////
h1{
border:1px solid red;
}
5函数
内置函数常用
darken($color,percent)//加深
lighten($color,percent)//减淡

自定义函数@function
$baseFontSize:10px !default;
@function pxToRem($px){
@return $px / $baseFontSize * 1rem;
}
.test{
font-size:pxToRem(16px);
}
6.加减乘除运算，运算符前后要留空格，否则会报错。
7.条件判断 @if @else if
p{
@if $type == 1{
coloe:red;
} @else if $type == 2 {
color:blue;
} @ else {
color:green;
}
}

三目运算：
if(true,1px,2px)===>1px
if(false,1px,2px)===>2px;
8.@for循环与@each循环
@for $i from 1 through 3{
.item-#{$i}{
width:2em * $i;
}
}
///@each
@each遍历list集合
$list red,green,blue,white;//一维数组
@each $color in $list{
.item-#{$color}{
color:$color;
}
}
//$list (x1,y1,z1),(x2,y2,z2),(x3,y3,z3)多维数组
@each $x,$y,$z in $list{
.item-#{$x}{
y:$y,
z:$z
}
}

@each遍历map集合
$map (h1:1em,h2:2em,he:3em);
@each $key,$val in $map{
#{$key}{
font-size:$val
}
}