sass进阶—函数
/*内置函数*/
/*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进阶—函数的更多相关文章
- css预编译--sass进阶篇
基础篇中主要介绍了一些sass的基本特性,进阶篇中,主要是写一些我们常用的sass控制命令,函数和规则. 控制命令 可能看过基础篇的朋友会发现在有些代码中出现@if @else @each等,熟悉JS ...
- 2-4 Sass的函数功能-颜色函数
RGB颜色函数-RGB()颜色函数 在 Sass 的官方文档中,列出了 Sass 的颜色函数清单,从大的方面主要分为 RGB , HSL 和 Opacity 三大函数,当然其还包括一些其他的颜色函数, ...
- 2-2 Sass的函数功能-字符串与数字函数
Sass的函数简介 在 Sass 中除了可以定义变量,具有 @extend.%placeholder 和 mixins 等特性之外,还自备了一系列的函数功能.其主要包括: 字符串函数 数字函数 列表函 ...
- Sass 颜色函数
/* * Sass 颜色函数 * RGB 颜色函数 * 1. rgb($red,$green,$blue):根据红.绿.蓝三个值创建一个颜色: * rgb(200,40,88) //根据r:200,g ...
- Python进阶-函数默认参数
Python进阶-函数默认参数 写在前面 如非特别说明,下文均基于Python3 一.默认参数 python为了简化函数的调用,提供了默认参数机制: def pow(x, n = 2): r = 1 ...
- sass进阶篇
@if @if 指令是一个 SassScript,它可以根据条件来处理样式块,如果条件为 true 返回一个样式块,反之 false 返回另一个样式块.在 Sass 中除了 @if 之,还可以配合 @ ...
- 【Sass/SCSS】我花4小时整理了的Sass的函数
[Sass/SCSS]我花4小时整理了的Sass的函数 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 Sass 定义了各 ...
- Sass进阶之路,之二(进阶篇)
Sass之二(进阶篇) 1. 数据类型 1.1 Number 数字类型,小数类型,带有像素单位的数字类型,全部都属于Number类型 Number类型详情请点击这里,下面是小例子 1.$n1: 1.2 ...
- Sass进阶之路,之一(基础篇)
Sass 学习Sass之前,应该要知道css预处理器这个东西,css预处理器是什么呢? Css预处理器定义了一种新的语言将Css作为目标生成文件,然后开发者就只要使用这种语言进行编码工作了.预处理器通 ...
随机推荐
- c选择排序算法
void selectsort(int *a,int len) { int i,j; int temp; for(i=0;i<len-1;i++) { for(j=i+1;j<len;j+ ...
- AtCoder Beginner Contest 122 D - We Like AGC(DP)
题目链接 思路自西瓜and大佬博客:https://www.cnblogs.com/henry-1202/p/10590327.html#_label3 数据范围小 可直接dp f[i][j][a][ ...
- P1033 自由落体
原题链接 https://www.luogu.org/problemnew/show/P1033 不得不说,这个题太坑了!!!主要是题目说得不明确...... 先来看图: 看一下用红圈圈起来的部分,就 ...
- Flask websocket
websocket 概念 是一套协议,协议规定了: - 连接时需要握手 - 发送数据进行加密 - 连接之后不断开 意义 实现长轮询等操作 框架支持 - flask,gevent-websocket - ...
- [curl]convert curl to python Ruby
https://curl.trillworks.com/
- Loj #528. 「LibreOJ β Round #4」求和 (莫比乌斯反演)
题目链接:https://loj.ac/problem/528 题目:给定两个正整数N,M,你需要计算ΣΣu(gcd(i,j))^2 mod 998244353 ,其中i属于[1,N],j属于[1,M ...
- 解决Navicat远程连接MySQL出现 10060 unknow error
前言:今天想远程连接一下自己服务器上的MySQL,用的用的软件是Navicat,服务器上的MySQL版本为5.7 第一次连接的时候就出意外了 大概意思是 无法连接MySQL服务,解决步骤如下 第一:首 ...
- Windows编写的shell脚本,在linux上无法执行
前两天由于要查一个数据库的binlog日志,经常用命令写比较麻烦,想着写一个简单的脚本,自动去刷一下数据库的binlog日志,就直接在windows上面写了,然后拷贝到linux中去运行,其实很简单的 ...
- 你可能不知道的 Mac 技巧 - 文本操作
找不到 Mac 上的 Home,End,PageUp?想截图还得打开 QQ?不知道 Mac 如何剪切文件?找不到全屏窗口的按钮?找不到隐藏文件夹?不知道如何向后删除?想少用鼠标,多用键盘?…… 希望我 ...
- 速查mysql数据大小
速查mysql数据大小 # 1.查看所有数据库大小 mysql> select concat(round(sum(DATA_LENGTH/1024/1024),2),'MB') as data ...