zoukankan      html  css  js  c++  java

  • sass进阶篇

    @if

    @if 指令是一个 SassScript，它可以根据条件来处理样式块，如果条件为 true 返回一个样式块，反之 false 返回另一个样式块。在 Sass 中除了 @if 之，还可以配合 @else if 和 @else 一起使用。

    假设要控制一个元素隐藏或显示，我们就可以定义一个混合宏，通过 @if...@else... 来判断传进参数的值来控制 display 的值。如下所示：

    //SCSS
@mixin blockOrHidden($boolean:true) {
  @if $boolean {
      @debug "$boolean is #{$boolean}";
      display: block;
    }
  @else {
      @debug "$boolean is #{$boolean}";
      display: none;
    }
}

.block {
  @include blockOrHidden;
}

.hidden{
  @include blockOrHidden(false);
}

    编译出来的CSS:

    .block {
  display: block;
}

.hidden {
  display: none;
}

    @for循环（上）

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

    @for $i from <start> through <end>
@for $i from <start> to <end>
    • $i 表示变量
    • start 表示起始值
    • end 表示结束值

    这两个的区别是关键字 through 表示包括 end 这个数，而 to 则不包括 end 这个数。

    如下代码，先来个使用 through 关键字的例子：

    @for $i from 1 through 3 {
  .item-#{$i} {  2em * $i; }
}

    编译出来的 CSS:

    .item-1 {
   2em;
}

.item-2 {
   4em;
}

.item-3 {
   6em;
}

    再来个 to 关键字的例子：

    @for $i from 1 to 3 {
  .item-#{$i} {  2em * $i; }
}

    编译出来的 CSS:

    .item-1 {
   2em;
}

.item-2 {
   4em;
}

    @while循环

    @while 指令也需要 SassScript 表达式（像其他指令一样），并且会生成不同的样式块，直到表达式值为 false 时停止循环。这个和 @for 指令很相似，只要 @while 后面的条件为 true 就会执行。

    这里有一个 @while 指令的简单用例：

    //SCSS
$types: 4;
$type- 20px;

@while $types > 0 {
    .while-#{$types} {
         $type-width + $types;
    }
    $types: $types - 1;
}

    编译出来的 CSS

    .while-4 {
   24px;
}

.while-3 {
   23px;
}

.while-2 {
   22px;
}

.while-1 {
   21px;
}

    @each循环

    @each 循环就是去遍历一个列表，然后从列表中取出对应的值。

    @each 循环指令的形式：

    @each $var in <list>

    如果你没有接触过列表，也不要紧，他也非常简单。

    在下面的例子中你可以看到，$var 就是一个变量名，<list> 是一个 SassScript 表达式，他将返回一个列表值。变量 $var 会在列表中做遍历，并且遍历出与 $var 对应的样式块。

    这有一个 @each 指令的简单示例：

    $list: adam john wynn mason kuroir;//$list 就是一个列表

@mixin author-images {
    @each $author in $list {
        .photo-#{$author} {
            background: url("/images/avatars/#{$author}.png") no-repeat;
        }
    }
}

.author-bio {
    @include author-images;
}

    编译出 CSS:

    .author-bio .photo-adam {
  background: url("/images/avatars/adam.png") no-repeat; }
.author-bio .photo-john {
  background: url("/images/avatars/john.png") no-repeat; }
.author-bio .photo-wynn {
  background: url("/images/avatars/wynn.png") no-repeat; }
.author-bio .photo-mason {
  background: url("/images/avatars/mason.png") no-repeat; }
.author-bio .photo-kuroir {
  background: url("/images/avatars/kuroir.png") no-repeat; }

    字符串函数-unquote()函数

    字符串函数顾名思意是用来处理字符串的函数。Sass 的字符串函数主要包括两个函数：

    •       unquote($string)：删除字符串中的引号；
    •       quote($string)：给字符串添加引号。

    1、unquote()函数

    unquote() 函数主要是用来删除一个字符串中的引号，如果这个字符串没有带有引号，将返回原始的字符串。简单的使用终端来测试这个函数的运行结果：

    //SCSS
.test1 {
    content:  unquote('Hello Sass!') ;
}
.test2 {
    content: unquote("'Hello Sass!");
}
.test3 {
    content: unquote("I'm Web Designer");
}
.test4 {
    content: unquote("'Hello Sass!'");
}
.test5 {
    content: unquote('"Hello Sass!"');
}
.test6 {
    content: unquote(Hello Sass);
}

    编译后的 css 代码：

    //CSS
.test1 {
  content: Hello Sass!; }

.test2 {
  content: 'Hello Sass!; }

.test3 {
  content: I'm Web Designer; }

.test4 {
  content: 'Hello Sass!'; }

.test5 {
  content: "Hello Sass!"; }

.test6 {
  content: Hello Sass; }

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

    字符串函数-quote()函数

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

    //SCSS
.test1 {
    content:  quote('Hello Sass!');
}
.test2 {
    content: quote("Hello Sass!");
}
.test3 {
    content: quote(ImWebDesigner);
}
.test4 {
    content: quote(' ');
}

    编译出来的 css 代码：

    //CSS
.test1 {
  content: "Hello Sass!";
}
.test2 {
  content: "Hello Sass!";
}
.test3 {
  content: "ImWebDesigner";
}
.test4 {
  content: "";
}

    使用 quote() 函数只能给字符串增加双引号，而且字符串中间有单引号或者空格时，需要用单引号或双引号括起，否则编译的时候将会报错。

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

    这样使用，编译器马上会报错：

    error style.scss (Line 13: $string: ("Hello""Sass") is not a string for `quote')

    解决方案就是去掉空格，或者加上引号：

    .test1 {
    content:  quote(HelloSass);
}
.test1 {
    content:  quote("Hello Sass");
}

    同时 quote() 碰到特殊符号，比如： !、?、> 等，除中折号 - 和 下划线_ 都需要使用双引号括起，否则编译器在进行编译的时候同样会报错：

    error style.scss (Line 13: Invalid CSS after "...quote(HelloSass": expected ")", was "!);")
error style.scss (Line 16: Invalid CSS after "...t:  quote(Hello": expected ")", was “?);")

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

    1、To-upper-case()

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

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

    编译出来的 css 代码：

    //CSS
.test {
  text: AAAAA;
  text: AA-AAAA-AAA;
}

    2、To-lower-case()

    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;
}

    数字函数简介

    Sass 中的数字函数提要针对数字方面提供一系列的函数功能：

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

    列表函数简介

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

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

    Introspection函数

    Introspection 函数包括了几个判断型函数：

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

    Sass Maps的函数

    前面介绍了使用 map 来管理变量，但要在 Sass 中获取变量，或者对 map 做更多有意义的操作，我们必须借助于 map 的函数功能。在 Sass 中 map 自身带了七个函数：

    • map-get($map,$key)：根据给定的 key 值，返回 map 中相关的值。
    • map-merge($map1,$map2)：将两个 map 合并成一个新的 map。
    • map-remove($map,$key)：从 map 中删除一个 key，返回一个新 map。
    • map-keys($map)：返回 map 中所有的 key。
    • map-values($map)：返回 map 中所有的 value。
    • map-has-key($map,$key)：根据给定的 key 值判断 map 是否有对应的 value 值，如果有返回 true，否则返回 false。
    • keywords($args)：返回一个函数的参数，这个参数可以动态的设置 key 和 value。

    RGB颜色函数-RGB()颜色函数

    在 Sass 的官方文档中，列出了 Sass 的颜色函数清单，从大的方面主要分为 RGB , HSL 和 Opacity 三大函数，当然其还包括一些其他的颜色函数，比如说 adjust-color 和 change-color 等。在这章节中，将主要和大家一起探讨 Sass 颜色函数中常见的 RGB、HSL 和 Opacity 函数。

    1、RGB颜色函数

    RGB 颜色只是颜色中的一种表达式，其中 R 是 red 表示红色，G 是 green 表示绿色而 B 是 blue 表示蓝色。在 Sass 中为 RGB 颜色提供六种函数：

    • rgb($red,$green,$blue)：根据红、绿、蓝三个值创建一个颜色；
    • rgba($red,$green,$blue,$alpha)：根据红、绿、蓝和透明度值创建一个颜色；
    • red($color)：从一个颜色中获取其中红色值；
    • green($color)：从一个颜色中获取其中绿色值；
    • blue($color)：从一个颜色中获取其中蓝色值；
    • mix($color-1,$color-2,[$weight])：把两种颜色混合在一起。

    仅从概念上，或许大家没有太多的概念，我们通过下面的命令来做一个简单的测试：

    sass -i

    在命令终端开启这个命令，相当于开启 Sass 的函数计算。

    接下来，分别在终端使用 RGB 函数来进行计算，看其最终结果：

    $ sass -i
>> rgb(200,40,88) //根据r:200,g:40,b:88计算出一个十六进制颜色值
#c82858
>> rgba(#c82858,.65) //根据#c82858的65%透明度计算出一个rgba颜色值
rgba(200, 40, 88, 0.65)
>> red(#c82858) //从#c82858颜色值中得到红色值 200
200
>> green(#c82858) //从#c82858颜色值中得到绿色值 40
40
>> blue(#c82858) //从#c82858颜色值中得到蓝色值 88
88
>> mix(#c82858,rgba(200,40,80,.65),.3) //把#c82858和rgba(200,40,88,.65) 两颜色按比例混合得到一个新颜色
rgba(200, 40, 80, 0.65105)

    从上面的简单运算结果可以很清晰的知道。在 RGB 颜色函数中，在实际中常用的主要是 rgba() 和 mix() 两个函数，而 rgb() 函数只能快速的将一个 rgb 颜色转换成十六进制颜色表达，red()、green() 和 blue() 函数，只能取得某一颜色的一个值，对于颜色上使用并无太大作用（或许他的好处，我还没有理解过来）。

    HSL函数简介

    在 Sass 中提供了一系列有关于 HSL 的颜色函数，以供大家使用，其中常用的有 saturation、lightness、adjust-hue、lighten、darken 等等。接下来我们先来了解一下 HSL 颜色函数包括哪些具体的函数，所起的作用是什么：

    • hsl($hue,$saturation,$lightness)：通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色；
    • hsla($hue,$saturation,$lightness,$alpha)：通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色；
    • hue($color)：从一个颜色中获取色相（hue）值；
    • saturation($color)：从一个颜色中获取饱和度（saturation）值；
    • lightness($color)：从一个颜色中获取亮度（lightness）值；
    • adjust-hue($color,$degrees)：通过改变一个颜色的色相值，创建一个新的颜色；
    • lighten($color,$amount)：通过改变颜色的亮度值，让颜色变亮，创建一个新的颜色；
    • darken($color,$amount)：通过改变颜色的亮度值，让颜色变暗，创建一个新的颜色；
    • saturate($color,$amount)：通过改变颜色的饱和度值，让颜色更饱和，从而创建一个新的颜色
    • desaturate($color,$amount)：通过改变颜色的饱和度值，让颜色更少的饱和，从而创建出一个新的颜色；
    • grayscale($color)：将一个颜色变成灰色，相当于desaturate($color,100%);
    • complement($color)：返回一个补充色，相当于adjust-hue($color,180deg);
    • invert($color)：反回一个反相色，红、绿、蓝色值倒过来，而透明度不变。

    同样在你的终端，通过 sass -i 来对上面的各个函数做一个简单测试：

    >> hsl(200,30%,60%) //通过h200,s30%，l60%创建一个颜色
#7aa3b8
    >> hsla(200,30%,60%,.8)//通过h200,s30%，l60%,a80%创建一个颜色
rgba(122, 163, 184, 0.8)
    >> hue(#7ab)//得到#7ab颜色的色相值
195deg
    >> saturation(#7ab)//得到#7ab颜色的饱和度值
33.33333%
    >> lightness(#7ab)//得到#7ab颜色的亮度值
60%
    >> adjust-hue(#f36,150deg) //改变#f36颜色的色相值为150deg
#33ff66
    >> lighten(#f36,50%) //把#f36颜色亮度提高50%
#ffffff
    >> darken(#f36,50%) //把#f36颜色亮度降低50%
#33000d
    >> saturate(#f36,50%) //把#f36颜色饱和度提高50%
#ff3366
    >> desaturate(#f36,50%) //把#f36颜色饱和度降低50%
#cc667f
    >> grayscale(#f36) //把#f36颜色变成灰色
#999999
    >> complement(#f36)
#33ffcc
    >> invert(#f36)
#00cc99

    在 HSL 函数中，hsl() 和 hsla() 函数主要是通过颜色的 H、S、L 或者 A 几个参数获取一个 rgb 或 rgba 表达的颜色，这两个函数与 CSS 中的无太大区别，只是使用这两个函数能帮助您知道颜色的十六进制表达式和 rgba 表达式。

    而 hue()、saturation() 和 lightness() 函数主要是用来获取指定颜色中的色相值、饱和度和亮度值。对于颜色表达没有太多的实际作用。

    HSL 函数中最常见的应该是 lighten()、darken()、saturate()、desaturate()、grayscale()、complement()和 invert() 几个函数。
  • 相关阅读:
    SpringBoot-源码解析
    SpringBoot快速部署
    vue.js
    数据库设计--三范式
    mysql 建表及练习
    索引复制迁移
    nginx检查、重启、、、
    设计模式--Strategy 策略模式
    设计模式--设计原则
    设计模式--Template Method（模板方法）
  • 原文地址：https://www.cnblogs.com/Nyan-Workflow-FC/p/6984440.html
Copyright © 2011-2022 走看看