/*内置函数*/

/*1)常规的rgb,rgba函数*/
$color:rgb(255,255,162);
body{
color: $color;
background-color:rgba($color, 0.5);

/*2)lighten,darken函数*/
span{
color: darken($color,0.4);//颜色加深0.4倍
background-color: lighten($color,0.5);//颜色变浅0.5倍。
}
}

/*str-length(),str-index() 下标是从1开始的而不是0*/
$str:'beautiful';
p{
z-index: str-length($str);
z-index: str-index($str,'f');
}

/*自定义function*/

@function double($width){
@return $width * 2;
}

a{
width: double(10px);
}

/*@warn,@debug,@error 主要用于输出*/

@debug 'this is a debug test';/*在控制台看结果*/
@warn 'warn';

/*实例:自定义一个函数,通过给定的层次,获取特定的z-index*/

sass进阶—函数的更多相关文章

  1. css预编译--sass进阶篇

    基础篇中主要介绍了一些sass的基本特性,进阶篇中,主要是写一些我们常用的sass控制命令,函数和规则. 控制命令 可能看过基础篇的朋友会发现在有些代码中出现@if @else @each等,熟悉JS ...

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

    RGB颜色函数-RGB()颜色函数 在 Sass 的官方文档中,列出了 Sass 的颜色函数清单,从大的方面主要分为 RGB , HSL 和 Opacity 三大函数,当然其还包括一些其他的颜色函数, ...

  3. 2-2 Sass的函数功能-字符串与数字函数

    Sass的函数简介 在 Sass 中除了可以定义变量,具有 @extend.%placeholder 和 mixins 等特性之外,还自备了一系列的函数功能.其主要包括: 字符串函数 数字函数 列表函 ...

  4. Sass 颜色函数

    /* * Sass 颜色函数 * RGB 颜色函数 * 1. rgb($red,$green,$blue):根据红.绿.蓝三个值创建一个颜色: * rgb(200,40,88) //根据r:200,g ...

  5. Python进阶-函数默认参数

    Python进阶-函数默认参数 写在前面 如非特别说明,下文均基于Python3 一.默认参数 python为了简化函数的调用,提供了默认参数机制: def pow(x, n = 2): r = 1 ...

  6. sass进阶篇

    @if @if 指令是一个 SassScript,它可以根据条件来处理样式块,如果条件为 true 返回一个样式块,反之 false 返回另一个样式块.在 Sass 中除了 @if 之,还可以配合 @ ...

  7. 【Sass/SCSS】我花4小时整理了的Sass的函数

    [Sass/SCSS]我花4小时整理了的Sass的函数 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 Sass 定义了各 ...

  8. Sass进阶之路,之二(进阶篇)

    Sass之二(进阶篇) 1. 数据类型 1.1 Number 数字类型,小数类型,带有像素单位的数字类型,全部都属于Number类型 Number类型详情请点击这里,下面是小例子 1.$n1: 1.2 ...

  9. Sass进阶之路,之一(基础篇)

    Sass 学习Sass之前,应该要知道css预处理器这个东西,css预处理器是什么呢? Css预处理器定义了一种新的语言将Css作为目标生成文件,然后开发者就只要使用这种语言进行编码工作了.预处理器通 ...

随机推荐

  1. (转)JMeter学习逻辑控制器

    JMeter中的Logic Controller用于为Test Plan中的节点添加逻辑控制器. JMeter中的Logic Controller分为两类:一类用来控制Test Plan执行过程中节点 ...

  2. webservice异常

    webservice的一个常见异常: [SOAPException: faultCode=SOAP-ENV:Client; msg=Error parsing HTTP status line &qu ...

  3. 清北学堂part1

    睡眠质量相当高的一天(滑稽) 整一整都学了啥 1:高精度(相当水,毕竟学过) 2:模运算(?! 这还要讲?) 3:快速幂(还要谢一位学习高数时间为我们讲解的同学...不得不说真的有效,快速幂已经是随手 ...

  4. SpringCloud实践引入注册中心+配置中心

    随着服务数量的增多,尤其是多数项目涉及jni本地方法的调用,所需参数配置较多,同时内存溢出等维护问题时常发生.鉴于此,原tomcat集群的使用已难满足需求,而微服务的思想契合当前项目实践,特在服务端构 ...

  5. mpvue——引入echarts打包vendor过大

    前言 有一个项目需要引入图表,当时有两种选择一种是mpvue-echarts,一种是F2,而我经过踩坑之后依然决然的选择了mpvue-echarts,简单快捷容易上手,主要之前用过比较熟悉. 问题 | ...

  6. kotlin电商学习记录,好久没来逛逛了

    好久没来,一直做毕业设计,用kotlin写一个基于以图搜图的购物app,现在又赶上实习,内容多,时间少,不过前途光明并由贵人指点.加油 kotlin电商学习记录 技术选型 视图层 kotlin-and ...

  7. Vivado2016旧工程IP移动到新工程

    前言 在VIVADO中图形化界面生成IP,在旧工程中使用后,如果想在新的工程中使用这个IP但又不想再次生成一次,则就需要把就旧工程中的IP导入到新工程中. 流程 1.旧工程IP生成的目录如下,IP为C ...

  8. 【XSY2887】【GDOI2018】小学生图论题 分治FFT 多项式exp

    题目描述 在一个 \(n\) 个点的有向图中,编号从 \(1\) 到 \(n\),任意两个点之间都有且仅有一条有向边.现在已知一些单向的简单路径(路径上任意两点各不相同),例如 \(2\to 4\to ...

  9. Magento2.X 后端开发简要1

    Megento2.X 后端开发简要 根目录位置 组件的根目录是其文件夹和文件所在的组件的顶级目录.根据您安装的MaMeto开发环境,组件的根目录可以位于两个位置: 1.<Magento inst ...

  10. 树&堆

    树 什么是树? 大概像下面这样: 树的概念 树的每个点被称为节点: 连接的两个点,一个为父节点,一个为子节点,例如上图中,\(1\)是\(4\)的父节点,\(4\)是\(1\)的子节点: 没有父节点的 ...