1. 犀牛前端部落首页
  2. Sass教程

Sass 函数方法

Sass函数

Sass函数可能是该语言最有用的方面。 我们将在本章和接下来的几章中介绍它们中的大部分内容。

除了Sass本身提供的功能外,您还可以在Ruby中编写自己的函数。 但由于这是一门Sass课程,而不是Ruby课程,我们不会在这里讨论。 想要了解更多可以查阅Sass官方文档

您可以使用标准CSS函数语法来调用Sass函数:

p {
   color: rgb(42, 154, 179);
}

上面的代码将会转化为:

p {
   color: #2a9ab3;
}

Sass还允许您通过名称指定函数的参数。 大多数编程语言将这些称为“命名参数”,但Sass文档将这些称为“显式关键字参数”。 无论你怎么称呼它们,都可以按任何顺序指定:

p {
   color: rgb($red: 42, $blue: 154, $green: 179);
}

请注意,参数名称以美元符号为前缀,与用于标识变量的语法相同。 幸运的是,Sass转换器非常智能,可以让它们显示正确:

#argument {
   color: rgb($red: 42, $green: 179, $blue: 154);
}

#variable {
   $red: 42;
   color: rgb($red: $red, $green: 179, $blue: 154);
}

上面的代码将会输出以下代码:

#argument {
   color: #2ab39a;
}

#variable {
   color: #2ab39a;
}

命名你的参数虽然需要多写一点代码,但它确实使你的意图清晰,并且它消除了记忆(或查找)参数顺序的需要。

所有函数定义总是使用本Sass教程中的参数名称,例如给出声明str-insert($ string,$ insert,$ index)。

命名参数(可以按任何顺序指定)是$ string,$ insert和$ index:str-insert($ insert:“hello,”,$ string:“world”,$ index:1)将返回“hello” ,世界“。

Sass包括字符串,数字,列表,地图,选择器和内省的各种功能。 我们将在接下来的几章中看到所有这些功能。

其他功能

Sass提供了三个不属于上面提到的任何类型的功能。例如:

Sass其他功能
函数 描述 例子
call($name,$args..) 调用Sass或CSS函数,将任何剩余的参数传递给函数' call(floor, 3, 5, 7, 1) Result: 1
if($condition,$if-true,$if-false) 如果$condition返回$if-true否则返回$if-false if(1==1, 10px, 20px) Result: 10px
unique-id() 返回随机唯一CSS标识符 unique-id() Result: "utewylqbn"

在接下来的几章中我们将一起学习字符串,数字,列表,映射,选择器和内省函数,加油吧(ง •_•)ง。

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/2493.html

发表评论

登录后才能评论