sass函数功能

一、字符串函数

1、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
.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; }
2、quote()函数:添加引号,如果字符串,自身带有引号会统一换成双引号 ""
//SCSS
.test1 {
    content:  quote('Hello Sass!');
}
.test2 {
    content: quote("Hello Sass!");
}
.test3 {
    content: quote(ImWebDesigner);
}
.test4 {
    content: quote(' ');
}
//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 “?);")
3、To-upper-case():小写字母转换成大写字母

4、To-lower-case():大写字母转换成小写字母

5、数字方面的函数:

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

6、列表函数:

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

 (2)nth($list, $n):返回一个列表中指定的某个标签值。nth() 函数用来指定列表中某个位置的值。不过在 Sass 中,nth() 函数和其他语言不同,1 是指列表中的第一个标签值, 2 是指列表中的第二个标签值,依此类推。如:

>> nth(10px 20px 30px,1)
10px
>> nth((Helvetica,Arial,sans-serif),2)
"Arial"
>> nth((1px solid red) border-top green,1)
(1px "solid" #ff0000)
注:在 nth($list,$n) 函数中的 $n 必须是大于 0 的整数。

 (3)join($list1, $list2, [$separator]):将两个列表连接在一起,变成一个列表;但很多时候不只碰到两个列表连接成一个列表,这个时候就需要将多个 join() 函数合并在一起使用:

>> join((blue red), join((#abc #def),(#dee #eff)))
(#0000ff #ff0000 #aabbcc #ddeeff #ddeeee #eeffff)
在 join() 函数中还有一个很特别的参数 $separator,这个参数主要是用来给列表函数连接列表值是,使用的分隔符号,默认值为 auto。

>> join(blue,red,comma)
(#0000ff, #ff0000)
>> join(blue,red,space)
(#0000ff #ff0000)

 (4)append($list1, $val, [$separator]):将某个值放在列表的最后;

 (5)zip($lists…):将几个列表结合成一个多维的列表;在使用zip()函数时,每个单一的列表个数值必须是相同的:

>> zip(1px 2px 3px,solid dashed dotted,green blue red)
((1px "solid" #008000), (2px "dashed" #0000ff), (3px "dotted" #ff0000))

 (6)index($list, $value):返回一个值在列表中的位置值。

7、Introspection 函数

  • type-of($value):返回一个值的类型
  • unit($number):返回一个值的单位,碰到复杂的计算时,其能根据运算得到一个“多单位组合”的值,不过只充许乘、除运算:
    >> unit(100)
    ""
    >> unit(100px)
    "px"
    >> unit(20%)
    "%"
    >> unit(1em)
    "em"
    >> unit(10px * 3em)
    "em*px"
    >> unit(10px / 3em)
    "px/em"
    >> unit(10px * 2em / 3cm / 1rem)
    "em/rem"

    但加、减碰到不同单位时,unit() 函数将会报错,除 px 与 cm、mm 运算之外:
    >> unit(1px + 1cm)
    "px"
    >> unit(1px - 1cm)
    "px"
    >> unit(1px + 1mm)
    "px"
    >> unit(10px * 2em - 3cm / 1rem)
    SyntaxError: Incompatible units: 'cm' and 'px*em'.
    >> unit(10px * 2em - 1px / 1rem)
    SyntaxError: Incompatible units: '' and 'em'.
    >> unit(1px - 1em)
    SyntaxError: Incompatible units: 'em' and 'px'.
    >> unit(1px - 1rem)
    SyntaxError: Incompatible units: 'rem' and 'px'.
    >> unit(1px - 1%)
    SyntaxError: Incompatible units: '%' and 'px'.
    >> unit(1cm + 1em)
    SyntaxError: Incompatible units: 'em' and 'cm'.

  • unitless($number):判断一个值是否带有单位,如果不带单位返回的值为 true,带单位返回的值为 false
  • comparable($number-1, $number-2):判断两个值是否可以做加、减和合并
8、Miscellaneous 函数

 Miscellaneous 函数称为三元条件函数,主要因为他和 JavaScript 中的三元判断非常的相似。他有两个值,当条件成立返回一种值,当条件不成立时返回另一种值:

>> if(true,1px,2px)
1px
>> if(false,1px,2px)
2px
9、Maps的函数

sass Map:

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

  • 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。
10、颜色函数

(1) RGB函数

  • rgb($red,$green,$blue):根据红、绿、蓝三个值创建一个颜色;
  • rgba($red,$green,$blue,$alpha):根据红、绿、蓝和透明度值创建一个颜色;
  • red($color):从一个颜色中获取其中红色值;
  • green($color):从一个颜色中获取其中绿色值;
  • blue($color):从一个颜色中获取其中蓝色值;
  • mix($color-1,$color-2,[$weight]):把两种颜色混合在一起。
(2)  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):反回一个反相色,红、绿、蓝色值倒过来,而透明度不变。
(3) opacity 

  •       alpha($color) /opacity($color):获取颜色透明度值;
  •       rgba($color, $alpha):改变颜色的透明度值;
  •       opacify($color, $amount) / fade-in($color, $amount):使颜色更不透明;
  •       transparentize($color, $amount) / fade-out($color, $amount):使颜色更加透明
11、sass的@规则

@import

Sass 扩展了 CSS 的 @import 规则,让它能够引入 SCSS 和 Sass 文件。 所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一的 CSS 文件。 另外,被导入的文件中所定义的变量或 mixins 都可以在主文件中使用。

Sass 会在当前目录下寻找其他 Sass 文件, 如果是 Rack、Rails 或 Merb 环境中则是 Sass 文件目录。 也可以通过 :load_paths 选项或者在命令行中使用 --load-path 选项来指定额外的搜索目录。

@import 根据文件名引入。 默认情况下,它会寻找 Sass 文件并直接引入, 但是,在少数几种情况下,它会被编译成 CSS 的 @import 规则:

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

如果上述情况都没有出现,并且扩展名是 .scss 或 .sass, 该名称的 Sass 或 SCSS 文件就会被引入。 如果没有扩展名, Sass 将试着找出具有 .scss 或 .sass 扩展名的同名文件并将其引入。

注意,在同一个目录不能同时存在带下划线和不带下划线的同名文件。 例如, _colors.scss 不能与 colors.scss 并存。
嵌套 @import如下:

sass:

.example {
  color: red;
}
#main {
  @import "example";
}
css:
#main .example {
  color: red;
}
@media

Sass 中的 @media 指令和 CSS 的使用规则一样的简单,但它有另外一个功能,可以嵌套在 CSS 规则中。有点类似 JS 的冒泡功能一样,如果在样式中使用 @media 指令,它将冒泡到外面。来看一个简单示例:

sass:

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

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

@media 也可以嵌套 @media:
sass:

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

@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; } }
在使用 @media 时,还可以使用插件#{}:
sass:

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}
css:

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px; } }
@extend 
Sass 中的 @extend 是用来扩展选择器或占位符。比如:
sass:
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
css:

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }

.error.intrusion, .seriousError.intrusion {
  background-image: url("/image/hacked.png"); }

.seriousError {
  border-width: 3px; }
@at-root
@at-root 从字面上解释就是跳出根元素。当你选择器嵌套多层之后,想让某个选择器跳出,此时就可以使用 @at-root。来看一个简单的示例:
sass:
.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 中是用来调试的,当你的在 Sass 的源码中使用了 @debug 指令之后,Sass 代码在编译出错时,在命令终端会输出你设置的提示 Bug:

@debug 10em + 12em;
Line 1 DEBUG: 22em
@warn
@warn 和 @debug 功能类似,用来帮助我们更好的调试 Sass。如:
@mixin adjust-location($x, $y) {
  @if unitless($x) {
    @warn "Assuming #{$x} to be in pixels";
    $x: 1px * $x;
  }
  @if unitless($y) {
    @warn "Assuming #{$y} to be in pixels";
    $y: 1px * $y;
  }
  position: relative; left: $x; top: $y;
}
@error
@mixin error($x){
  @if $x < 10 {
    width: $x * 10px;
  } @else if $x == 10 {
    width: $x;
  } @else {
    @error "你需要将#{$x}值设置在10以内的数";
  }

}

.test {
  @include error(15);
}



©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页