我转过几个弯 绕过那个小雨楼
拿着蒲扇摆着衣衫渡着紧箍咒
不问天涯不停留 喝过几壶酒
不过年少白头道义放胸口
倘若明天之后 遥看前尘剑封侯
似那天上神仙无所求
朝朝暮暮君如梦醒十分不为何理由
是真是假是惶恐是无休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
又过了几个弯 算尽天量道莫慌
踏这田园闻这芳草香
跌跌撞撞仗剑天涯折煞不枉无笔良
是梦是幻是温柔是家乡
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
谁能与我一醉方休
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%; }
0
评论(0)