木灵鱼儿

木灵鱼儿

阅读：2107

最后更新：2020/04/20/ 22:09:33

sass 函数

函数部分比较少用，有时间我再来细看，这里扒了一下简书的文章。

文章来自：链接

1. 字符串函数

  • unquote（$string）：删除字符串中的引号；
  • quote（$string）：给字符串添加引号；
  • To-upper-case（$string）：将字符串小写字母转换为大写字母
  • To-lower-case（$string）：将字符串大写字母转换为小写字母
（1） unquote（$string）

unquote函数主要功能是删除字符串中的引号：

  • 不管是双引号还是单引号包裹的字符串，引号皆被去掉；
  • 只能删除字符串最前边和最后边的引号，没法去掉中间的引号；
  • 如果字符串没有带引号，则返回原字符串；
  • 若引号中，有半个不成对的引号。
//SCSS
.demo1 { content: unquote('Hello Sass') ; }
.demo2 { content: unquote("Hello Sass"); }
.demo3 { content: unquote("Hello' Sass"); }
.demo4 { content: unquote("'Hello Sass'"); }
.demo5 { content: unquote('"Hello Sass"'); }
.demo6 { content: unquote(Hello Sass);}

//CSS
.demo1 { content: Hello Sass; }
.demo2 { content: Hello Sass; }
.demo3 { content: Hello' Sass; }
.demo4 { content: 'Hello Sass'; }
.demo5 { content: "Hello Sass"; }
.demo6 { content: Hello Sass; }
（2） quote（$string）

quote函数主要功能是给字符串添加引号：

  • 若字符串本身带有引号，就不添加；
  • 若字符串带有单引号，则跟换为双引号；
  • 若双引号中有单引号，则不变，单引号不受影响；
  • 若字符串中间有空格或者半块的单引号、双引号时，需要用单引号或双引号括起，不然编译会报错;
  • 碰到特殊符号，比如： !、?、> 等，除中折号 - 和下划线_ 都需要使用双引号括起，否则编译器在进行编译的时候同样会报错：
//SCSS
.demo1 { content: quote('Hello Sass') ; }
.demo2 { content: quote("Hello Sass"); }
.demo3 { content: quote("Hello' Sass"); }
.demo4 { content: quote("'Hello Sass'"); }
.demo5 { content: quote('"Hello Sass"'); }
.demo6 { content: quote(HelloSass);}

//CSS
.demo1 { content: "Hello Sass"; }
.demo2 { content: "Hello Sass"; }
.demo3 { content: "Hello' Sass"; }
.demo4 { content: "'Hello Sass'"; }
.demo5 { content: '"Hello Sass"'; }
.demo6 { content: "HelloSass"; }

2. 数字函数

  • percentage($value)：将不带单位的数转换成百分比值；
  • round($value)：将数值四舍五入，转换成一个最接近的整数；
  • ceil($value)：向上取整；
  • floor($value)：向下取整；
  • abs($value)：取数的绝对值；
  • min($numbers…)：找出几个数值之间的最小值；
  • max($numbers…)：找出几个数值之间的最大值；

  • random(): 获取随机数

    Sass的数字函数和JavaScript的Math对象方法基本相似：

//SCSS
.demo1 {
  width : percentage(.2); //转换成百分比值
  height: percentage(2px / 10px);
  margin: percentage(2em / 10em);
}
.demo2 {
  width: round(12.3px); //四舍五入，两边单位不统一会报错
  height: round(2px / 3px);
  margin: round(2.2%);
}
.demo3 {
  width: ceil(2.3px); //向上取整
  height: ceil(2px / 3px);
  margin: ceil(2.8%);
}
.demo4 {
  width: floor(2.3px); //向下取整
  height: floor(2px / 3px);
  margin: floor(2.8%);
}
.demo5{
  width: abs(2.3px);  //绝对值
  height: min(1,2,1%,3,300%); //找出最小值
  margin: max(1px,5px); //找出最大值
  padding:random(); //随机数
}

//CSS
.demo1 {
  width: 20%;
  height: 20%;
  margin: 20%; }

.demo2 {
  width: 12px;
  height: 1;
  margin: 2%; }

.demo3 {
  width: 3px;
  height: 1;
  margin: 3%; }

.demo4 {
  width: 2px;
  height: 0;
  margin: 2%; }

.demo5 {
  width: 2.3px;
  height: 1%;
  margin: 5px;
  padding: 0.4669285352; }

3. 列表函数

  • length($list)：返回一个列表的长度值;
  • nth($list, $n)：返回一个列表中指定的某个标签值;
  • join($list1, $list2, [$separator])：将两个列给连接在一起，变成一个列表；
  • append($list1, $val, [$separator])：将某个值放在列表的最后；
  • zip($lists…)：将几个列表结合成一个多维的列表；
  • index($list, $value)：返回一个值在列表中的位置值。
//SCSS
.demo1 {
  width : length(10px);   //返回列表清单中有多少个值，空格隔开，不能使用逗号。
  height:  length(border 1px solid)  //同一个列表里,可以是不同类型、不同单位的值
}
.demo2 {
  width: nth((Helvetica,Arial,sans-serif),2);   //指定列表中某个位置的值，1是指列表中的第一个标签值,以此类推。
  height: nth((1px solid red) border-top green,1);
}
.demo3 {
  margin: join((10px 20px),(30px 40px));  //将两个列表连接合并成一个列表,不同列表之间用逗号隔开。
  padding: append((10px,20px,20px),30px);  //将某个值插入到列表中，并且处于最末位
  border: zip(1px 2px 3px,solid dashed dotted) ;  //多个列表值转成一个多维的列表,每个单一的列表个数值必须是相同
}
.demo4 {
  width: index(1px solid red, 1px);   //返回对应的值在列表中所处的位置,第一个值就是1,以此类推。
  height:  index(1px solid red, yellow)  //如果指定的值不在列表中，那么返回的值将是false著作权归作者所有。
}

//CSS
.demo1 {
  width: 1;
  height: 3;
}
.demo2 {
  width: Arial;
  height: 1px solid red;
}
.demo3 {
  margin: 10px 20px 30px 40px;
  padding: 10px, 20px, 20px, 30px;
  border: 1px solid, 2px dashed, 3px dotted;
}
.demo4 {
  width: 1;
}

4. Introspection函数

  • type-of($value)：返回一个值的类型;
  • unit($number)：返回一个值的单位;
  • unitless($number)：判断一个值是否带有单位;
  • comparable($number-1, $number-2)：判断两个值是否可以做加、* 减和合并.
//SCSS
.demo1 {
    content:type-of(100);  //判断一个值是属于什么类型
    content:type-of(100px);
    content:type-of(asdf);
    content: type-of(blue);
  }
.demo2 {
  content: unit(10px * 3em);  //获取一个值所使用的单位
  content: unit(10px * 2em / 3cm / 1rem);
}
.demo3 {
  content: unitless(100px);  //判断一个值是否带有单位
  content:  unitless(1 /2 + 2 );
}
.demo3 {
  content: comparable(2px,1px);  //断两个数是否可以进行加，减以及合并
  content: comparable(2px,1em);
}

//CSS
.demo1 {
  content: number;
  content: number;
  content: string;
  content: color;
}
.demo2 {
  content: "em*px";
  content: "em/rem";
}
.demo3 {
  content: false;
  content: true;
}
.demo3 {
  content: true;
  content: false;
}

5. 三元条件函数

if($condition,$if-true,$if-false);

判断$condition，如果条件成立，则返回$if-true的结果，如果条件不成立，则返回$if-false的结果。

//SCSS
.demo1{width:if(true,8em,20em)}
.demo2{height:if(false,8em,20em)}

//CSS
.demo1 { width: 8em;}
.demo2 {height: 20em;}

6.Maps的函数

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

Sass中map的形式如下：
用 $ 加上命名空间来声明 map，后面紧接是一个小括号 ()，将数据以 key:value 的形式赋予，key 和 value 是成对出现。

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

对应的一些例子：

//SCSS
$colors: (//$map
        redColor: #FF2C60, // $key:value
        greenColor:#168009,
        blueColor:#7BA5FF
);

@if map-has-key($colors, meat) {  //当 $map 中有这个 $key，则函数返回 true，否则返回 false。
  div {
    color: map-get($colors, redColor);   //根据 $key 参数，返回 $key 在 $map 中对应的 value 值。
    color: map-get($colors, yellowColor);   //如果 $key 不存在 $map中，将返回 null 值,并且不会把css编译出来。
  }
} @else {
  div {
    color: green
  }
}

.btn-#{nth(map-keys($colors),1)} {     //函数将会返回 $map 中的所有 key,并通过nth（）获取某值
  color: nth(map-values($colors), 2);   //函数将会返回 $map 中的所有 value,并通过nth（）获取某值
}

$div1: (
        text: #f36,
        link: #f35,
        border: #384
);
$div2: (
        width:300px,
        height:100px,
        z-index:3
);
$newMap: map-merge($div1, $div2);   //map-merge($map1,$map2) 函数是将 $map1 和 $map2 合并，然后得到一个新的 $map。
div {
  @each $x, $y in $newMap {
    #{$x}: #{$y};
  }
}

$newMap: map-remove($div1, link);   // 用来删除当前 $map 中的某一个 $key，从而得到一个新的 map。其返回的值还是一个 map。
div {
  @each $x, $y in $newMap {
    #{$x}: #{$y};
  }
}

//CSS
div {
  color: green;
}

.btn-redColor {
  color: #168009;
}

div {
  text: #f36;
  link: #f35;
  border: #384;
  width: 300px;
  height: 100px;
  z-index: 3;
}

div {
  text: #f36;
  border: #384;
}

7.颜色函数

  • rgb($red,$green,$blue)：根据红、绿、蓝三个值创建一个颜色；
  • rgba($red,$green,$blue,$alpha)：根据红、绿、蓝和透明度值创建一个颜色；
  • red($color)：从一个颜色中获取其中红色值；
  • green($color)：从一个颜色中获取其中绿色值；
  • blue($color)：从一个颜色中获取其中蓝色值；
  • mix($color-1,$color-2,[$weight])：把两种颜色混合在一起。
//SCSS
.demo1 {
  color: rgb(100, 148, 210);   //根据红、绿、蓝三个值创建一个颜色,输入的是三个0-255之间的数字值
  background-color: rgba(255, 43, 75, 0.8);   //根据红、绿、蓝和透明度值创建一个颜色

}
.demo2 {
  content: red(#f36);   //从一个颜色中获取其红色值
  @if red(#f36) > 50 {   //当颜色的红色值大于50使用白色，否则使用黑色
    color: #fff;
  } @else{
    color: #000;
  }
}
.demo3 {
  color:mix(#f00, #00f);   //把两种颜色按照一定的比例混合在一起
  color: mix(#f00, #00f, 25%)
}

//CSS
.demo1 {
  color: #6494d2;
  background-color: rgba(255, 43, 75, 0.8);
}
.demo2 {
  content: 255;
  color: #fff;
}
.demo3 {
  color: purple;
  color: #4000bf;
}

8.自定义函数

1. 创建和使用自定义函数

Sass和其他脚本语言有类似之处，可以利用变量来构建自己的函数，这使Sass可以像写JavaScript那样拥有自己的逻辑。下面是Sass自定义函数的基本结构：

@function function-name($args) {
    @return value-to-be-returned;
}
body{
  font-size: function-name($args);
}
  • 创建自定义函数需要两个Sass指令， @function和 @return。前者创建函数，后者表明了函数将返回的值
  • function-name代表函数名，在Sass中function-name和 function_name是相同的函数，所以可使用破折号或下划线调用函数，无论命名时使用的是哪个。
  • 传递到函数中的参数$args是可选的，通常会使用传递过去的参数进行运算，也可能是一些所有函数都可以访问的全局变量。
//SCSS
@function column-width($col, $total) {
  @return percentage($col/$total);
}
.col-3 {
  width: column-width(3, 8);
}
.col-5 {
  width: column-width(5, 8);
}

//CSS
.col-3 {  width: 37.5%; }
.col-5 {  width: 62.5%; }

2. 关键字参数

传参的时候有时候会不知道每个参数是什么意思，参数之间是一个什么样的顺序。为了解决这个问题，Sass允许通过语法$name: value的形式指定每个参数的值。这种形式的传参，参数顺序就不必再在乎了，只需要保证没有漏掉参数即可：

//SCSS
@function column-width($col, $total) {
  @return percentage($col/$total);
}
.col-3 {
  width: column-width($col:3, $total:8);
}
.col-5 {
  width: column-width($total:5,$col:8);
}

//CSS
.col-3 {  width: 37.5%; }
.col-5 {  width: 160%; }

3. 默认参数

为了在使用函数是不必传入所有的参数，我们可以给参数指定一个默认值。参数默认值使用$name: default-value的声明形式，默认值可以是任何有效的css属性值，甚至是其他参数的引用。

//SCSS
@function column-width($col:3, $total:8) {
  @return percentage($col/$total);
}
.col-3 {
  width: column-width($col:2, $total:4);
}
.col-5 {
  width: column-width();
}

//CSS
.col-3 {  width: 50%; }
.col-5 {  width: 37.5%; }
文章分类 SASS
文章标签 sass 函数
木灵鱼儿

木灵鱼儿

发布了 544 篇文章获得点赞 0获得阅读 2107

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 2107

相关文章

vuex持久化插件vuex-persistedstate的模块化写法vuex持久化插件vuex-persistedstate的模块化写法
vue cli4 修改静态html的 %= htmlWebpackPlugin.options.title % 默认值vue cli4 修改静态html的 %= htmlWebpackPlugin.options.title % 默认值
webpack5 初始化《JJ》多页面的一些问题webpack5 初始化《JJ》多页面的一些问题
vue cli4 全局scss变量技巧vue cli4 全局scss变量技巧
浅析Element的collapse-transition折叠动画浅析Element的collapse-transition折叠动画