当前位置:首页 > 网站技术 > 前端技术 > 正文内容

sass条件函数和内置函数

小彬2021-02-05前端技术350
sass条件函数

1、if-else
 
$type="value1"
@if $type== "value1"{
}@else if $type=="value2"{
}@else{
}

2、for
through :循环输出到最大值
@for $i from 1 through 3{
    .item#{$i}{
         width:1px*$i  //最后i=3
    }
}
to:循环输出最大值-1
@for $i from 1 to 3{
    .item#{$i}{
         width:1px*$i  //最后i=2
    }
}

for-list
$list:(1,2,3,4,5)
@for $i from 1 through length($list){
    .item#{$i}{
         width:1px*$i  
    }
}

3、while
$i:6;
@while $i>0{
    .item#{$i}{
         width:1px*$i  
    }
    $i:$i-2
}

4、each
$map:(top:1px,left:1px,left:1px,right:1px)
.div{
  @each $key,$value in $map{
     #{$key}:$value;
  }
}



sass内置函数

percentage($number):转换成百分比
round($number):执行标准舍入。即返回四舍五入后的整数
ceil($number):执行向上取整。
floor($number):执行向下取整。
abs($number):返回绝对值
min($numbers...):返回最小值。
max($numbers...):返回最大值
random($number):获取随机数。如果$number不取值,则返回0-1的小数;如果$number>0,则随机返回0-$number之间的整数
length($list):获取数组长度
nth($list,$n):获取指定下标的元素。
set-nth($list,$n,$value):替换指定下标的元素
join($list1,$list2):拼接数组
append($list1,$val,[$sparator]):从数组尾部添加元素
index($list,$value):返回指定元素在数组中的位置
unquote($string):去除引号
quote($string):添加引号
str-length($string):获取字符串长度
str-insert($string,$insert,$index):在指定位置插入字符
str-index($string,$substring):返回指定字符在字符串中的位置
to-upper-case($string):转换成大写
to-lower-case($string):转换成小写
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。

自定义函数
$rem1:100px;
@function px2rem($px){
   $rem:37.5px;
  @return ($px/$rem) +rem
}

.div{ 
  width:px2rem($rem1)
}


标签: css
分享给朋友:

相关文章

计算机编码规范之ASCII码

计算机编码规范之ASCII码

Bin(二进制)Oct(八进制)Dec(十进制)Hex(十六进制)缩写/字符解释0000 00000000x00NUL(null)空字符0000 00010110x01SOH(start of hea...

 前端入门html、css、js知识汇总(2)

前端入门html、css、js知识汇总(2)

68.ECMAScript{   简单数据类型:undefined,null,boolean,number,string   复杂数据类型:object...

HTTP之安全威胁解析

HTTP之安全威胁解析

1、web安全攻击web应用的概念web应用是由动态脚本、编译过的代码等组合而成它通常架设在web服务器上,用户在web浏览器上发送请求这些请求使用http协议,由web应用和企业后台的数据库及其他动...

Vue2.x基础知识

Vue2.x基础知识

1.vue绑定值与字符串拼接四种方法 A  :title="`字符串${变量}`"    B  :titl...

json以及jsonp的跨域

json以及jsonp的跨域

 什么是JSON?JSON(javascript object notation)全称是javascript对象表示法,它是一 种数据交换的文本格式,而不是一种编程语言,用于读取结构化数据,...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

分享:

支付宝

微信