技术标签： scc 预处理器 css、sass 函数 前端工程 sass
相关文章推荐：
2. Sass函数 与 Sass混入（mixin）有什么不同？
函数允许您对SassScript值定义复杂的操作，您可以在整个样式表中重用这些操作。它们使得以可读的方式抽象出通用的公式和行为变得容易。
Sass函数（function） 与 Sass混入（mixin）是一回事吗？虽然两者及其类似，但是当然不是一回事！
从使用形式上看，Sass函数是使用@function定义的，而Sass混入（mixin）是使用@mixin定义并使用@include包含的。
从目的上看，混入的目的是复用某一个Sass样式块。因此对于使用一个一经定义好的混入，我们不认为这是调用，而称之为包含。引入函数更多的是为了让一些复杂的计算和操作过程能够模块化，从而达到复用的目的。
函数是使用@function 指令 定义的。其格式为：
@function <name>(<arguments...>) {
... }.
与JavaScript中的函数一样，Sass函数也拥有返回值，返回值用@retrurn指令来指示，@return指令只允许出现在@function正文中。每个都@function 必须以 @return，这是和 JavaScript 中的函数不一样的。
例如：
@use "sass:string";
@function str-insert($string, $insert, $index) {
// 如果不需要的话，避免制造新的字符串。
@if string.length($string) == 0 {
@return $insert;
}
$before: string.slice($string, 0, $index);
$after: string.slice($string, $index);
@return $before + $insert + $after;
}
注：@use指令用于从其他 Sass 样式表中加载mixins、函数和变量，并将来自多个样式表的 CSS 组合在一起。加载的样式表@use称为“模块”。Sass 还提供了很多有用的内置模块，这里的sass:string就是内置模块，这部分可以参考博文Sass 内置函数总结。
又如：
// bootstrap5
@function add($value1, $value2, $return-calc: true) {
// 如果第一个值为 null，则加的结果为第二个值
@if $value1 == null {
@return $value2;
}
// 如果第二个值为 null，则加的结果为第一个值
@if $value2 == null {
@return $value1;
}
// 如果两个值都是数字，并且是可进行比较的（同一单位类型），则返回相加结果
@if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
@return $value1 + $value2;
}
@return if($return-calc == true, calc(#{
$value1} + #{
$value2}), $value1 + unquote(" + ") + $value2);
}
再如：
// 返回不透明颜色
// opaque(#fff, rgba(0, 0, 0, .5)) => #808080
@function opaque($background, $foreground) {
@return mix(rgba($foreground, 1), $background, opacity($foreground) * 100);
}
这段代码中，mix(color1, color2, weight)是Sass内置的函数，用于把两种颜色混合起来，前两个参数都是颜色，最后一个是第二个颜色的比重。
与所有 Sass 标识符一样，函数名称将连字符和下划线视为相同。这意味着 add-many 与 add_many 都指的是相同的功能。这是 Sass 早期的历史遗留问题，当时它只允许在标识符名称中使用下划线。一旦 Sass 添加了对连字符的支持以匹配CSS的语法，这两者就等同于使迁移更容易。
参数允许在每次调用函数时自定义函数的行为。参数在@function函数名称之后的规则中指定为用括号括起来的变量名称列表。该函数必须以SassScript 表达式的形式使用相同数量的参数调用。这些表达式的值在函数体中作为相应的变量可用。默认值可以是任何 SassScript 表达式，它们甚至可以引用更早的参数！
虽然函数声明的每个参数都必须在包含该函数时传递，但是仍然可以通过定义一个默认值来使参数成为可选参数，这和Sass混入（Mixin）中的可选参数是类似的。如果该参数未传递，则将使用该默认值。默认值使用与变量声明相同的语法：变量名，后跟一个冒号和一个SassScript 表达式。这使得定义灵活的函数 API 变得容易，这些 API 可以以简单或复杂的方式使用。
@function invert($color, $amount: 100%) {
$inverse: change-color($color, $hue: hue($color) + 180);
@return mix($inverse, $color, $amount);
}
$primary-color: #036;
.header {
background-color: invert($primary-color, 80%);
}
调用函数时，除了按参数列表中的位置传递参数（位置参数）外，还可以按名称传递参数。这对于具有多个可选参数的函数或带有布尔参数的函数特别有用，这些参数的含义在没有名称的情况下并不明显。关键字参数使用与变量声明和可选参数相同的语法。
例如：
$my-color: #007fd3;
.box {
color: scale-color($my-color, $lightness: +40%); // 注：scale-color是Sass内置函数
}
Sass函数和Sass混入一样，也可以使用任意参数，就像JavaScript中的函数接受一个参数列表一样。函数能够接受任意数量的参数很有用。如果@function声明中的最后一个参数以 结尾…，则该函数的所有额外参数都作为列表传递给该参数。此参数称为参数列表。
例如：
@function add_many($numbers...) {
$sum: 0;
@each $number in $numbers {
$sum: $sum + $number;
}
@return $sum;
}
.my-box {
width: add_many(10px, 20px, 30px, 40px, 50px, 60px); // width: 210px;
}
编译成CSS后：
.my-box {
width: 210px; }
/*# sourceMappingURL=test.css.map */
文章浏览阅读631次。在我们使用CreateWindow();像一般控件建Windows扩展控件的时候我们会发现控件没有创建成功这是因为我们没有对Windows扩展控件库进行初始化,这要我们使用InitCommonControlsEx();函数来对Windows扩展控件库进行初始化，代码如下：INITCOMMONCONTROLSEX InitCtrls; InitCtrls.dwSize =_tooltip控件createwindows失败,其它控件成功
文章浏览阅读2.4k次。一、首先设置ftp服务器：我的电脑右键——管理——internet信息服务——网站 如图：网站右键——添加Ftp站点——填写信息 如图：下一步 如图：下一步 如图：完成——在网站列表中选中刚建立的ftp站点——右侧选择基本设置——测试连接会出现如图错误：回到基本设置——连接为 如图：确定——回到基本设置——测试连接 如图：..._internetconnect
文章浏览阅读10w+次，点赞96次，收藏531次。用java的Swing组件写的简易计算器_java编写计算器代码
文章浏览阅读1.4w次。下面是EntLib.com Team 针对本地数据库subtext --- 修改Collation 的操作过程。默认情况下，Subtext 数据库的collation 并不是 Chinese_PRC_CI_AS ，下面通过SCRIPT 脚本修改其collation：ALTER DATABASE SubtextData COLLATE Chinese_PRC_CI_AS 但是，你会遇到如下错误信息：Msg 5075_alter database failed. the default collation of database 'ko_log' cannot be
文章浏览阅读1.1w次，点赞2次，收藏3次。请检查 keystone服务的配置文件的token以及/etc/glance/glance-api.conf下的[keystone_authtoken]的一些配置文件___init__() got an unexpected keyword argument 'token
文章浏览阅读1.6k次。文章首发于公号「阿拉平平」想要在安卓上体验 Java 应用的小伙伴，可以到后台回复 j2me 获取资源。大学期间，我拥有了人生中的第一部手机：诺基亚 5310XM。除了通话之用，它还是我课上摸鱼，晚上修仙的利器。时光荏苒，手机早已换成了智能机，只依稀记得每次应用启动的 Java 图标了。于是心血来潮在手机上装了个 Java 模拟器，让我们重温下当年的 Java 应用吧。项目介绍J2ME-Loader [1] 是一个开源的用于 Android 的 J2ME 模拟器。它支持大多数 2D 游戏以及部._j2me loader1.80
文章浏览阅读4.2k次。Shape画好后并不能一次成形想要小修小改怎么办？解决方案：方案一：单击 Shape select 图标想要修改的Shape边界拐点出现小方框可以拖动小方框到想要的位置也可以把鼠标放在边界线上出现双向箭头后可以整体拖动方案二：单击 Shape Edit Boundary 图标单击想要修改的边界线按照想要修改的外形重新画边界欢迎关注公众号学习更多硬件知识..._shape edit boundary
文章浏览阅读1.9w次，点赞7次，收藏17次。现在的网络监控摄像头一般都是支持输出网络流 RTSP 协议，当然现在有一些也直接支持输出 RTMP 协议流，目的是更好的适配主流流媒体服务器系统的接收如 adobe 的 FMS，Wowza 或 800Li Media Server。从节省成本来说输出 RTSP 协议的摄像头都在 100-500 元之间，性价比高，受众群更多。很多人买了监控摄像头会希望嵌入自己的网站，现在很多销售 IPCam 的厂家也提供直播云服务了，不过他们考虑带宽成本，会有很多限制码率，流量等。 所以现在很多人都在找能够嵌入自己网站或手机_channel=ttlhd001
文章浏览阅读10w+次，点赞491次，收藏3.3k次。Java学习路线目录索引一、Java基础(省略)Lambda表达式及函数式接口二、Java数据库MySQL 一 概念、DDL、DML、DQL、事务、约束等数据库设计 一 多表关系、三大范式JDBC 一 基本使用、DAO组件、连接池、JDBCTemplate三、JavaWebHTML相关学习CSS — 常用属性CSS — 选择器及三大特性CSS — 网页的布局方式C..........................._孙帅 springboot
文章浏览阅读2.9w次，点赞47次，收藏164次。背景对于序列问题(Sequence Modeling)的处理方法，通常采用RNN或者LSTM，例如处理一段视频/音频，往往会沿着时间方向（时序）进行操作。通常CNN网络都被认为适合处理图像数据而不适合处理sequence modeling问题；而今年来，由于RNN及LSTM这类模型的瓶颈，越来越多的人开始发现其实CNN对于这种序列问题的处理是被大大低估了，CNN建立的model要比之前人们之前用..._因果卷积
文章浏览阅读396次。Python连接presto开源提供了以下两个库可以使用接下来就来分别实践一下，这两种客户端。环境准备1.创建一台Ubuntu的ECS，VPC选择和MRS集群一致2.下载安装apt-get，pip3，python33.安装MRS客户端遇到的报错：Error: Network time protocol(NTP) not running. Please st..._python连接hive kerberos
文章浏览阅读801次。第一种方法：<scripttype="text/javascript">varstr="abcdeg";functiondemo(str){varstr2="";for(vari=0;i<str.length;i++){str2+=str.charAt(str.length-i-1);}document.write(str+"<br/>"+str2..._编写一个字符串反转函数,将指定字符串中的字符顺序颠倒存放,并在主函数中打印反转