SASS - 函数




本文介绍Sass函数。Sass包含大量函数,本文介绍最重要最常用的函数,其他可以参考官方文档。

颜色函数

sass包含很多操作颜色的函数。例如:lighten()darken()函数可用于调亮或调暗颜色,opacify()函数使颜色透明度减少,transparent()函数使颜色透明度增加,mix()函数可用来混合两种颜色。

下面是mix()函数例子:

div {
    padding: 20px;
    margin: 20px;
}
.one {
    background: red;
    }
.two {
    background: yellow;
}
.three {
    background: mix(red, yellow);
    }
.four {
    background: mix(red, yellow, 35%);
}
.five {
    background: mix(red, yellow, 65%);
}

经过编译输出以下CSS代码:

div {
  padding: 20px;
  margin: 20px; }

.one {
  background: red; }

.two {
  background: yellow; }

.three {
  background: #ff8000; }

.four {
  background: #ffa600; }

.five {
  background: #ff5900; }

语法是mix($color1, $color2, [$weight]),可选的$weight参数设置$color1的权重,如果省略,则权重为50%。

字符串函数

Sass有许多处理字符串的函数,比如向字符串添加引号的quote()、获取字符串长度的string-length()和将内容插入字符串给定位置的string-insert()

数值函数

数值函数处理数值计算,例如:percentage()将无单元的数值转换为百分比,round()将数字四舍五入为最接近的整数,min()max()获取几个数字中的最小值或最大值,random()返回一个随机数。

List 函数

List函数操作List,length()返回列表长度,nth()返回列表中的特定项,join()将两个列表连接在一起,append()在列表末尾添加一个值。

Map 函数

Map函数操作Map,map-get()根据键值获取map中的对应值,map-merge()来将两个map合并成一个新的map,map-values()映射中的所有值。

选择符函数

选择符相关函数,例如:selector-append()可以把一个选择符附加到另一个选择符。

自检函数

自检相关函数,例如:feature-exists()检查当前Sass版本是否存在某个特性,variable-exists()检查当前作用域中是否存在某个变量,mixin-exists()检查某个mixin是否存在。

Sass函数的完整列表

还有许多其他函数,详情请参阅Sass文档

原文地址:https://www.cnblogs.com/haibianren/p/11595912.html

时间: 2024-10-29 14:28:50

SASS - 函数的相关文章

h5移动端flexible源码适配终端解读以及常用sass函数

;(function(win, lib) { var doc = win.document;// win = window,lib = window.lib; var docEl = doc.documentElement; var metaEl = doc.querySelector('meta[name="viewport"]'); var flexibleEl = doc.querySelector('meta[name="flexible"]');//这样的

Sass函数--列表函数

列表函数简介 列表函数主要包括一些对列表参数的函数使用,主要包括以下几种: length($list):返回一个列表的长度值: nth($list, $n):返回一个列表中指定的某个标签值  join($list1, $list2, [$separator]):将两个列给连接在一起,变成一个列表: append($list1, $val, [$separator]):将某个值放在列表的最后: zip($lists…):将几个列表结合成一个多维的列表: index($list, $value):返

Sass函数--颜色函数--Opacity函数

Opacity函数简介 在 CSS 中除了可以使用 rgba.hsla 和 transform 来控制颜色透明度之外,还可以使用 opacity 来控制,只不过前两者只是针对颜色上的透明通道做处理,而后者是控制整个元素的透明度. 在 Sass 中,也提供了系列透明函数,只不过这系列的透明函数主要用来处理颜色透明度:  alpha($color) /opacity($color):获取颜色透明度值: rgba($color, $alpha):改变颜色的透明度值: opacify($color, $

Sass函数--map

MapSass 的 map 常常被称为数据地图,也有人称其为数组,是以 key:value 成对的出现. 1 $map: ( 2 $key1: value1, 3 $key2: value2, 4 $key3: value3 5 ) 首先有一个类似于 Sass 的变量一样,用个 $ 加上命名空间来声明 map.后面紧接是一个小括号 (),将数据以 key:value 的形式赋予,其中 key 和 value 是成对出现,并且每对之间使用逗号 (,) 分隔,其中最后一组后面没有逗号.其中键 key

Sass函数-值列表index

ndex() 函数类似于索引一样,主要让你找到某个值在列表中所处的位置.在 Sass 中,第一个值就是1,第二个值就是 2,依此类推: >> index(1px solid red, 1px) 1 >> index(1px solid red, solid) 2 >> index(1px solid red, red) 3 在 index() 函数中,如果指定的值不在列表中(没有找到相应的值),那么返回的值将是 false,相反就会返回对应的值在列表中所处的位置. &g

Sass函数:Sass Maps的函数-map-has-key($map,$key)

map-has-key($map,$key) 函数将返回一个布尔值.当 $map 中有这个 $key,则函数返回 true,否则返回 false. 前面的示例,当 $key 不在 $map 中时,使用 map-get($map,$key) 函数将返回一个 null 值.但对于开发人员,并看不到任何提示信息.如果使用 map-has-key($map,$key) 函数就可以改变这一状态.我们来看一个简单的示例. @if map-has-key($social-colors,facebook){ .

Sass函数--颜色函数--HSL函数

HSL函数简介HSL颜色函数包括哪些具体的函数,所起的作用是什么: hsl($hue,$saturation,$lightness):通过色相(hue).饱和度(saturation)和亮度(lightness)的值创建一个颜色: hsla($hue,$saturation,$lightness,$alpha):通过色相(hue).饱和度(saturation).亮度(lightness)和透明(alpha)的值创建一个颜色: hue($color):从一个颜色中获取色相(hue)值: satu

Sass函数:数字函数-percentage()

1.percentage() percentage()函数主要是将一个不带单位的数字转换成百分比形式: >> percentage(.2) 20% >> percentage(2px / 10px) 20% >> percentage(2em / 10em) 20% >> .footer{ width : percentage(.2) } 编译后的 css 代码: .footer{ width : 20% } 如果您转换的值是一个带有单位的值,那么在编译的时

Sass函数:Introspection 函数 -type-of()

type-of() 函数主要用来判断一个值是属于什么类型: 返回值: number 为数值型. string 为字符串型. bool 为布尔型. color 为颜色型. >> type-of(100) "number" >> type-of(100px) "number" >> type-of("asdf") "string" >> type-of(asdf) "str