@Dreamingboy 2017-06-05T16:23:33.000000Z 字数 6599 阅读 795

sass进阶篇

sass

@if

@if是条件判断，条件为true时返回一个样式块，为false时返回另外一个样式块。可以配合@else if和@else一起使用。

//scss 
@mixin booleantry($boolean:true){
  @if $boolean {
    display:block;
  }@else{
    dispaly:inline-block;
  }
}
.box1{
  @include booleantry;
}
.box2{
  @include booleantry($boolean:false);
}
//css
.box1 {
  display: block;
}
.box2 {
  dispaly: inline-block;
}

@for

语法：

@for $i from <startnumber> through <endnumber>
@for $i from <startnumber> to <endnumber>

$i：表示变量
startnumber：表示起始值
endnumber：表示结束值
through：包含end这个值
to：不包含end这个值

@for $i from 1 through 2{
  .item-#{$i} { width: 2px*$i;}
}
//css
.item-1 {
  width: 2px;
}
.item-2 {
  width: 4px;
}
//scss
@for $i from 1 to 2{
  .item-#{$i} { width: 2px*$i;}
}
//css
.item-1 {
  width: 2px;
}

@for的实际运用

$try:li;
$width:200px;
$height:200px;
%example{
      width:$width;
      height:$height;
      float:left;
}
@for $i from 1 through 6{
  #{$try}-#{$i}{
    @extend %example;
    font-size: 2em * $i;
  }
}
//css
li-1, li-2, li-3, li-4, li-5, li-6 {
  width: 200px;
  height: 200px;
  float: left;
}
li-1 {
  font-size: 2em;
}
li-2 {
  font-size: 4em;
}
li-3 {
  font-size: 6em;
}
li-4 {
  font-size: 8em;
}
li-5 {
  font-size: 10em;
}
li-6 {
  font-size: 12em;
}

@while

$number:4;
@while $number > 0{
  .item-#{$number}{
    margin: 2em * $number;
  }
  $number: $number - 1;
}
//css
.item-4 {
  margin: 8em;
}
.item-3 {
  margin: 6em;
}
.item-2 {
  margin: 4em;
}
.item-1 {
  margin: 2em;
}

@each

@each 遍历一个列表，然后从列表中取出对应的值
语法：

@each $var in <list>

$var 是一个变量，<list>是一个表达式，返回一个列表值

$list: a b c d e f;
  @mixin example {
    @each $var in $list{
    .#{$var}{
      background: url(../images/#{$var}.png);
    }
    }
  }
.box5{
  @include example;
}
//css
.box5 .a {
  background: url(../images/a.png);
}
.box5 .b {
  background: url(../images/b.png);
}
.box5 .c {
  background: url(../images/c.png);
}
.box5 .d {
  background: url(../images/d.png);
}
.box5 .e {
  background: url(../images/e.png);
}
.box5 .f {
  background: url(../images/f.png);
}

函数

1、字符串函数

unquote($string)：删除字符串中的引号
如果字符串没有引号则返回原始字符串，如果有引号则返回去掉引号的字符串。但是只能删除字符串中最前和最后的引号

.text{content: unquote("hello");}
//csss
.text{conten:hello;}

quote($string)：给字符串添加引号
如果字符串本身有引号会统一成双引号。字符串中间有单引号或者是空格时，或者是有特殊符号如“!,?”要用单引号或者是双引号括起来
to-upper-case()
将字符串变成大写
to-lower-case()
将字符串变成小写

2、数字函数

percentage($value)：将不带单位的数转换成百分比值

div{width:percentage(.2)}
//css
div{width:20%}

round( $value)：将数值四舍五入，转换成一个最接近的整数 - ceil($ value)：将大于自己的小数转化成下一位整数
只入不舍
floor( $value)：去除数的小数部位 - abs($ value)：返回主的绝对值
min( $value...)：取出几个数中最小的那个单位需要一致 - max($ value...)：取出几个数中最大的那一个
单位需要一致
random()：获取随机数

3、列表函数

列表中值用空格隔开，不能用逗号隔开

length($list):返回一个列表的长度值

$length:length(10px 20px 30px);
div{
  margin:2em * $length;
}
//css 
div {
  margin: 6em;
}

nth($list,n)：返回一个列表中指定的某个标签值的值
第一个标签值为1

$width:nth(10px 20px 30px ,2);
div{
  margin-top:$width;
}
//css
div {
  margin-top: 20px;
}

join( $list1,$ list2,[ $separator])：将两个列表链接在一起变成一个列表 **只能链接两个表格，但是可以连续使用多个join函数达到链接多个列表的目的** **[$ separator]用于指定列表值的分隔符号，默认是auto，comma表示逗号分隔，space表示用空格分隔，建议直接指定分隔符号以免造成误解**

join((blue,green),(red,orange),comma);
//
(#0000ff #008000 #ff0000 #ffa500)

append( $list1,$ val,[$separator])：将某个值放在列表的最后
建议给定separator值，形成一种规范

append((red,green),blue,space);
//
(#0000ff #008000 #ff0000);

zip($lists)：将几个列表结合成一个多维的列表

zip(1px 2px 3px,solid dashed dotted,green blue red)
//
((1px solid green),(2px dashed blue),(3px dotted red))

index( $list,$ value)：返回一个值在列表中的位置值
如果列表中没有相应的值就会返回false

inde(1px solid red, 1px);
//
1

introspection函数

1、type-of($value)：返回一个值的类型
返回值主要有以下几种：

number：数值类型
string：字符串类型
bool：布尔值
color：颜色类型

2、unit( $number)：返回一个值的单位当遇到复杂的计算时，根据计算得到一个**多单位组合**的值,但是只支持**乘除法**不支持**加减法**，但是加减法支持px、cm和mm单位的运算 **但是多单位进行运算的时候没有什么规律，所以不建议使用** ```$ unit:unit(10px * 2em /3cm / 1rem);
div{
width:12#{$unit};
}
//css
div {
width: 12em/rem;
}
```

3、unitless($number)：判断一个值是否带有单位
返回true或者是false

4、comparable( $number-1,$ number-2)：判断两个值是否可以做加减和合并
如果可以返回true反之返回false

Miscellaneous函数

具有两个值，当条件成立返回一种值反之返回另外一种值
语法：

if ($condition,$if-true,$if-false)

if (true,1px,2px)
//1px
if (false,1px,2px)
// 2px

Map

Map被称为数据地图，作用类似数组。
语法：

$map:(
  key1:value1,
  key2:value2,
  key3:value3
)

key用于查找相关联的值value，key和value要成对出现，每对之间用逗号隔开。map里面还可以套map

$theme-color:(
  default:(
    bgcolor:#fff,
    text-color:#444,
    link-color:#39f
  ),
  primary:(
    bgcolor:#00,
    text-color:#fff,
    link-color:#93f
  ),
  negative:(
    bgcolor:#000,
    text-color:#fefefe,
    link-color:#d4e
  )
)

maps 函数

1.map-get( $map,$ key)：根据给定的key值返回map中的值

$try:(
  color:red,
  width:1200px,
  height:300px
);
//css
.box1{
  color:map-get($try,color);
}

但是当map里面没有相应的key是，不会报错也不会编译出相应的CSS样式，所以建议加上一个判断语句

2.map-merge( $map1,$ map2)：将两个map合并为一个
当 $map1和$ map2中有相同的 $key值得时候，位于后面的map的$ key的指挥取代前面的

3.map-remove( $map,$ key)：从map中删除一个key返回一个新的map
语法：

$map:map-remove($map1,$key)

4.map-keys($map)：返回map中所有的key
这个函数最常见的是结合list一起使用。在结合其他的命令如@for、@each in 、@while等

$list:(
  color1:blue,
  color2:red,
  color3:white,
  color4:balck
);
$color-list: map-keys($list);
@for $i from 1 through length($color-list){
  .item-#{$i}{ color:map-get($list,nth($color-list,$i));}
}
//css
.item-1 {
  color: blue;
}
.item-2 {
  color: red;
}
.item-3 {
  color: white;
}
.item-4 {
  color: balck;
}

5.map-values($map)：返回map中的所有value

6.map-has-key( $map,$ key)：根据给定的key值判断map中是否具有对应的value值，有的话返回true反之返回false

@function colors($color){
  @if not map-has-key($social-colors,$color){
     @warn "No color found for'#{$color}' in $social-colors map Property omitted.";
    }
    @return map-get($social-colors,$color);
}

7.keywords($args)：返回一个函数的参数，可以是动态设置的key和value
可以动态创建一个新的map

@mixin

颜色函数

1、RGB颜色函数

rgb( $red,$ green, $blue)：根据红、绿、蓝三个值创建一个颜色 - rgba($ red, $green,$ blue,$alpha)：根据红、绿、蓝和透明值创建一个颜色
最大的运用是将一个颜色值加上一个透明度直接转化成(value1,value2,value3,alpha)的形式

color: rgba(#f36,.5);
//css
color: rgba(255, 51, 102, 0.5);

red(color)：从一个颜色中获得其中的绿色值
- blue( $color)：从一个颜色值中获取其中的蓝色值 - mix($ color-1, $color-2,[$ weight])：把两种颜色混合在一起
  [$weight]是比重值，表示第一个颜色值的比重值，包括透明度，例如25%的时候表示颜色值1占25%的比重

2、HSL函数

3、Opacity函数

alpha( $color)/opacity($ color)：获取颜色的透明度
rbga( $color,$ alpha)：改变颜色的透明度值
opacity( $color,$ amount)/fade-in( $color,$ amountt)：使颜色更不透明
$amount是要加上的值** - transparentize($ color, $amount)/fade-out($ color, $amount)：使颜色更加透明 **$ amount是要减去的值，结果小于0是以显示

@import

使用@import可以再sass文件中引入scss文件和sass文件，引入的scss和sass文件会被合并并且输出一个单一的CSS文件，被导入的文件中的变量和mixins都可以在主文件中使用。

@import会根据文件名引入，默认情况下会寻找sass文件直接引入，但是在下面几种情况下会被编译成CSS的@import规则：

文件名的扩展名是.css
文件名以http://开头
文件名是url()
@import包含任何媒体查询

对于没有扩展名的文件，sass会试着找出具有.scss或者是.sass扩展名的同名文件将其导入

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);
//编译结果
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

如果引入的文件不想被编译成CSS文件，可以在文件名前面加一个下划线，避免被编译。同一个目录中不能同时存在带下划线和不带下换线的同名文件

@media

1、和CSS中一样进行媒体查询
2、可以在CSS中进行嵌套，如果在样式中使用@media，会冒泡到外面

.sidebar{
   width:300px;
   @media screen and ( orientation:landscape){
       width:500px;
     }
}
//css
.sidebar{
   width:300px;
   @media screen and ( orientation:landscape){
   .sidebar{
       width:500px;
     }
   }
}

@extend

@extend是用于扩展选择器和占位符

1、扩展选择器

@at-root

跳出根元素

.a {
  color: red;
  .b {
    color: orange;
    .c {
      color: yellow;
      @at-root .d {
        color: green;
      }
    }
  }  
}
//css
.a {
  color: red;
}
.a .b {
  color: orange;
}
.a .b .c {
  color: yellow;
}
.d {
  color: green;
}

@debug

用于调试，使用@debug后在sass编译出错的时候命令终端会提示错误

@debug 10em + 12em;
// 
Line 1 DEBUG:22em;