发布于 由admin

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

发表评论

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