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-ind…
基础篇中主要介绍了一些sass的基本特性,进阶篇中,主要是写一些我们常用的sass控制命令,函数和规则. 控制命令 可能看过基础篇的朋友会发现在有些代码中出现@if @else @each等,熟悉JS条件语句和循环的朋友会比较了解这些控制命令的功能所在,这些控制命令是 sass 的一个重要组成部分. @if,@else @if @else是一个简单的根据条件来处理样式块的SassScript,如果if的条件是true那么就调用if的样式块,否则就调用else的样式块,一个简单的代码示例 @mix…
RGB颜色函数-RGB()颜色函数 在 Sass 的官方文档中,列出了 Sass 的颜色函数清单,从大的方面主要分为 RGB , HSL 和 Opacity 三大函数,当然其还包括一些其他的颜色函数,比如说 adjust-color 和 change-color 等.在这章节中,将主要和大家一起探讨 Sass 颜色函数中常见的 RGB.HSL 和 Opacity 函数. 1.RGB颜色函数 RGB 颜色只是颜色中的一种表达式,其中 R 是 red 表示红色,G 是 green 表示绿色而 B 是…
Sass的函数简介 在 Sass 中除了可以定义变量,具有 @extend.%placeholder 和 mixins 等特性之外,还自备了一系列的函数功能.其主要包括: 字符串函数 数字函数 列表函数 颜色函数 Introspection 函数 三元函数等 当然除了自备的函数功能之外,我们还可以根据自己的需求定义函数功能,常常称之为自定义函数. 下面将给大家详细介绍前 4 种最常用的函数. 字符串函数-unquote()函数 字符串函数顾名思意是用来处理字符串的函数.Sass 的字符串函数主要…
/* * Sass 颜色函数 * RGB 颜色函数 * 1. rgb($red,$green,$blue):根据红.绿.蓝三个值创建一个颜色: * rgb(200,40,88) //根据r:200,g:40,b:88计算出一个十六进制颜色值 * #c82858 * 2. rgba($red,$green,$blue,$alpha):根据红.绿.蓝和透明度值创建一个颜色: * rgba(#c82858,.65) //根据#c82858的65%透明度计算出一个rgba颜色值 * rgba(200,…
Python进阶-函数默认参数 写在前面 如非特别说明,下文均基于Python3 一.默认参数 python为了简化函数的调用,提供了默认参数机制: def pow(x, n = 2): r = 1 while n > 0: r *= x n -= 1 return r 这样在调用pow函数时,就可以省略最后一个参数不写: print(pow(5)) # output: 25 在定义有默认参数的函数时,需要注意以下: 必选参数必须在前面,默认参数在后: 设置何种参数为默认参数?一般来说,将参数值…
@if @if 指令是一个 SassScript,它可以根据条件来处理样式块,如果条件为 true 返回一个样式块,反之 false 返回另一个样式块.在 Sass 中除了 @if 之,还可以配合 @else if 和 @else 一起使用. 假设要控制一个元素隐藏或显示,我们就可以定义一个混合宏,通过 @if...@else... 来判断传进参数的值来控制 display 的值.如下所示: //SCSS @mixin blockOrHidden($boolean:true) { @if $bo…
[Sass/SCSS]我花4小时整理了的Sass的函数 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 Sass 定义了各种类型的函数,这些函数可以通过 CSS 语句直接调用. 可以看到Sass的函数功能已经相当丰富了. 整理了Sass的主要函数,重点在于后面的颜色函数,设计非常的银杏! String(字符串) 函数 quote(string) 给字符串添加引号 quote(hello) //"hello"…
Sass之二(进阶篇) 1. 数据类型 1.1 Number 数字类型,小数类型,带有像素单位的数字类型,全部都属于Number类型 Number类型详情请点击这里,下面是小例子 1.$n1: 1.2;2.$n2: 12;3.$n3: 14px;4.$n4: 1em; 1.2 String 不加双引号的,加双引号的,加单引号的全部都属于String类型 String类型详细内容请点击这里, 下面是小demo 1.$s1: container;2.$s2: 'container';3.$s3: "…
Sass 学习Sass之前,应该要知道css预处理器这个东西,css预处理器是什么呢? Css预处理器定义了一种新的语言将Css作为目标生成文件,然后开发者就只要使用这种语言进行编码工作了.预处理器通常可以实现浏览器兼容,变量,结构体等功能,代码更加简洁易于维护. 那么css预处理器与Sass有什么关系呢,Sass就是属于css预处理器中的一种,还有两款他们分别是Less和 Stylus,这里就不做过多的介绍了. 什么是Sass sass是一种css的开发工具,提供了很多便利的写法,不但使css…
列表函数主要包括一些对列表参数的函数使用,主要包括以下几种: length($list):返回一个列表的长度值: nth($list, $n):返回一个列表中指定的某个标签值 join($list1, $list2, [$separator]):将两个列给连接在一起,变成一个列表: append($list1, $val, [$separator]):将某个值放在列表的最后: zip($lists-):将几个列表结合成一个多维的列表: index($list, $value):返回一个值在列表中…
代码的重用 基础的部分我们讲述了变量 Mixin 这两种方法可以增加扩展和重用 现在开始继续学习:extend继承 .class1 { border: 1px solid #ddd; } .class2 { @extend .class1; font-size:%; } 引入外部文件 @import "path/filename.scss"; 引入后就可以用调用里边的变量和mixin,继承里边的类了 高级语法 @if可以用来判断: p { @if + == { border: 1px…
1,对文件的操作,确保多个进程可以同时读写一个文件(flock函数) flock($hamdle,int $operator) operator的取值,LOCK_SH(共享锁定,读取程序),LOCK_EX(独占锁定,写入)LOCK_UN(释放锁定)2,basename(string path [,string suffix]),返回路径中的文件名,如果有suffix后缀名,则直接返回不带后缀的文件名 dirname(string $path);返回去掉文件名后的目录名 3,读取文件夹中所有的文件…
一.@if 指令: @if 指令是一个 SassScript,它可以根据条件来处理样式块,如果条件为 true 返回一个样式块,反之 false 返回另一个样式块.在 Sass 中除了 @if 之,还可以配合 @else if 和 @else 一起使用. @mixin blockOrHidden($boolean:true) { @if $boolean { @debug "$boolean is #{$boolean}"; display: block; } @else { @deb…
今儿写个type-of,算是备忘录吧. 1.number type-of(0) // number type-of(1px) // number 2.string type-of(a) // string type-of("a") // string 3.bool type-of(true) // bool type-of(0<1) // bool 4.color type-of(rgba(1,2,3,.3)) // color type-of(rgb(1,2,3)) // co…
/*变量操作 (两个变量之间的运算符需要用空格隔开,否则会报错.)==,!= <,>,<=,>=+,-,*,/,% */ $width1:50px;$width2:100px;body{ width: $width1 + $width2; height: $width2 - $width1;} /*连字符号中间使用带空格的加号效果不变*/a:hover{ cursor:e-resize; /*等同于*/ cursor: e + -resize;} 注意:说明运算时sass只关注运算…
函数的定义和用途 函数function是由若干条shell命令组成的语句块,实现shell代码的重用和模块化编程. 函数和shell程序的异同点 它与shell程序形式上是相似的,不同的是它不是一个单独的进程,不能独立运行,而是shell程序的一部分 区别: 1.shell程序会启动一个子shell来执行 2.函数会在当前shell中运行,因此在当前shell中,函数可以对shell中的变量进行修改 (  函数的有效范围是在当前shell   ) 函数的优先级高于内部命令,外部命令,别名. 函数…
1,lambda:  匿名函数 2.sorgted()  排序函数 3,filter()   过滤函数 筛选 4,map()  映射函数 5.递归 6.二分法 一. 匿名函数: lambda lambda 表示的是匿名函数,不用def 来声明,一句话就可以声明一个函数. 例如:我们为力了解决一些简单的需求而设计了一句话函数: 但是我们用匿名函数就会相对来说方便一些 匿名函数语法: 函数名= lambda  参数 : 返回值 例: 同上 匿名函数的操作方法 a = 笔试题 def func(x,y…
一.函数的动态参数 之前我们说过了传参, 如果我们需要给一个函数传参, 而参数又是不确定的. 或者我给一个函数传很多参数, 我的形参就要写很多, 很麻烦, 怎么办呢. 我们可以考虑使用动态参数. 动态参数分成两种: 1. *args 动态接收位置参数 动态接收参数的时候要注意:动态参数必须在位置参数后面 def xue(*language,'a','b'): print('我要学:',language,a,b) xue('PHP',JAVA,'Python') 如果这个程序不遵循顺序的话就会报错…
alphpa() 和 opacity() 函数很简单,与前面介绍的 red(),green() 等函数很类似.这个函数的主要功能是用来获取一个颜色的透明度值.如果颜色没有特别指定透明度,那么这两个函数得到的值都会是 1: >> alpha(red) 1 >> alpha(rgba(red,.8)) 0.8 >> opacity(red) 1 >> opacity(rgba(red,.8)) 0.8…
1.To-upper-case() To-upper-case() 函数将字符串小写字母转换成大写字母.如: //SCSS .test { text: to-upper-case(aaaaa); text: to-upper-case(aA-aAAA-aaa); } 编译出来的 css 代码: //CSS .test { text: AAAAA; text: AA-AAAA-AAA; } 2.To-lower-case() To-lower-case() 函数 与 To-upper-case()…
>>返回主目录 源码 # 函数嵌套 def func1(): print("这是外部函数") def func2(): print("这是内部函数1") def func3(): print("这是内部函数2") # func2() # 在函数外部不能直接调用函数内部的函数 func1() 源码 # 嵌套调用 # 嵌套调用1:在外函数内部调用内函数,例如: def fun_outer_call_1(): print("这是o…
@charset "utf-8"; @import "compass/css3/inline-block"; @import "compass/css3/border-radius"; @import "compass/utilities/sprites"; @import "compass/utilities/general"; @mixin position($top,$right,$bottom,$l…
@mixin content($color:red,$fontSize:14px){ color:$color; font-size: $fontSize;} /*调用含参数的mixin,使用更加灵活1.传递多个属性的参数时需要指定变量名,否则将无法找到是哪个属性2.一个参数需传递多个参数值时,需在参数末尾加上三个点即表示可传递多个参数值:*/body{ @include content($color:blue,$fontSize:18px);} @mixin box-shadow($box-s…
这种判断语句要配合混合宏来使用 定义下一混合宏 @mixin blockOrHidden($boolean:true) { @if $boolean { @debug "$boolean is #{$boolean}"; display: block; } @else { @debug "$boolean is #{$boolean}"; display: none; } } 调用混合宏 .block { @include blockOrHidden; } .hid…
Sass的函数简介在 Sass 中除了可以定义变量,具有 @extend.%placeholder 和 mixins 等特性之外,还自备了一系列的函数功能.其主要包括: ● 字符串函数 ● 数字函数 ● 列表函数 ● 颜色函数 ● Introspection 函数 ● 三元函数等 当然除了自备的函数功能之外,我们还可以根据自己的需求定义函数功能,常常称之为自定义函数. 字符串函数字符串函数顾名思意是用来处理字符串的函数.Sass 的字符串函数主要包括两个函数: unquote($string):…
RGB颜色函数-RGB()颜色函数 主要分为 RGB , HSL 和 Opacity 三大函数,当然其还包括一些其他的颜色函数,比如说 adjust-color 和 change-color 等.1.RGB颜色函数RGB 颜色只是颜色中的一种表达式,其中 R 是 red 表示红色,G 是 green 表示绿色而 B 是 blue 表示蓝色.在 Sass 中为 RGB 颜色提供六种函数: rgb($red,$green,$blue):根据红.绿.蓝三个值创建一个颜色: rgba($red,$gre…
函数进阶 目标 函数参数和返回值的作用 函数的返回值 进阶 函数的参数 进阶 递归函数 01. 函数参数和返回值的作用 函数根据 有没有参数 以及 有没有返回值,可以 相互组合,一共有 4 种 组合形式 无参数,无返回值 无参数,有返回值 有参数,无返回值 有参数,有返回值  定义函数时,是否接收参数,或者是否返回结果,是根据 实际的功能需求 来决定的! 如果函数 内部处理的数据不确定,就可以将外界的数据以参数传递到函数内部 如果希望一个函数 执行完成后,向外界汇报执行结果,就可以增加函数的返…
1.@if     @if 指令是一个 SassScript,它可以根据条件来处理样式块,如果条件为 true 返回一个样式块,反之 false 返回另一个样式块 在 Sass 中除了 @if 之,还可以配合 @else if 和 @else 一起使用. 假设要控制一个元素隐藏或显示,我们就可以定义一个混合宏,通过 @if...@else... 来判断传进参数的值来控制 display 的值   2.@for循环     在制作网格系统的时候,大家应该对 .col1~.col12 这样的印象较深…
函数进阶 目标 函数参数和返回值的作用 函数的返回值 进阶 函数的参数 进阶 递归函数 01. 函数参数和返回值的作用 函数根据 有没有参数 以及 有没有返回值,可以 相互组合,一共有 4 种 组合形式 无参数,无返回值 无参数,有返回值 有参数,无返回值 有参数,有返回值 定义函数时,是否接收参数,或者是否返回结果,是根据 实际的功能需求 来决定的! 如果函数 内部处理的数据不确定,就可以将外界的数据以参数传递到函数内部 如果希望一个函数 执行完成后,向外界汇报执行结果,就可以增加函数的返回值…