Sass提供了许多内置模块,其中包含有用的函数(以及mixin)。这些模块可以像任何用户定义的样式表一样使用@use规则加载,它们的函数可以像任何其他模块成员一样调用。所有内置模块URL都以sass开头:表示它们是sass本身的一部分。

常见函数简介,更多函数列表可看:https://sass-lang.com/documentation/modules

Color(颜色函数)

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

p {
height: 30px;
} .p0 {
background-color: #5c7a29;
} .p1 {
/*
        让颜色变亮
        lighten($color, $amount)
        $amount 的取值在0% - 100% 之间
     */
background-color: lighten(#5c7a29, 30%);
} .p2 {
// 让颜色变暗  通常使用color.scale()代替该方案
background-color: darken(#5c7a29, 15%);
} .p3 {
// 降低颜色透明度  通常使用color.scale()代替该方案
// background-color: opacify(#5c7a29,0.5);
background-color: opacify(rgba(#5c7a29, 0.1), 0.5);
}

使用

<p></p>
<p class="p0"></p>
<p class="p1"></p>
<p class="p2"></p>
<p class="p3"></p>

更多详细使用:https://sass-lang.com/documentation/modules/color

String(字符串函数)

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

p {
&:after {
content: quote(这是里面的内容);
}
background-color: unquote($string: "#F00");
z-index:str-length("sass学习");
}

更多详细使用:https://sass-lang.com/documentation/modules/string

Math(数值函数)

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

例如

p {
z-index: abs($number: -15); // 15
z-index: ceil(5.8); //6
z-index: max(5, 1, 6, 8, 3); //8
opacity: random(); // 随机 0-1
}

更多详细使用:https://sass-lang.com/documentation/modules/math

List函数

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

例如:

p {
z-index: length(12px); //1
z-index: length(12px 5px 8px); //3
z-index: index(a b c d, c); //3
padding: append(10px 20px, 30px); // 10px 20px 30px
color: nth($list: red blue green, $n: 2); // blue
}

更多详细使用:https://sass-lang.com/documentation/modules/list

Map函数

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

$font-sizes: ("small": 12px, "normal": 18px, "large": 24px);
$padding:(top:10px, right:20px, bottom:10px, left:30px);
p {
font-size: map-get($font-sizes, "normal"); //18px
@if map-has-key($padding, "right") {
padding-right: map-get($padding, "right");
}
&:after {
content: map-keys($font-sizes) + " "+ map-values($padding) + "";
}
}

更多详细使用:https://sass-lang.com/documentation/modules/map

selector选择器函数

​ 选择符相关函数可对CSS选择进行一些相应的操作,例如:selector-append()可以把一个选择符附加到另一个选择符,selector-unify()将两组选择器合成一个复合选择器。

例如

.header {
background-color: #000;
content: selector-append(".a", ".b", ".c") + '';
content: selector-unify("a", ".disabled") + '';
}

更多详细使用:https://sass-lang.com/documentation/modules/selector

自检函数

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

例如:

$color:#F00;
@mixin padding($left:0, $top:0, $right:0, $bottom:0) {
padding: $top $right $bottom $left;
} .container {
@if variable-exists(color) {
color: $color;
}
@else {
content: "$color不存在";
}
@if mixin-exists(padding) {
@include padding($left: 10px, $right: 10px);
}
}

自检函数通常用在代码的调试上

常见的内置函数就这些,如果这些不能满足你的要求,你也可以自定义函数功能,后面的课程我们会单独讲解,更多课程关注“老姚实战营”。

Sass预处理器 常见函数的基本使用的更多相关文章

  1. Sass预处理器

    CSS预处理器 less,sass和stylus sass:较早,缩进风格 scss:完全兼容css3,使用大括号 编写css的编程语言,引入变量,函数,重复代码等功能,如果编译成css文件 Sass ...

  2. 项目中使用sass预处理器

    安装sass npm install node-sass sass-loader --save 新建样式文件后缀为 .scss 在使用样式的页面引入:import  'xx.scss';

  3. CSS 即将支持嵌套,SASS/LESS 等预处理器已无用武之地?

    最近,有一则非常振奋人心的消息,CSS 即将原生支持嵌套 -- Agenda+ to publish FPWD of Nesting,表示 CSS 嵌套规范即将进入规范的 FWPD 阶段. 目前对应的 ...

  4. 【前端知识体系-CSS相关】CSS预处理器

    1.常见的CSS预处理器有哪些? [!NOTE] css预处理器:用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作,可以让你的CS ...

  5. 前端CSS预处理器Sass

    前面的话   "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...

  6. css预处理器sass使用教程(多图预警)

    css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可 ...

  7. 关于前端CSS预处理器Sass的小知识!

    前面的话   "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...

  8. CSS预处理器Sass、LESS 和 Stylus

    CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...

  9. CSS 预处理器(框架)初探:Sass、LESS 和 Stylus

    现在最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 拿less来说,可以在页面上直接使用less文件,但要引用less.js进行解析:同时也可以直接将less ...

  10. 为您详细比较三个 CSS 预处理器(框架):Sass、LESS 和 Stylus

    CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...

随机推荐

  1. redis 简单整理——哨兵部署业务图[二十九]

    前言 简单介绍一下哨兵的部署业务图,非部署步骤. 正文 看一下部署的拓扑图: 然后这里用docker 来部署一下哨兵模式. 搭建一主二从. version: '3.7' services: maste ...

  2. jenkins 持续集成和交付——开篇(一)

    前言 因为以前就很想看下jenkins了,平时工作中也使用,主要是写脚本,但是jenkins 主要还是说运维部门来搞定的,因为公司安全部门认为程序员不应该去接触运维的东西,但是上次面试问了下,准备把这 ...

  3. async/await 贴脸输出,这次你总该明白了

    出来混总是要还的 最近在准备记录一个.NET Go核心能力的深度对比, 关于.NET/Go的异步实现总感觉没敲到点上. async/await是.NET界老生常谈的话题,每至于此,状态机又是必聊的话题 ...

  4. Go 单元测试基本介绍

    目录 一.单元测试基本介绍 1.1 什么是单元测试? 1.2 如何写好单元测试 1.3 单元测试的优点 1.4 单元测试的设计原则 二.Go语言测试 2.1 Go单元测试概要 2.2 Go单元测试基本 ...

  5. 技术解读 | 智能开放搜索CTR预估模型

    ​简介:本文介绍开放搜索CTR预估模型在个性化排序中的应用与实践 如何评价搜索排序效果? 搜索是用户触达信息最简单直接的方式,是APP.网页必备的功能.如何评价并提升搜索效果一直是搜索领域的常见问题. ...

  6. 阿里云 EMR Delta Lake 在流利说数据接入中的架构和实践

    简介: 为了消灭数据孤岛,企业往往会把各个组织的数据都接入到数据湖以提供统一的查询或分析.本文将介绍流利说当前数据接入的整个过程,期间遇到的挑战,以及delta在数据接入中产生的价值. 背景 流利说目 ...

  7. 阿里云IoT Studio升级版新增解决方案引擎 大幅提升方案交付效率

    简介: 8月25日,阿里云发布IoT Studio升级版,新增了解决方案引擎,让设备方案商复用之前搭建的解决方案模板进行简单的定制化修改,即可交付.使整个物联网解决方案的交付过程由几个月,缩短到几小时 ...

  8. IIncrementalGenerator 解析 ValueTuple 的定义

    本文将告诉大家如何在分析器里面解析代码里面对于 ValueTuple 的定义,包括如何获取 ValueTuple 里面的 Item 的类型和命名 开始之前先创建一个用来被分析的项目,在这个项目里面定义 ...

  9. dotnet 读 WPF 源代码笔记 简单聊聊文本布局换行逻辑

    在 WPF 里面,带了基础的文本库功能,如 TextBlock 等.文本库排版的重点是在文本的分行逻辑,也就是换行逻辑,如何计算当前的文本字符串到达哪个字符就需要换到下一行的逻辑就是文本布局的重点模块 ...

  10. 2019-8-31-C#-简单读取文件

    title author date CreateTime categories C# 简单读取文件 lindexi 2019-08-31 16:55:58 +0800 2018-07-19 16:48 ...