Sass进阶篇

1、Sass的控制命令

@if

Sass中的@if类似于Javascript中的if,它可以根据条件来处理样式快,如果条件为true是返回一个样式块,为false时返回另一个样式快。在Sass中除了@if之外,还可以配合 @else if 和 @else 一起使用。

例如:要控制一个元素的显示和隐藏,那么我们可以定义一个混合宏,通过 @if 和 @else 来根据传进去的参数控制 display的值,如下所示:

/*
 定义一个是否显示的混合宏
 $isBlock:true 表示未传参时,$isBlock变量的默认值为true
 */
@mixin isBlock($isBlock:true) {
  @if $isBlock {
    /* 当$isBlock变量为true时,所显示的样式 */
    display: block;
  }
  @else {
    display: none;
  }
}

.block {
  /* 调用声明的混合宏 */
  @include isBlock()
}

.hidden {
  /* 调用声明的混合宏并传入参数 */
  @include isBlock(false)
}

效果图:

@for循环

[$]

Sass中的@for循环与Javascript中的 for 类似,只不过它是用来循环样式的。在编写样式的时候,可能需要对有规律的选择器编写不同的样式,在CSS中你需要一个一个的去书写,在Sass中可以使用 @for 循环来完成,如下示例代码:

/*
通过@for 给不同的选择器设置不同的样式
$i 表示循环中当前值的变量
from 表示一个关键字
1 表示起始值
through 表示包括结束值,也就是遍历 1~3之间的数字,包括3 同时也可以通过 to 这个关键字,to表示不包括 结束值
3 表示结束值
*/
@for $i from 1 through 3 {
  .item-#{$i} {
    width: 200px * $i;
    margin-top: 20px;
    background: red;
  }
}

编译出来的结果为:

.item-1 {
  width: 200px;
  margin-top: 20px;
  background: red;
}

.item-2 {
  width: 400px;
  margin-top: 20px;
  background: red;
}

.item-3 {
  width: 600px;
  margin-top: 20px;
  background: red;
}

效果图:

@while循环

Sass中的@while 其实和 @for 类似,也可以用它来循环样式,如下代码:

/*
$i:1 表示自定义的变量 $i ,1为该变量的值
$i <= 3 表示循环的条件
$i:$i+1 表示每循环一次,$i变量的值加1
*/
$i:1;
@while $i <= 3 {
.item-#{$i} {
width: 200px * $i;
margin-top: 20px;
background: red;
}
$i:$i+1
}

最终的css代码如下:

.item-1 {
  width: 200px;
  margin-top: 20px;
  background: red;
}

.item-2 {
  width: 400px;
  margin-top: 20px;
  background: red;
}

.item-3 {
  width: 600px;
  margin-top: 20px;
  background: red;
}

效果图如下:

@each循环

通过Sass中的 @each 可以去遍历一个列表,然后通过插值进行组拼,从而给不同的选择器设置相同的样式,如下代码:

HTML骨架:

<div class="home">
  <div class="home-title">我是home-title选择器中的内容</div>
  <div class="home-content">我是home-content选择器中的内容</div>
  <div class="home-footer">我是home-footer选择器中的内容</div>
</div>

css样式:

/* 定义一个列表 */
$list:title content footer;
/*
通过混合宏 + @each 给不同的选择器设置相同的样式
home 表示该混合宏的名称
@each 循环遍历的关键字
$list 表示要循环的列表
$position 表示当前值的变量
 */
@mixin home {
  @each $position in $list {
    .home-#{$position} {
      color: #42b983;
    }
  }
}

.home {
  /* 使用混合宏 */
  @include home
}

编译出来的CSS如下:

.home .home-title {
  color: #42b983;
}

.home .home-content {
  color: #42b983;
}

.home .home-footer {
  color: #42b983;
}

效果图:

2、Sass的函数功能–字符串与数字函数

2.1、Sass的函数简介

在Sass中除了可以定义变量,具有 @extend、%placeholder 和 @mixin 等特性之外,还自备一系列的函数功能,其主要包括:

  • 字符串函数
  • 数字函数
  • 列表函数
  • 颜色函数
  • Introspection 函数
  • 三元函数等

当然除了自备的函数功能之外,我们还可以根据自己的需求定义函数功能,常常称之为自定义函数。

2.2、字符串函数 – unquote()函数

字符串函数顾名思义是用来处理字符串的函数。

unquote() 函数是用来删除字符串中的引号。如果这个字符串没有带有引号,将返回原始的字符串,如下实例:

.test1 {
  content: unquote('Sass');
}

.test2 {
  content: unquote("'Sass");
}

.test3 {
  content: unquote("I'm Sass");
}

.test4 {
  content: unquote("'Sass'");
}

.test5 {
  content: unquote('"Sass"');
}

.test6 {
  content: unquote(Sass);
}

编译后的CSS代码:

.test1 {
  content: Sass;
}

.test2 {
  content: 'Sass;
}

.test3 {
  content: I'm Sass;
}

.test4 {
  content: 'Sass';
}

.test5 {
  content: "Sass";
}

.test6 {
  content: Sass;
}

注意:从测试的结果中可以看出,unquote()函数只能删除字符串最前面和最后面的引号(双引号或单引号),而无法删除字符串中间的引号,如果字符没有带引号,返回的将是字符串本身。

2.3、字符串函数 – quote()函数

quote()函数刚好与unquote()函数功能相反,主要用来给字符串添加引号。如果字符串自身带有引号,会统一换成双引号(” “),如下示例:

.test1 {
  content: quote('Sass');
}

.test2 {
  content: quote("Sass");
}

.test3 {
  content: quote(Sass);
}

.test4 {
  content: quote(' ');
}

编译出来的CSS代码如下:

.test1 {
  content: "Sass";
}

.test2 {
  content: "Sass";
}

.test3 {
  content: "Sass";
}

.test4 {
  content: "";
}

注意:当字符串中间有单引号或空格时,需要用单引号或者双引号进行包裹,否则编译时会报错,如下错误代码:

.test5 {
  content: quote(Sass Scss);
}

正确代码如下:

.test5 {
  content: quote("Sass Scss");
}

同时,quoto() 碰到特殊符号(!、?、>等等)是需要双引号包裹,中折号(-)和下划线(_)除外。

2.4、字符串函数 – to_upper_case()、to_lower_case()

to_upper_case ()

to_upper_case()函数主要是将小写字符串转换为大写字符串,如下示例:

.lowercase {
  content: to_upper_case('aaa');
}

编译出来的CSS代码:

.lowercase {
  content: 'AAA';
}

to_lower_case()

to_lower_case() 函数主要是将大写字符串转换为小写字符串,示例如下:

.capital {
  content: to_lower_case('AAA');
}

编译出来的CSS代码如下:

.capital {
  content: 'aaa';
}

2.5、数字函数简介

Sass中的数字函数主要是针对数字方面提供一系列的函数功能,如下函数:

  • percentage($value) :表示将一个不带单位的数转换为百分比值
  • round($value):将数值四舍五入,转换成一个最接近的整数
  • ceil($value):将大于自己的小数转换成下一个整数
  • floor($value):将一个数去除他的小数部分
  • abs($value):返回一个数的绝对值
  • min($numbers…):找出几个数值之间的最小值
  • max($numbers…):找出几个数值之间的最大值
  • random():获取随机数

2.6、数字函数 – percentage()

percentage() 函数主要是将一个数字转换成百分比的表达形式,如下实例:

.percentage1 {
  width: percentage(.2);
  background: #42b983;
}

.percentage2 {
  width: percentage(10px / 20px);
  background: #42b983;
}

最终得出的CSS代码如下:

.percentage1 {
  width: 20%;
  background: #42b983;
}

.percentage2 {
  width: 50%;
  background: #42b983;
}

2.7、数字函数 – round() 函数

round() 函数可以将一个数四舍五入为一个最接近的整数,而且可以携带单位,如下示例:

.round1 {
  width: round(129.4px);
  background: #dfc795;
}

.round2 {
  width: round(129.5px);
  background: #dfc795;
}

最终编译后的CSS如下:

.round1 {
  width: 129px;
  background: #dfc795;
}

.round2 {
  width: 130px;
  background: #dfc795;
}

2.8、数字函数 – ceil()函数

ceil()函数可以对数字进行向上取整,如下示例代码:

.ceil1 {
  width: ceil(129.1px);
  background: red;
}

.ceil2 {
  width: ceil(129.9px);
  background: red;
}

编译后的CSS代码如下:

.ceil1 {
  width: 130px;
  background: red;
}

.ceil2 {
  width: 130px;
  background: red;
}

2.9、数字函数 – floor() 函数

floor() 函数可以对数字进行向下取整,如下示例代码:

.floor1 {
  width: floor(129.1px);
  background: blue;
}


.floor2 {
  width: floor(129.9px);
  background: blue;
}

编译之后的CSS如下:

.floor1 {
  width: 129px;
  background: blue;
}


.floor2 {
  width: 129px;
  background: blue;
}

2.10、数字函数 – abs() 函数

abs() 函数会返回一个数的绝对值

.abs1 {
  width: 100px;
  background: #e68fba;
  margin-left: abs(100px);
}
.abs2 {
  width: 100px;
  background: blueviolet;
  margin-left: abs(-100px);
}

编译出来的CSS如下:

.abs1 {
  width: 100px;
  background: #e68fba;
  margin-left: 100px;
}
.abs2 {
  width: 100px;
  background: blueviolet;
  margin-left: 100px;
}

2.11、数字函数 – min()函数、max()函数

min()函数

min()函数可以返回一组数中的最小值,如下示例代码:

.min1 {
  width: min(100px,10px,99px);
  background: #e6ff75;
}

最终编译后的CSS代码如下:

.min1 {
width: 10px;
background: #e6ff75;
}

max()函数

max()函数可以返回一组数据中的最大值,如下示例代码:

.min2 {
  width: max(100px,89px,120px);
  background: yellowgreen;
}

最终编译后的CSS代码如下:

.min2 {
  width: 100px;
  background: yellowgreen;
}

注意:如果在min()函数和max()函数中有不同的单位,将会报错。

2.12、数字函数 – random() 函数

random()函数是用来获取一个随机数,如下示例:

/*
random(100) 表示随机返回1~100之间的整数
*/
.random {
  content: random(100)+'';
  background: #e6ff75;
}

3、Sass的函数功能–列表函数

3.1、列表函数简介

列表函数主要包括一些对列表参数的函数使用,主要包括以下几种:

  • length($list):返回一个列表的长度值
  • nth($list,$n):返回一个列表中指定的某个标签值
  • join($list,$list2,[$separator]):将两个列给连接在一起,变成一个列表
  • append($list,$val,[$separator]):将某个值放在列表的最后
  • zip($lists……):将几个列表结合成一个多维的列表
  • index($list,$value):返回一个值在列表中的位置值

3.2、length()函数

length() 函数主要是用来获取列表的长度,与Javascript中的length一样,如下示例:

$names: xiaoming xiaofei;
.length {
/* length($names) 表示获取$names这个列表的长度 */
content: length($names)+'';
}

最终的CSS如下:

.length {
content: '2';
}

注意:在定义列表时,元素与元素之间用空格隔开,不能使用逗号。

3.3、nth($list,$n)函数

nth函数用来获取列表中第几项的值,如下示例:

$width:100px 300px;
.nth {
/*
nth($width,1); 表示获取$width这个列表的第1项值,也就是100px
*/
width: nth($width,1);
background: #75ffcd;
}

最终编译后的CSS如下:

.nth {
width: 100px;
background: #75ffcd;
}

注意:此时的下标从1开始。

3.4、join($list1,$list2)函数

通过join()函数可以将两个列表合成一个列表,如下示例:

$values1:10px 20px;
$values2:20px 10px;
.join {
width: 100px;
background: #e68fba;
/* join($values1,$values2) 表示合并$values1和$values2列表 */
margin: join($values1,$values2);
}

最终编译的CSS代码如下:

.join {
width: 100px;
background: #e68fba;
margin: 10px 20px 20px 10px;
}

3.5、append()函数

append()函数是用来将某个值插入到列表中,并且处于最末尾。

示例代码如下:

/* 定义一个列表 */
$pad:'Avenir', Helvetica, Arial;
.append {
  background: #e68fba;
  /* 通过append()将sans-serif插入到$pad列表中 */
  font-family: append($pad,sans-serif);
}

效果图:

注意:

1、如果列表中只有一个列表项时,那么插入进去的值将和原来的值以空格的方式分隔。

2、如果列表中的列表项是以空格进行分隔的,那么插入进去的列表值也将以空格进行分隔。

3、如果列表中的列表项是以逗号进行分隔的,那么插入进去的列表值也将以逗号的进行分隔。

3.6、zip()函数

通过zip()函数可以将多个列表按照以相同的索引值为一组,重新组成一个新的多维度列表,如下实例代码:

/*
定义三个列表
*/
$pxs:1px 2px 3px;
$types: solid dashed solid;
$colors: red green blue;
.zip {
  background: #42b983;
  /*
  zip($pxs,$types,$colors) 表示将这三个列表值转换为一个多维的列表值,其结果为 1px solid red, 2px solid green, 3px solid blue
  nth(zip($pxs,$types,$colors),1) 表示获取新列表中的第一项数据,也就是下标为0的数据,也就是 1px solid red
  */
  border: nth(zip($pxs,$types,$colors),1);
}

效果图:

3.7、index()函数

index()函数类似于获取下标值一样,主要是找到某个值在列表中所处的位置,在Sass中,位置值从1开始,而不是从0开始,如下示例:

/*
定义一个列表
*/
$fontSizes: 10px 20px 30px;
.index1 {
  /* 获取$fontSizes列表中 10px 所在的位置,其结果为 1 */
  content: index($fontSizes,10px)+"";
}

效果图:

注意:在 index() 函数中,如果指定的值不在列表中,那么返回的值将是 false。

3.8、Introspention()函数

Introspention()函数包括了几个判断型函数:

  • type_of($value):返回一个值的类型
  • unit($number):返回 一个值的单位
  • unitless($number):判断一个值是否带有单位
  • comparable($number – 1,$number – 2):判断两个值是否可以做加、减和合并

这几个函数主要用来对值做一个判断的作用,我们来依次看每个函数的功能。

3.9、Introspention()函数 之 type_of()

type_of() 函数主要用来判断一个值是属于什么类型,其返回值下:

  • number 为数值型
  • string 为字符串型
  • bool 为布尔型
  • color 为颜色型

示例代码如下:

.typeof1 {
  content: type_of(100);
  /* number */
}

.typeof2 {
  content: type_of(100px);
  /* number */
}

.typeof3 {
  content: type_of("DFA");
  /* string */
}

.typeof4 {
  content: type_of(DFA);
  /* string */
}

.typeof5 {
  content: type_of(true);
  /* bool */
}

.typeof6 {
  content: type_of(#fff);
  /* color */
}

.typeof7 {
  content: type_of(blue);
  /* color */
}

效果图:

3.10、Introspention()函数 之 unit函数

unit()函数主要是用来获取一个值所使用的单位,碰到复杂的计算时,其根据运算得到一个“多单位组合”的值,不过只允许 乘 、除运算,如下实例代码:

.unit1 {
content: unit(100);
/* "" */
}

.unit2 {
content: unit(100px);
/* "px" */
}

.unit3 {
content: unit(100%);
/* "%" */
}

.unit4 {
content: unit(10em);
/* "em" */
}

.unit5 {
content: unit(10px * 3em);
/* "em*px" */
}

.unit6 {
content: unit(100px / 2em);
/* "px/em" */
}

效果图:

但是在进行加、减运算时,除了px与cm、mm以外,unit()函数将会报错,如下示例代码:

.unit7 {
content: unit(1px + 2cm);
/* "px" */
}

.unit8 {
content: unit(1px - 1cm);
/* "px" */
}

.unit9 {
content: unit(1px + 1mm);
/* "px" */
}

效果图:

3.11、 Introspention()函数 之 unitless函数

unitless() 函数相对来说简单明了些,只是用来判断一个值是否带有单位,如果不带单位返回的值为true,带单位返回的值为false,如下示例:

.unitless1 {
  content: unitless(100);
  /* true */
}
.unitless2 {
  content: unitless(100px);
  /* false */
}
.unitless3 {
  content: unitless(100%);
  /* false */
}

效果图如下:

3.12、 Introspention()函数 之 comparable函数

comparable() 函数主要是用来判断两个数是否可以进行 “加,减”以及“合并”。如果可以返回的值为 true,如果不可以返回的值为 false,示例代码如下:

.comparable1 {
  content: comparable(2px,1px);
  /* true */
}

.comparable2 {
  content: comparable(2px,1%);
  /* false */
}

.comparable3 {
  content: comparable(2px,1em);
  /* false */
}

.comparable4 {
  content: comparable(2px,1cm);
  /* true */
}

.comparable5 {
  content: comparable(2px,1mm);
  /* true */
}

.comparable6 {
  content: comparable(2cm,1mm);
  /* true */
}

效果图如下:

3.13、Miscellaneous函数

在这里把 miscellaneous 函数称之为三元条件函数,主要因为它与 Javascript 中的三元判断非常相似,它有两个值,当条件成立时返回第一个值,当条件不成立时,返回另一种值,如下示例代码:

.if1 {
  width: if(true,200px,100px);
  height: if(true,200px,100px);
  /* 200px */
  background: red;
}

.if2 {
  width: if(false,200px,100px);
  height: if(false,200px,100px);
  /* 100px */
  background: blue;
}

效果图:

3.14、Map

Sass中的 map 类似于 Javascript 中的 map,它总是以 key:value 成对的出现。它是通过 $ 加上变量名来声明 map,后面紧跟的是一个小括号,内部数据以 key:value 的形式赋予,其中 key和value是成对出现的,并且每对之间使用逗号 分隔,其中最后一组数据无需逗号,示例代码如下:

/*
声明一个主题颜色 map 容器
$themeColors 表示该 map 容器的名称
primary 表示key
#22ae39 表示值
*/
$themeColors: (
    primary: #22ae39,
    danger:#F56C6C
)

3.15、Sass Maps的函数

3.16、Sass Maps的函数 – map-get($map,$key)

3.17、Sass Maps的函数 – map-has-key($map,$key)

3.18、Sass Maps的函数 – map-keys($map)

3.19、Sass Maps的函数 – map-values($map)、map-merge($map1,$map2)

3.20、Sass Maps的函数 – map-remove($map,$key)、keywords($args)

4、Sass的函数功能–颜色函数

5、Sass的 @ 规则

[/$]

如果觉得文章有帮助到你,可以扫描以下二维码
   请本文作者 喝一杯
pay_weixin pay_weixin

发表评论

电子邮件地址不会被公开。 必填项已用*标注