sass学习--sass的函数功能（进阶篇）

1.字符串功能：

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

unquote($string):

//sass:unquote($string)
.test2 {
    content: unquote("‘Hello Sass!");
}
.test3 {
    content: unquote("I‘m Web Designer");
}
.test4 {
    content: unquote("‘Hello Sass!‘");
}
.test5 {
    content: unquote(‘"Hello Sass!"‘);
}
//css
.test2 {
  content: ‘Hello Sass!; }

.test3 {
  content: I‘m Web Designer; }

.test4 {
  content: ‘Hello Sass!‘; }

.test5 {
  content: "Hello Sass!"; }

注意： unquote( ) 函数只能删除字符串最前和最后的引号（双引号或单引号），而无法删除字符串中间的引号。如果字符没有带引号，返回的将是字符串本身。

quote($string):


//SCSS
.test1 {
    content:  quote(‘Hello Sass!‘);
}
.test2 {
    content: quote("Hello Sass!");
}

//CSS
.test1 {
  content: "Hello Sass!";
}
.test2 {
  content: "Hello Sass!";
}

quote() 函数用来给字符串添加引号。如果字符串，自身带有引号会统一换成双引号 “”。

使用 quote() 函数只能给字符串增加双引号，而且字符串中间有单引号或者空格时，需要用单引号或双引号括起，否则编译的时候将会报错:

.test1 {
    content:  quote(Hello Sass);//字符串中间有空格，编译报错
}

//解决方案
.test1 {
    content:  quote(HelloSass);//去空格
}
.test1 {
    content:  quote("Hello Sass");//加引号
}

注意：quote() 碰到特殊符号，比如： !、?、> 等，除中折号 - 和 下划线_ 都需要使用双引号括起，否则编译时也会报错！

To-upper-case($sting)：

//SCSS
.test {
  text: to-upper-case(aaaaa);
  text: to-upper-case(aA-aAAA-aaa);
}

To-lower-case($string):

//SCSS
.test {
  text: to-lower-case(AAAAA);
  text: to-lower-case(aA-aAAA-aaa);
}

2.数字函数

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

percentage($value):

>> percentage(.2)
20%
>> percentage(2px / 10px)
20%
>> percentage(2em / 10em)
20%

round($number):

>> round(12.3)
12
>> round(12.5)
13
>> round(20%)
20%
>> round(2.2%)
2%
>> round(2px / 3px)
1
>> round(1px / 3px)
0

ceil($number):向上取整

>> ceil(2.0)
2
>> ceil(2.1)
3
>> ceil(2.6)
3
>> ceil(2.3%)
3%
>> ceil(2.3px)
3px
>> ceil(2.5px)
3px
>> ceil(2px / 3px)
1

floor($number)：向下取整

>> floor(2.1)
2
>> floor(2.5)
2
>> floor(3.5%)
3%
>> floor(10.2px)
10px
>> floor(10.8em)
10em
>> floor(2px / 10px)
0

abs($number):取绝对值

>> abs(10)
10
>> abs(-10)
10
>> abs(-10px)
10px
>> abs(-2em)
2em
>> abs(-.5%)
0.5%
>> abs(-1px / 2px)
0.5

min($List):取多个数值中最小的

>> min(1,2,1%,3,300%)
1%
>> min(1px,2,3px)
1px
>> min(1em,2em,6em)
1em

max($list):取最大

>> max(1,5)
5
>> max(1px,5px)
5px

random([$limit])：取随机数

>> random()
0.03886
>> random(200)
174

3.列表函数

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

length($list): 函数中的列表参数之间使用空格隔开，不能使用逗号，否则函数将会出错：

>> length(10px)
1
>> length(10px 20px (border 1px solid) 2em)
4
>> length(border 1px solid)
3

nth($list,$n):返回一个列表中指定的某个标签值


>> nth(10px 20px 30px,1)
10px
>> nth((Helvetica,Arial,sans-serif),2)
"Arial"
>> nth((1px solid red) border-top green,1)
(1px "solid" #ff0000)

join($list1, $list2, [$separator]) :只能将两个列表连接成一个列表，如果直接连接两个以上的列表将会报错。

>> join(10px 20px, 30px 40px)
(10px 20px 30px 40px)

>> join((blue,red),(#abc,#def))
(#0000ff, #ff0000, #aabbcc, #ddeeff)

//多个列表连接，需要将多个join()函数合并在一起使用：
>> join((blue red), join((#abc #def),(#dee #eff)))
(#0000ff #ff0000 #aabbcc #ddeeff #ddeeee #eeffff)

除此之外，还有很特别的参数$separator，用来指定列表连接之间的分隔符的，默认为auto，还有comma（逗号）和space（空格）！

$separator重要性：请明确指定$separator的值，否则将会有多种情形发生!为避免血案发生，还是明确指定$separator的值吧！

append($list[,$separtator]):

>> append((blue green),red,comma)
(#0000ff, #008000, #ff0000)
>> append((blue green),red,space)
(#0000ff #008000 #ff0000)
>> append((blue, green),red,comma)
(#0000ff, #008000, #ff0000)
>> append((blue, green),red,space)
(#0000ff #008000 #ff0000)
>> append(blue,red,comma)
(#0000ff, #ff0000)
>> append(blue,red,space)
(#0000ff #ff0000)

zip($list…): 每个单一的列表个数必须是相同的

zip(1px 2px 3px,solid dashed dotted,green blue red)

index($index,$value)：返回一个值在列表中的位置值

>> index(1px solid red, 1px)
1
>> index(1px solid red, solid)
2
>> index(1px solid red, red)
3

4.Introspection函数: 主要用来对值做一个判断

  • type-of($value)：返回一个值的类型;
  • unit($number)：返回一个值的单位;
  • unitless($number)：判断一个值是否带有单位;
  • comparable($number-1, $number-2)：判断两个值是否可以做加、减和合并.

type-of($value)：返回一个值的类型

总共有number、string、bool、color四种类型!

unit()函数：返回一个值的单位

unit() 函数主要是用来获取一个值所使用的单位，碰到复杂的计算时，其能根据运算得到一个“多单位组合”的值，不过只充许乘、除运算：

>> unit(100)
""
>> unit(100px)
"px"
>> unit(20%)
"%"
>> unit(1em)
"em"
>> unit(10px * 3em)
"em*px"
>> unit(10px / 3em)//但这种无法合并的单位在css中是没有意义的
"px/em"
>> unit(10px * 2em / 3cm / 1rem)
"em/rem"

注意：但加、减碰到不同单位时，unit() 函数将会报错，除 px 与 cm、mm 运算之外，jianren就是矫情！

>> unit(1px + 1cm)
"px"
>> unit(1px - 1cm)
"px"
>> unit(1px + 1mm)
"px"
>> unit(10px * 2em - 3cm / 1rem)
SyntaxError: Incompatible units: ‘cm‘ and ‘px*em‘.
>> unit(10px * 2em - 1px / 1rem)
SyntaxError: Incompatible units: ‘‘ and ‘em‘.
>> unit(1px - 1em)
SyntaxError: Incompatible units: ‘em‘ and ‘px‘.
>> unit(1px - 1rem)
SyntaxError: Incompatible units: ‘rem‘ and ‘px‘.
>> unit(1px - 1%)
SyntaxError: Incompatible units: ‘%‘ and ‘px‘.
>> unit(1cm + 1em)
SyntaxError: Incompatible units: ‘em‘ and ‘cm‘.

unitless($number)函数：只是用来判断一个值是否带有单位，如果不带单位返回的值为 true，带单位返回的值为 false。

>> unitless(100)
true
>> unitless(100px)
False

用例：用户在调用混合宏时，如果用户没有给参数值加上单位，程序会自动加入单位

//用例：用户在调用混合宏时，如果用户没有给参数值加上单位，程序会自动加入单位
@mixin adjust-location($x, $y) {
  @if unitless($x) {
    $x: 1px * $x;
  }
  @if unitless($y) {
    $y: 1px * $y;
  }
  position: relative;
  left: $x;
  top: $y;
}

.botton{
    @include adjust-location(20px, 30);
}

comparable($number-1,$number-2): 主要是用来判断两个数是否可以进行“加，减”以及“合并”。如果可以返回的值为 true，如果不可以返回的值是 false：

>>comparable(2px,1px)
true
>> comparable(2px,1%)
False

5.Miscellaneous函数：

Miscellaneous 函数称为三元条件函数，他有两个值，当条件成立返回一种值，当条件不成立时返回另一种值：

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

>> if(true,1px,2px)
1px
>> if(false,1px,2px)
2px

6.Maps的函数

6-1Maps的用途：管理变量

Sass 的 map 常常被称为数据地图，也有人称其为数组，以 key:value 成对的出现，更像是一个 JSON 数据。

$map: (

$key1: value1,

$key2: value2,

$key3: value3

)

注意：用个 $ 加上命名空间来声明 map。后面紧接是一个小括号 ()，将数据以 key:value 的形式赋予，其中 key 和 value 是成对出现，并且每对之间使用逗号 (,) 分隔，其中最后一组后面没有逗号。

//以前常用方法定义变量：
$default-color: #fff !default;
$primary-color: #22ae39 !default;

//现在可以更好的管理变量：（可以随意添加变量）
$color: (
    default: #fff,
    primary: #22ae39
);

还可让 map 嵌套 map。其实就是 map 的某一个 key 当成 map，里面可以继续放一对或者多对 key:value：

$map: (
    key1: value1,
    key2: (
        key-1: value-1,
        key-2: value-2,
    ),
    key3: value3
);

使用场景：在换皮肤的项目，可能每一套皮肤对应的颜色蛮多的，那么使用此功能来管理颜色的变量就非常的有条理性，便于维护与管理。

$theme-color: (
    default: (
        bgcolor: #fff,
        text-color: #444,
        link-color: #39f
    ),
    primary:(
        bgcolor: #000,
        text-color:#fff,
        link-color: #93f
    ),
    negative: (
        bgcolor: #f36,
        text-color: #fefefe,
        link-color: #d4e
    )
);

6-2Maps的七大函数：

  • 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。

6-2-1.map-get($map,$key): 依给定的 key 值，返回 map 中相关的value 值。如果 $key 不存在 $map中，将返回 null 值。

$social-colors: (
    dribble: #ea4c89,
    facebook: #3b5998,
    github: #171515,
    google: #db4437,
    twitter: #55acee
);
.btn-dribble{
  color: map-get($social-colors,facebook);
}

如果 $key 不在 $map 中，不会编译出 CSS，在 Sass 中，map-get($social- colors,weibo) 返回了一个 null 值。

没有编译出样式，也没有任何错误或者警告信息，体验不强，也不好排错。其实如果我们自定义一个函数，另外加个判断，那就截然不同，看下面函数！

6-2-2.map-has-key($map,$key): 根据给定的 key 值判断 map 是否有对应的 value 值，如果有返回 true，否则返回 false。

当 $map 中有这个 $key，则函数返回 true，否则返回 false。可使用 map-has-key($map,$key) 函数就可以改变map-get($map,$key)不编译也不报错的状态。

@if map-has-key($social-colors,facebook){
    .btn-facebook {
        color: map-get($social-colors,facebook);
    }
} @else {
    @warn "No color found for faceboo in $social-colors map. Property ommitted."
}
//但为提高效率，不每次都编写相同的代码，可定义函数实现：
@function colors($color){
    @if not map-has-key($social-colors,$color){
        @warn "No color found for `#{$color}` in $social-colors map. Property omitted.";
    }
    @return map-get($social-colors,$color);
}
.btn-dribble {
    color: colors(dribble);
}
.btn-facebook {
    color: colors(facebook);
}
//对于上面的实现，也可加行@each来实现：
@each $social-network,$social-color in $social-colors {
    .btn-#{$social-network} {
        color: colors($social-network);
    }
}

6-2-3.map-keys($map):返回$map中的所有key,结果为一个列表。

@function colors($color){
    $names: map-keys($social-colors);
    @if not index($names,$color){
        @warn "Waring: `#{$color} is not a valid color name.`";
    }
    @return map-get($social-colors,$color);
}
.btn-weibo{
    color: colors(weibo);
}
//也可以使用@each或@for遍历所有值

@each $name in map-keys($social-colors){
    .btn-#{$name}{
        color: colors($name);
    }
}
@for $i from 1 through length(map-keys($social-colors)){
    .btn-#{nth(map-keys($social-colors),$i)} {
        color: colors(nth(map-keys($social-colors),$i));
    }
}

6-2-4.map-values($map):返回所有的value值，也是一个列表

6-2-5.map-merge($map1,$map2):将两个map合并，得到新的map。

$color: (
    text: #f36,
    link: #f63,
    border: #ddd,
    backround: #fff
);
$typo:(
    font-size: 12px,
    line-height: 1.6
);

$newmap: map-merge($color,$typo);

注意：若$map1和$map2中有相同的$key,$map2中的$key将会取代$map1中的。

6-2-6map-remove(map,key):

用来删除当前 $map 中的某一个 $key，从而得到一个新的 map。其返回的值还是一个 map。若$map中不存在要删除的$key，则返回的新map和之前的map一样。

$map:map-remove($social-colors,dribble);

6-2-7 keywords($args…)

动态创建map 的函数。可通过混合宏或函数的参数创建map。参数需成堆出现。

@mixin map($args...){
    @debug keywords($args);
}

@include map(
  $dribble: #ea4c89,
  $facebook: #3b5998,
  $github: #171515,
  $google: #db4437,
  $twitter: #55acee
);

7.颜色函数：

三大方向：RGB、HSL、Opacity三大函数！和其他的颜色函数！

rgb($red,$green,$blue)：
rgba($red,$green,$blue,$alpha)：
red($color)：
green($color)：
blue($color)：
mix($color-1,$color-2,[$weight])：
    hsl($hue,$saturation,$lightness)
    hsla($hue,$saturation,$lightness,$alpha)
    hue($color)
    saturation($color)
    lightness($color)
    adjust-hue($color,$degrees)
    lighten($color,$amount)
    darken($color,$amount)
    saturate($color,$amount)
    desaturate($color,$amount)
    grayscale($color)
    complement($color)
    invert($color)
      alpha($color) /opacity($color)
      rgba($color, $alpha)
      opacify($color, $amount) / fade-in($color, $amount)
      transparentize($color, $amount) / fade-out($color, $amount)

实战：(-?-;)我只知道可以用它制作七色卡之类的东西，望赐教！


总结：罗列了sass繁杂的函数功能:字符串、数字函数、列表函数、Introspection函数（判断值）、Miscelloneous(三元条件函数)、Maps函数、颜色函数等七个大块！可谓是左宜右有啊！(形容多才多艺,什么都能做)(●’?’●)人丑就该多读书！

时间： 2024-03-07 18:54:17

sass学习--sass的函数功能（进阶篇）的相关文章

python学习第十六天 --继承进阶篇

这一章节主要讲解面向对象高级编程->继承进阶篇,包括类多继承介绍和继承经典类和新式类属性的查找顺序不同之处. 多继承 上一章节我们讲到继承,子类继承父类,可以拥有父类的属性和方法,也可以进行扩展.但是有时候会发现,子类需要继承一个类的方法,又要继承另一个类的方法,才能完成要实现的功能.怎么办?python给我们提供了多继承的概念.类似于C++语言,俗称类的多继承. 看个例子: >>> class Animal(object): def __init__(self,name): se

[Python]学习基础篇：函数的进阶篇

对于函数大家都熟知不过了,但是对于一些函数还是费力的理解,下来我们来看看Python自带的一些函数,在此之前,还是请大家了解什么是高阶函数. 高阶函数:函数中的高阶函数 map()函数 格式:map(func,seq) 返回值:list map函数的作用是将参数函数func作用于seq中的每一个元素,每个元素产生的结果存放进list中. 例如:我们以函数func=x+x*x为例,作用于序列[1,2,3,4,5,6,7,8]上 !/bin/python def func(x):     retur

python学习之路-5 基础进阶篇

本篇涉及内容 双层装饰器字符串格式化 双层装饰器 装饰器基础请点我 有时候一个功能需要有2次认证的时候就需要用到双层装饰器了,下面我们来通过一个案例详细介绍一下双层装饰器: 执行顺序:自上而下 解释顺序:自下而上 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51

[Sass学习]Sass的安装和使用

安装 需要安装Ruby, Sass Ruby的安装分两个平台 1. Window平台安装方法: 第一步,去官网 http://rubyinstaller.org/downloads 下载ruby 第二步,安装,选择默认安装即可,安装选项选第二项. 第三步,安装完成后,打开ruby command,调整sources gem sources -l  查看当前镜像地址 gem sources --remove [url] gem sources -a http://gems.ruby-china.o

python 学习笔记十一 SQLALchemy ORM(进阶篇)

SqlAlchemy ORM SQLAlchemy是Python编程语言下的一款ORM框架,该框架建立在数据库API之上,使用关系对象映射进行数据库操作,简言之便是:将对象转换成SQL,然后使用数据API执行SQL并获取执行结果. Dialect用于和数据API进行交流,根据配置文件的不同调用不同的数据库API,从而实现对数据库的操作,如: MySQL-Python mysql+mysqldb://<user>:<password>@<host>[:<port&g

Sass学习笔记之入门篇

Sass又名SCSS,是CSS预处理器之一,,它能用来清晰地.结构化地描述文件样式,有着比普通 CSS 更加强大的功能. Sass 能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样式表.以下是我的学习笔记. Sass安装环境 1.安装sass(mac) ①:Ruby安装 ②:安装sass sudo gem install sass 可以通过 sass -v检测是否完成安装   2.更新sass gem update sass 3.卸载(删除)sass gem uninstal

Vue学习笔记进阶篇——Render函数

本文为转载,原文:Vue学习笔记进阶篇--Render函数 基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接近编译器. <h1> <a name="hello-world" href="#hello-world"> Hello world! </a> </h1>

2-4 Sass的函数功能-颜色函数

RGB颜色函数-RGB()颜色函数 在 Sass 的官方文档中,列出了 Sass 的颜色函数清单,从大的方面主要分为 RGB , HSL 和 Opacity 三大函数,当然其还包括一些其他的颜色函数,比如说 adjust-color 和 change-color 等.在这章节中,将主要和大家一起探讨 Sass 颜色函数中常见的 RGB.HSL 和 Opacity 函数. 1.RGB颜色函数 RGB 颜色只是颜色中的一种表达式,其中 R 是 red 表示红色,G 是 green 表示绿色而 B 是

学习Sass笔记之概念篇

1 什么是CSS预处理器 首先我们了解一下什么是CSS预处理器:通俗的说,“CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用.CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题”,例如你可以在 CSS 中使用变量.简单的逻辑程序.函数(如右侧代码编辑器中就使用了变量$color)等等在编程语言中的一些基本特性,可以让你的 CSS 更加简洁.适应性更强.可读性更佳,更易于代码的维护等诸多好处. 2 什么是Sas