CSS预编译器：Sass（进阶）,更快的前端开发

1.@if

---

 

 

@if 指令是一个 SassScript，它可以根据条件来处理样式块，如果条件为 true 返回一个样式块，反之 false 返回另一个样式块

在 Sass 中除了 @if 之，还可以配合 @else if 和 @else 一起使用。 假设要控制一个元素隐藏或显示，我们就可以定义一个混合宏，通过 @if...@else... 来判断传进参数的值来控制 display 的值

 

2.@for循环

---

 

 

在制作网格系统的时候，大家应该对 .col1~.col12 这样的印象较深。在 CSS 中你需要一个一个去书写，但在 Sass 中，可以使用 @for 循环来完成。在 Sass 的 @for 循环中有两种方式：

 

 

 

 

 

 

 

 

3.@while循环

---

 

 

这个和 @for 指令很相似，只要 @while 后面的条件为 true 就会执行

 

 

 

4.Sass的函数简介

---

 

 

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

 

- 字符串函数

- 数字函数

- 列表函数

- 颜色函数

- Introspection 函数

- 三元函数等

 

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

     

     4.1字符串函数-unquote()函数

 

处理字符串的函数

-       unquote($string)：删除字符串中的引号；

-       quote($string)：给字符串添加引号。

 

.test1 {

    content:  unquote('Hello Sass!') ;

}

 

.test3 {

    content: unquote("I'm Web Designer");

}

 

     4.2字符串函数-quote()函数

 

quote() 函数刚好与 unquote() 函数功能相反，主要用来给字符串添加引号。如果字符串，自身带有引号会统一换成双引号 ""。如：

.test1 {

    content:  quote('Hello Sass!');

}

 

     4.3字符串函数-To-upper-case()、To-lower-case()

 

To-upper-case() 函数将字符串小写字母转换成大写字母。如：

 

//SCSS
.test {
  text: to-upper-case(aaaaa);
  text: to-upper-case(aA-aAAA-aaa);

}

 

To-lower-case() 函数 与 To-upper-case() 刚好相反，将字符串转换成小写字母：

 

//SCSS
.test {
  text: to-lower-case(AAAAA);
  text: to-lower-case(aA-aAAA-aaa);
}

 

编译出来的 css 代码：

 

//CSS
.test {
  text: aaaaa;
  text: aa-aaaa-aaa;
}

     

     4.4数字函数简介

 

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

-       round($value)：将数值四舍五入，转换成一个最接近的整数；

-       ceil($value)：将大于自己的小数转换成下一位整数；

-       floor($value)：将一个数去除他的小数部分；

-       abs($value)：返回一个数的绝对值；

-       min($numbers…)：找出几个数值之间的最小值；

-       max($numbers…)：找出几个数值之间的最大值；

-       random(): 获取随机数

     

 

percentage()函数主要是将一个不带单位的数字转换成百分比形式：（不能带单位）

 

>> percentage(.2)
20%
>> percentage(2px / 10px)
20%
>> percentage(2em / 10em)
20%
>>

 

.footer{
    width : percentage(.2)
}

 

编译后的 css 代码：

 

.footer{
    width : 20%

}

 

round() 函数可以将一个数四舍五入为一个最接近的整数：

.footer {
  width:round(12.3px)
}

 

编译后的 css 代码：

 

.footer {
  width: 12px;

}

 

floor() 函数刚好与 ceil() 函数功能相反，其主要将一个数去除其小数部分，并且不做任何的进位。也就是只做舍，

.footer {
  width:floor(12.3px);
}

 

编译后的 css 代码：

 

.footer {
  width: 12px;

}

 

 

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

>> abs(10)
10
>> abs(-10)
10
>> abs(-10px)
10px
>> abs(-2em)
2em
>> abs(-.5%)
0.5%
>> abs(-1px / 2px)

0.5

 

min() 函数功能主要是在多个数之中找到最小的一个，这个函数可以设置任意多个参数：(单位相同 )

>> min(1,2,1%,3,300%)
1%

 

max() 函数和 min() 函数一样，不同的是，max() 函数用来获取一系列数中的最大那个值：

 

>> max(1,5)
5
>> max(1px,5px)

5px

 

random() 函数是用来获取一个随机数：

 

>> random()
0.03886
>> random()

0.66527

 

5.列表函数简介

---

 

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

 

-       length($list)：返回一个列表的长度值；

-       nth($list, $n