JAVASCRIPT
VUE
REACT
NODE
ES6
TYPESCRIPT

Sass基础

2019. 01. 15    

Sass基础

数字函数简介

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

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

.footer{width : round(5.2px)}
.footer{width: 5px;}

.footer{width : round(5.7px)}
.footer{width: 6px;}

.footer{width:ceil(12.8px);}
.footer{width: 13px;}

.footer{width:ceil(12.2px);}
.footer{width: 13px;}

.footer{width:floor(12.8px);}
.footer{width: 12px;}

.footer{width:floor(12.1px);}
.footer{width: 12px;}

.footer{width:abs(12px);}
.footer{width:12px;}

.footer{width:abs(-12px);}
.footer{width:12px;}

.footer{width:min(12px);}
.footer{width:min(12px);}

.footer{width:abs(-12px);}
.footer{width:abs(12px);}

列表函数简介

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

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

###

  • Miscellaneous 函数称为三元条件函数
.footer{width:if(true,1px,2px);}
.footer {width: 1px;}

.footer{width:if(false,1px,2px);}
.footer {width: 2px;}
# Sass