文章目录
1.初见Less
1.1 什么是Less
- Less是一个CSS预编译器,意思指的是它可以扩展CSS语言,添加功能如允许变量(variables),混合(mixins),函数(functions)和许多其他的技术,让你的CSS更具维护性、主题性、扩展性。
1.2 Less官方网站
- http://lesscss.org/
1.3 与Less的第一次碰面
.conten {
ul {
list-style: none;
}
li {
height: 25px;
line-height: 25px;
padding-left: 15px;
background: url("arr.jpg") no-repeat center left;
a {
text-decoration: none;
color: #535353;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
}
}
1.4 Less中的注释
- // 只会在LESS中显示,不会被编译到css文件中
- /就会在LESS和CSS中显示/,会被编译到css文件中
2.正确使用Less
2.1 如何使用Less
- Less文件只有在被编译后才能被浏览器识别使用
2.2 Less编译工具
- Koala http://koala-app.com/
- WinLess
- CodeKit
2.3 客户端调试方式
- 首先引用Less文件 link引入,rel=“stylesheet/less”
- 然后引用less.js 要在less样式文件之后引入
3.变量(variables)
3.1 普通的变量
- 定义 @
@blue: #5B83AD;
#header {
color: @blue;
}
- 由于变量只能定义一次,实际上它们就是“常量”
3.2 作为选择器和属性名
- @{变量名}
@mySelector: width;
.@{mySelector} {
@{mySelector}: 960px;
}
3.3 作为URL
- 使用时,使用""将变量的值括起来,使用时同样将变量以@{变量名}的方式使用
@myUrl: "http://www.xxx.xxx";
body {
background: #4cdca9 url("@{myUrl}/logo.png") no-repeat;
}
3.4 延迟加载
- 变量是延迟加载的,在使用前不一定要预先声明
.lazy-eval {
width: @var;
}
@var: @a;
@a: 9%;
3.5 定义多个相同名称的变量时
- 在定义一个变量两次时,只会使用最后定义的变量,Less会从当前作用域中向上搜索。这个行为类似于CSS的定义中始终使用最后定义的属性值。
4.混合(mixins)
4.1 普通混合
- 混合就是一种将一系列属性从一个规则集引入(“混合”)到另一个规则集的方式。
// 基本混合
.font_hn{
color: red;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
h1{
font-size: 28px;
.font_hn;
}
h2{
font-size: 24px;
.font_hn;
}
/*编译成*/
.font_hn {
color: red;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
h1 {
font-size: 28px;
color: red;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
h2 {
font-size: 24px;
color: red;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
4.2 不带输出的混合
- 如果你想要创建一个混合集,但是却不想让它输出到你的样式中
// 不带输出的混合,类名后面使用()
.font_hn() {
color: red;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
h1 {
font-size: 28px;
.font_hn;
}
h2 {
font-size: 24px;
.font_hn;
}
4.3 带选择器的混合
// 带选择器的混合
.my-hover-mixin() {
&:hover {
border: 1px solid red;
}
}
button {
.my-hover-mixin();
}
/*编译成*/
button:hover {
border: 1px solid red;
}
.my-hover-mixin {
&:hover {
border: 1px solid red;
}
}
h1 {
.my-hover-mixin();
}
/*编译成*/
.my-hover-mixin:hover {
border: 1px solid red;
}
h1:hover {
border: 1px solid red;
}
4.4 带参数的混合
// 带参数的混合
.border(@color) {
border: 1px solid @color;
}
h1 {
&:hover {
.border(green);
}
}
/*编译成*/
h1:hover {
border: 1px solid #008000;
}
4.5 带参数并且有默认值
/*带参数并且有默认值的混合*/
.border_you(@color:red) {
border: 1px solid @color;
}
h1 {
&:hover{
.border_you();
}
}
h2 {
&:hover{
.border_you(yellow);
}
}
/*编译成*/
/*带参数并且有默认值的混合*/
h1:hover {
border: 1px solid #ff0000;
}
h2:hover {
border: 1px solid #ffff00;
}
4.6 带多个参数的混合
- 一个组合可以带多个参数,参数之间可以用分号或者逗号分隔
- 但是推荐使用分号分割,因为逗号符号有两个意思。他可以解释为mixins参数分隔符或者css列表分隔符。
- 两个参数,并且每个参数都是逗号分割的列表 .name(1,2,3;something, ele)
- 三个参数,并且每个参数都包含一个数字 .name(1,2,3)
- 使用伪造的分号创建mixin,调用的时候参数包含一个逗号分割的css列表 .name(1,2,3;)
- 逗号分割默认值 .name(@param1: red, blue)
// 带多个参数的混合
// 如果传参的括号里面全部都是以“,”分割,那么会依次传给各个参数值,
// 如果传参的括号里面既有“,”又有“;”那么,会把“;”前面的看作一个整体,传给一个参数值
.mixin(@color: black; @margin: 10px; @padding: 20px) {
color: @color;
margin: @margin;
padding: @padding;
}
.divmaizi {
.mixin(1,2,3;);
}
/*编译成*/
.divmaizi {
color: 1, 2, 3;
margin: 10px;
padding: 20px;
}
- 定义多个具有相同名称和参数数量的mixins是合法的。Less会使用它可以应用的属性。如果使用mixin的时候只带一个参数,比如.mixin(green),这个属性会导致所有的mixin都会强制使用这个明确的参数
/*定义多个具有相同名称和参数数量的混合*/
.mixin(@color) {
color-1: @color;
}
.mixin(@color; @padding:2) {
color-2: @color;
padding-2: @padding;
}
.mixin(@color; @padding; @margin: 2) {
color-3: @color;
padding-3: @padding;
margin: @margin @margin @margin @margin;
}
.some .selector div {
.mixin(#008000);
}
/*编译成*/
/*定义多个具有相同名称和参数数量的混合*/
.some .selector div {
color-1: #008000;
color-2: #008000;
padding-2: 2;
}
4.7 命名参数
- 引用mixin时可以通过参数名称而不是参数的位置来为mixin提供参数值,任何参数都已通过它的名称来引用,这样就不必按照任意特定的顺序来使用参数
// 命名参数
.mixin(@color: black; @margin: 10px; @padding: 20px) {
color: @color;
margin: @margin;
padding: @padding;
}
.class1 {
.mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
.mixin(#efca44; @padding: 40px);
}
.class3 {
.mixin(@padding: 80px;)
}
/*编译成*/
.class1 {
color: #33acfe;
margin: 20px;
padding: 20px;
}
.class2 {
color: #efca44;
margin: 10px;
padding: 40px;
}
.class3 {
color: #000000;
margin: 10px;
padding: 80px;
}
4.8 @arguments变量
- @arguments代表所有的可变参数
- @arguments; 代表所有可变参数时,参数的先后顺序就是你的()括号内的参数的先后顺序
- 注意在使用的赋值,值的位置和个数也是一一对应的,只有一个值,把值赋值给第一个,两个值,赋值给第一个和第二个,三个值,分别赋值给第三个…以此类推,但是需要主要的是假如我想给第一个和第三个赋值,你不能写(值1, ,值3),必须把原来的默认值写上去!
/*@arguments;*/
.border(@x:solid,@c:red) {
border: 21px @arguments;
}
.div1 {
.border();
}
/*编译成*/
/*@arguments;*/
.div1 {
border: 21px solid #ff0000;
}
4.9 匹配模式
- 传值的时候定义一个字符,在使用的时候使用哪个字符,就调用哪条规则
.border(all,@w: 5px) {
border-radius: @w;
}
.border(t_l,@w:5px) {
border-top-left-radius: @w;
}
.border(t_r,@w:5px) {
border-top-right-radius: @w;
}
.border(b-l,@w:5px) {
border-bottom-left-radius: @w;
}
.border(b-r,@w:5px) {
border-bottom-right-radius: @w;
}
footer {
.border(t_l,10px);
.border(b-r,10px);
background: #33acfe;
}
/*编译成*/
footer {
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
background: #33acfe;
}
4.10 得到混合中变量的返回值
// 混合的返回值
.average(@x, @y) {
@average: ((@x + @y) / 2);
@he:(@x + @y);
}
div {
.average(16px, 50px);
padding: @average;
margin: @he;
}
/*编译成*/
div {
padding: 33px;
margin: 66px;
}
5.嵌套规则(nested-rules)
- 嵌套规则它模仿了HTML的结构,让我们的css代码更加简洁明了清晰
- & 表示当前选择器的所有父选择器
- 将&放到当前选择器之后,就会将当前选择器插入到所有的父选择器之前
- 组合使用生成所有可能的选择器列表
p, a, ul, li {
border-top: 2px dotted #366;
& & {
border-top: 0;
}
}
/*编译成*/
p,
a,
ul,
li {
border-top: 2px dotted #366;
}
p p,
p a,
p ul,
p li,
a p,
a a,
a ul,
a li,
ul p,
ul a,
ul ul,
ul li,
li p,
li a,
li ul,
li li {
border-top: 0;
}
6.运算(operations)
- 任何数值,颜色和变量都可以进行运算
- Less会为你自动推断数值的单位,所以你不必每一个值都加上单位
- 注意:运算符与值之间必须以空格分开,涉及优先级时以()进行优先级运算
- Less在运算时,先将颜色值转换为rgb模式,然后在转换为16进制的颜色值并且返回
- 注意:既然是转换为rgb模式,我们知道rgb的取值范围是0~255,所以我们计算的时候不能超过这个区间,超过后默认使用最大值255计算
.wp {
background: red - 55;
}
/*编译成*/
.wp {
background: #ff0000 - 55;
}
7.函数(functions)
- Less提供了许多用于转换颜色、处理字符串和进行算术运算的函数,这些函数使用起来非常简单。
- 最常见的rgb()函数,将rgb模式的值转换为16进制的值
8.命名空间
- 将一些需要的混合组合在一起,可以通过嵌套多层id或者class来实现
#bgcolor() {
background: #ffffff;
.a {
color: #888888;
&:hover {
color: #ff6600;
}
.b {
background: #ff0000;
}
}
}
.wi {
background: green;
color: #fff;
.a {
color: green;
background: #ffffff;
}
}
.bgcolor1 {
background: #fdfee0;
#bgcolor>.a;
}
.bgcolor2 {
.wi>.a;
}
/*编译成*/
.wi {
background: green;
color: #fff;
}
.wi .a {
color: green;
background: #ffffff;
}
.bgcolor1 {
background: #fdfee0;
color: #888888;
}
.bgcolor1:hover {
color: #ff6600;
}
.bgcolor1 .b {
background: #ff0000;
}
.bgcolor2 {
color: green;
background: #ffffff;
}
// 省略>写法
#bgcolor() {
background: #ffffff;
.a{
color: #888888;
&:hover {
color: #ff6600;
}
.b {
background: #ff0000;
}
}
}
.wi {
background: green;
color: #fff;
.a {
color: green;
background: #ffffff;
}
}
.bgcolor1 {
background: #fdfee0;
#bgcolor .a;
}
.bgcolor2 {
.wi .a;
}
/*编译成*/
.wi {
background: green;
color: #fff;
}
.wi .a {
color: green;
background: #ffffff;
}
.bgcolor1 {
background: #fdfee0;
color: #888888;
}
.bgcolor1:hover {
color: #ff6600;
}
.bgcolor1 .b {
background: #ff0000;
}
.bgcolor2 {
color: green;
background: #ffffff;
}
9.作用域
- Less中的作用域与编程语言中的作用域概念非常相似,首先会在局部查找变量和混合,如果没找到,编译器就会在父作用域中查找,以此类推
10.引入(importing)
- 你可以引入一个或多个.less文件,然后这个文件中的所有变量都可以在当前的less项目中使用
- @import “main”;
- 注意:引用.css文件会被原样输出到编译的文件中,不会混合到项目中
- 无法引用css中的选择器代码
- 可带参数
- once 默认,只包含一次
- reference 使用Less文件但不输出
- inline 在输出中包含源文件但不加工它
- less 将文件作为Less文件对象,无论是什么文件扩展名
- css 将文件作为css文件对象,无论是什么文件扩展名
- multiple multiple允许引入多次相同文件名的文件
11.关键字(important)
- 在调用的混合集后面追加!important关键字,可以使混合集里面的所有属性都继承!important
.foo (@bg: #f5f5f5, @color: #900) {
background: @bg;
color: @color;
font-size: 16px;
font-weight: 900;
}
.unimportant {
.foo();
}
.important {
.foo() !important;
}
/*编译成*/
.unimportant {
background: #f5f5f5;
color: #990000;
font-size: 16px;
font-weight: 900;
}
.important {
background: #f5f5f5 !important;
color: #990000 !important;
font-size: 16px !important;
font-weight: 900 !important;
}
12.条件表达式
-
带条件的混合
-
,>=,=,=<,<,true
// 255/2=127.5 .mixin (@a) when (lightness(@a) >= 50%) { background-color: black; } .mixin (@a) when (lightness(@a) < 50%) { background-color: white; } .mixin (@a) { color: @a; } // 7e7e7e = 126 .class1 { .mixin(#7e7e7e); } // 808080 = 128 .class2 { .mixin(#808080); } /*编译成*/ .class1 { background-color: white; color: #7e7e7e; } .class2 { background-color: black; color: #808080; }
-
-
类型检查函数
- iscolor
- isnumber
- isstring
- iskeyword
- isurl
// iscolor,isnumber.....判断值的类型 .mixin (@a) when (iscolor(@a)) { background-color: black; } .mixin (@a) when (isnumber(@a) ) { background-color: white; shuzi: shuzi; } .mixin (@a) { color: @a; } .class1 { .mixin(#7e7e7e); } .class2 { .mixin(123); } /*编译成*/ .class1 { background-color: black; color: #7e7e7e; } .class2 { background-color: white; shuzi: shuzi; color: 123; }
-
单位检查函数
- ispixel
- ispercentage
- isem
- isunit
// ispixel,ispercentage.....单位检查函数 .mixin (@a) when (ispixel(@a)) { background-color: black; } .mixin (@a) when (ispercentage(@a) ) { background-color: white; } .mixin (@a) { width: @a; } .class1 { .mixin(960px); } .class2 { .mixin(95%); } /*编译成*/ .class1 { background-color: black; width: 960px; } .class2 { background-color: white; width: 95%; }
13.循环(loop)
- 在Less中,混合可以调用它自身。这样,当一个混合递归调用自己,再结合Guard表达式和模式匹配这两个特性,就可以写出循环结构。
.loop(@counter) when (@counter < 7) {
h@{counter} {
padding: (10px * @counter);
}
.loop((@counter + 1));
}
div {
.loop(1);
}
/*编译成*/
div h1 {
padding: 10px;
}
div h2 {
padding: 20px;
}
div h3 {
padding: 30px;
}
div h4 {
padding: 40px;
}
div h5 {
padding: 50px;
}
div h6 {
padding: 60px;
}
14.合并属性
- '+'逗号分隔所合并的属性值
- 在需要合并的属性的’:‘的前面加上’+‘就可以完成合并,合并以’,'分割属性
- '+_'空格分隔所合并的属性值
- 在需要合并的属性的’:‘的前面加上’+_‘就可以完成合并,合并以’ '分割属性
// + 合并以后,以逗号分割属性值
.mixin() {
box-shadow+: inset 0 0 10px #555;
}
.myclass {
.mixin();
box-shadow+: 0 0 20px black;
}
// +_ 合并以后,以空格分割属性值
.a() {
background+:#f60;
background+_:url("/sss.jod");
background+:no-repeat;
background+_:center;
}
.myclass {
.a();
}
/*编译成*/
.myclass {
box-shadow: inset 0 0 10px #555, 0 0 20px black;
}
.myclass {
background: #f60 url("/sss.jod"), no-repeat center;
}
15.函数库(function)
15.1 其他函数
-
color()函数
- 解析颜色,将代表颜色的字符串转换为颜色值
-
convert()函数
- 将数字从一种类型转换到另一种类型
-
data-uri()函数
- 将一个资源内嵌到样式文件,如果开启了ieCompat选项,而且资源文件的体积过大,或者是在浏览器中使用,则会使用url()进行回退。如果没有指定MIME,则Node.js会使用MIME包来决定正确的MIME
-
default()函数
- 只能边界条件中使用,没有匹配到其他自定义函数(mixin)的时候返回true,否则返回false
.x(1) { x:11; } .x(2) { y:22; } .x(@x) when (default()) { z:@x; } .div1 { .x(1); } .div2 { .x(123); } /*编译成*/ .div1 { x: 11; } .div2 { z: 123; } .x(@x) when (ispixel(@x)) { width:@x; } .x(@x) when not(default()) { padding:(@x/10); } .div1 { .x(100px); } .div2 { .x(100cm); color:red; } /*编译成*/ .div1 { width: 100px; padding: 10px; } .div2 { color: red; }
-
unit()函数
- 移除或者改变属性值的单位
div { width: unit(100px, cm); } /*编译成*/ div { width: 100cm; }
15.2 字符串函数、长度相关函数
-
escape()函数
- 将输入字符串中的url特殊字符进行编码处理
- 不转义的编码 ‘,’ ‘/’ ‘?’ ‘@’ ‘&’ ‘+’ ‘’’ ‘~’ ‘!’ ‘$’
- 转义的编码 ‘#’ ‘^’ ‘(’ ‘)’ ‘{’ ‘}’ ‘|’ ‘:’ ‘>’ ‘<’ ‘;’ ‘]’ ‘[’ ‘=’
-
e()函数
- css转义,用~"值"符号代替
div { filter: e("ms:alwaysHasItsOwnSyntax.For.Stuff()"); filter2: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()"; width: calc(~'960px - 100px'); height: calc(~'960px - 100px'); } /*编译成*/ div { filter: ms:alwaysHasItsOwnSyntax.For.Stuff(); filter2: ms:alwaysHasItsOwnSyntax.For.Stuff(); width: calc(960px - 100px); height: calc(960px - 100px); }
-
%()函数
- 函数%(string, arguments…)格式化一个字符串
- d,D,a,A 能被任何类型参数替换(颜色值,数字,转义值,表达式,…)如果你在字符串中结合使用,整个字符串参数都会替换进去,包括它的引号,然后引号会被替换到字符串参数的原有位置,也许会被转义或者还是不变的,取决于占位符是大写字母还是小写字母
- s,S 能被除了颜色值以外任何类型参数替换(实际测试,颜色值也可以),如果你在字符串中结合使用,只会替换成字符串参数的值,而字符串参数引号都被忽略
div { font-family1: %( "%a %a" , "Microsoft", "YaHei"); font-family2: %( "%A %a" , "Microsoft", "YaHei"); font-family3: %( "%d %d" , "Microsoft", "YaHei"); font-family4: %( "%D %d" , "Microsoft", "YaHei"); font-family5: %( "%s %s" , "Microsoft", "YaHei"); font-family6: %( "%S %s" , "Microsoft", "YaHei"); font-family7: %( "%s %s" , #F00, "YaHei"); } /*编译成*/ div { font-family1: ""Microsoft" "YaHei""; font-family2: "%22Microsoft%22 "YaHei""; font-family3: ""Microsoft" "YaHei""; font-family4: "%22Microsoft%22 "YaHei""; font-family5: "Microsoft YaHei"; font-family6: "Microsoft YaHei"; font-family7: "#ff0000 YaHei"; }
-
replace()函数
- 用另一个字符串替换文本
div { content: replace("Hello, World", "World", "LESS"); } /*编译成*/ div { content: "Hello, LESS"; }
-
length()函数
- 返回集合中的值的条数
div { z-index: length(1px solid #0080ff); } /*编译成*/ div { z-index: 3; }
-
extract()函数
- 返回集合中指定索引的值
div { @list: "A", "B", "C", "D"; n: extract(@list, 4); } /*编译成*/ div { n: "D"; }
15.3 数学函数
- ceil()函数
- 向上取整
- floor()函数
- 向下取整
- percentage()函数
- 将浮点数转换为百分比
- round()函数
- 取整和四舍五入
- sqrt()函数
- 计算一个数的平方根,原样保持单位
- abs()函数
- 计算数字的绝对值,原样保持单位
- sin()函数
- 正弦函数
- asin()函数
- 反正弦函数
- cos函数
- 余弦函数
- acos()函数
- 反余弦函数
- tan()函数
- 正切函数
- atan()函数
- 反正切函数
- pi()函数
- 返回π(pi)
- pow()函数
- 乘方运算
- mod()函数
- 取余运算
- min()函数
- 最小值运算
- max()函数
- 最大值运算
div {
// width: ceil(2.9999999px); //1.ceil()函数 向上取整
// width: floor(2.9999999px); //1.floor()函数 向下取整
// width:percentage( 0.5px); 将浮点数转换为百分比
// 取整和四舍五入
// width:4.5px ;
// width:round(4.5px) ;
// width:4.4px ;
// width:round(4.4px) ;
// 计算一个数的平方根,原样保持单位。
// width: sqrt(16px);
// width: sqrt(9px);
// 计算数字的绝对值,原样保持单位。
// top: -999px;
// top: abs(-999px);
// width: sin(1); //1弧度角的正弦值
// width: sin(1deg);//1角度角的正弦值
// width: sin(1grad); //1百分度角的正弦值
// 反正弦值
// width: asin(-0.84147098);
// width: asin(0);
// width: asin(2);
// width: cos(1); //1弧度角的余弦值
// width: cos(1deg);//1角度角的余弦值
// width: cos(1grad); //1百分度角的余弦值
// width: tan(1); //1弧度角的正切值
// width: tan(1deg);//1角度角的正切值
// width: tan(1grad); //1百分度角的正切值
// PI
// width: pi();
// 乘方运算
// width: pow(2px,2);
// width: pow(3px,2);
// width: pow(4px,2);
// width: pow(25px,0.5);
// mod()取余
// width: mod(3px,2);
width: min(3px,2px,1px);
width: max(3px,2px,1px);
}
/*编译成*/
div {
width: 1px;
width: 3px;
}
15.4 类型函数
- isnumber() 是否数字
- isstring() 是否字符串
- iscolor() 是否颜色值
- iskeyword() 是否关键字
- isurl() 是否url地址
- ispixel() 是否带像素长度单位的数字
- isem() 是否带em长度单位的数字
- ispercentage() 是否带百分比单位的数字
- isunit() 是否带指定单位的数字
//如果一个值是一个数字,返回'真(true)',否则返回'假(false)'.
//.m(@x) when (isnumber(@x)) {
// x:@x
//}
//div{
//.m(123);
//.m(ABC);
//}
//如果一个值是一个字符串,返回'真(true)',否则返回'假(false)'.
//.m(@x) when (isstring(@x)) {
// x:@x
//}
//div{
//.m(123);
//.m("ABC");
//}
//如果一个值是一个颜色,返回'真(true)',否则返回'假(false)'.
//.m(@x) when (iscolor(@x)) {
// x:@x
//}
//div{
// .m(123);
// .m("ABC");
// .m(red);
//}
//如果一个值是一个关键字,返回'真(true)',否则返回'假(false)'.
//.m(@x) when (iskeyword(@x)) {
// x:@x
//}
//div{
// .m(123);
// .m("ABC");
// .m(red);
// .m(ABC);
//}
//如果一个值是一个url地址,返回'真(true)',否则返回'假(false)'.
//.m(@x) when (isurl(@x)) {
// x:@x
//}
//div{
// .m(123);
// .m("ABC");
// .m(red);
// .m(ABC);
// .m(url(arr.jpg));
//}
//如果一个值是带像素长度单位的数字,返回'真(true)',否则返回'假(false)'.
//.m(@x) when (ispixel(@x)) {
// x:@x
//}
//div{
// .m(123);
// .m("ABC");
// .m(red);
// .m(ABC);
// .m(url(arr.jpg));
// .m(220px);
// .m(220cm);
//}
//如果一个值是带em长度单位的数字,返回'真(true)',否则返回'假(false)'.
//.m(@x) when (isem(@x)) {
// x:@x
//}
//div{
// .m(123);
// .m("ABC");
// .m(red);
// .m(ABC);
// .m(url(arr.jpg));
// .m(220px);
// .m(240em);
//}
//如果一个值是带百分比单位的数字,返回'真(true)',否则返回'假(false)'.
//.m(@x) when (ispercentage(@x)) {
// x:@x
//}
//div{
// .m(123);
// .m("ABC");
// .m(red);
// .m(ABC);
// .m(url(arr.jpg));
// .m(220px);
// .m(240em);
// .m(260%);
//}
// 如果一个值是带指定单位的数字,返回'真(true)',否则返回'假(false)'.
.m(@x) when (isunit(@x,em)) {
x: @x;
}
div {
.m(123);
.m(220px);
.m(240em);
.m(280em);
.m(290em);
.m(260%);
}
/*编译成*/
div {
x: 240em;
x: 280em;
x: 290em;
}
15.5 颜色值定义函数
- rgb()
- 通过十进制红色,绿色,蓝色三种值(RGB)创建不透明的颜色对象
- rgba()
- 通过十进制红色,绿色,蓝色,以及alpha四种值(RGBA)创建带alpha透明的颜色对象
- argb()
- 创建格式为#AARRGGBB 的十六进制(hex representation)颜色
- hsl()
- 通过色相(hue),饱和度(saturation),亮度(lightness),三种值(HSL)创建不透明的颜色对象
- hsla()
- 通过色相(hue),饱和度(saturation),亮度(lightness),以及alpha四种值(HSLA)创建透明的颜色对象
- hsv()
- 通过色相(hue),饱和度(saturation),色调(value)三种值(HSV)创建不透明的颜色对象
- hsva()
- 通过色相(hue),饱和度(saturation),色调(value),以及alpha 四种值(HSVA)创建透明的颜色对象
//通过十进制红色,绿色,蓝色三种值 (RGB) 创建不透明的颜色对象。
div {
background: rgb(255,0,0);
background: rgb(100%,0%,0%);
}
//通过十进制红色,绿色,蓝色,以及 alpha 四种值 (RGBA) 创建带alpha透明的颜色对象。
div {
background: rgba(255,0,0,0.5);
background: rgba(100%,0%,0%,0.5);
}
//创建格式为 #AARRGGBB 的十六进制 (hex representation) 颜色 (注意不是 #RRGGBBAA !)。
div {
background: argb(rgba(255,0,0,0.5));
background: argb(rgba(100%,0%,0%,0.5));
}
//通过色相 (hue),饱和度 (saturation),亮度 (lightness) 三种值 (HSL) 创建不透明的颜色对象。
div {
background: hsl(90,100%,50%);
}
//通过色相 (hue),饱和度 (saturation),亮度 (lightness),以及 alpha 四种值 (HSLA) 创建透明的颜色对象。
div {
background: hsla(90,100%,50%,0.5);
}
//通过色相 (hue),饱和度 (saturation),色调 (value) 三种值 (HSV) 创建不透明的颜色对象。
div {
background: hsv(90,100%,50%);
}
//通过色相 (hue),饱和度 (saturation),色调 (value),以及 alpha 四种值 (HSVA) 创建透明的颜色对象。
div {
background: hsva(90,100%,50%,8%);
}
15.6 颜色值通道提取函数
- hue()
- 从HSL色彩空间中提取颜色对象的色相值
- saturation()
- 从HSL色彩空间中提取颜色对象的饱和度值
- lightness()
- 从HSL色彩空间中提取颜色对象的亮度值
- hsvhue()
- 从HSV色彩空间中提取颜色对象的色相值
- hsvsaturation()
- 从HSV色彩空间中提取颜色对象的饱和度值
- hsvvalue()
- 从色彩空间中提取颜色对象的色调值
- red()
- 提取颜色对象的红色值
- green()
- 提取颜色对象的绿色值
- blue()
- 提取颜色对象的蓝色值
- alpha()
- 提取颜色对象的透明值
- luma()
- 计算颜色对象luma的值(亮度的百分比表示法)
- luminance()
- 计算没有伽玛校正的亮度值
div {
// hue()色相值
z-index: hue(hsl(90, 100%, 50%)); //90
// saturation()饱和度
z-index: saturation(hsl(90, 80%, 50%)); //80%
// lightness()亮度值
z-index: lightness(hsl(90, 100%, 100%)); //100%
// hsv(90,100%,50%)
z-index: hsvhue(hsv(90, 100%, 50%)); //函数90
z-index: hsvsaturation(hsv(90, 100%, 50%)); //函数100%
z-index: hsvvalue(hsv(90, 100%, 50%)); //函数50%
// rgba(29,199,29,80%)
// 提取红色
z-index: red(rgba(29, 199, 150, 80%)); //29
// 提取绿色
z-index: green(rgba(29, 199, 150, 80%)); //199
// 提取蓝色
z-index: blue(rgba(29, 199, 150, 80%)); //29
// 提取透明度
z-index: alpha(rgba(29, 199, 150, 80%)); //0.8
// 计算颜色对象luma的值(亮度的百分比表示法)。
z-index: luma(rgb(100, 200, 30));
// 计算没有伽玛校正的亮度值
z-index: luminance(rgb(100, 200, 30));
}
15.7 颜色值运算函数
- saturate()
- 增加一定数值的颜色饱和度
- desaturate()
- 降低一定数值的颜色饱和度
- lighten()
- 增加一定数值的颜色亮度
- darken()
- 降低一定数值的颜色亮度
- fadein()
- 降低颜色的透明度(或增加不透明度),令其更不透明
- fadeout()
- 增加颜色的透明度(或降低不透明度),令其更透明
- fade()
- 给颜色(包括不透明的颜色)设定一定数值的透明度
- spin()
- 任意方向旋转颜色的色相角度(hue angle)
- mix()
- 根据比例混合两种颜色,包括计算不透明度
- greyscale()
- 完全移除颜色的饱和度,与desaturate(@color, 100%)函数效果相同
- contrast()
- 选择两种颜色相比较,得出哪种颜色的对比度最大就倾向于对比度最大的颜色
body {
c: hsl(90, 80%, 50%);
c: saturate(hsl(90, 80%, 50%), 20%);
}
div {
width: 90px;
height: 50px;
font-size: 16px;
text-align: center;
}
.ys1 {
background: hsl(90, 80%, 50%);
}
.ys2 {
background: saturate(hsl(90, 80%, 50%), 20%);
}
.ys3 {
background: desaturate(hsl(90, 80%, 50%), 20%);
}
.ys4 {
background: lighten(hsl(90, 80%, 50%), 20%);
}
.ys5 {
background: darken(hsl(90, 80%, 50%), 20%);
}
.ys66 {
background: hsla(90, 80%, 50%, 50%);
}
.ys6 {
background: fadein(hsla(90, 80%, 50%, 50%), 50%);
}
.ys7 {
background: fadeout(hsla(90, 80%, 50%, 50%), 40%);
}
.ys8 {
background: hsl(90, 80%, 50%);
}
.ys9 {
background: fade(hsl(90, 80%, 50%), 40%);
}
.ys10 {
background: hsl(10, 90%, 50%);
}
.ys11 {
background: spin(hsl(0, 90%, 50%), 360);
}
.ys12 {
background: rgba(100, 50, 20, 0.5);
}
.ys13 {
background: rgba(0, 150, 120, 0.2);
}
.ys14 {
background: mix(rgba(100, 50, 20, 0.5), rgba(0, 150, 120, 0.2));
}
.ys15 {
background: hsl(90, 100%, 50%);
}
.ys16 {
background: contrast(hsl(90, 100%, 50%), #000000, #ffffff, 100%);
}
/*编译成*/
body {
c: #80e619;
c: #80ff00;
}
div {
width: 90px;
height: 50px;
font-size: 16px;
text-align: center;
}
.ys1 {
background: #80e619;
}
.ys2 {
background: #80ff00;
}
.ys3 {
background: #80cc33;
}
.ys4 {
background: #b3f075;
}
.ys5 {
background: #4d8a0f;
}
.ys66 {
background: rgba(128, 230, 25, 0.5);
}
.ys6 {
background: #80e619;
}
.ys7 {
background: rgba(128, 230, 25, 0.1);
}
.ys8 {
background: #80e619;
}
.ys9 {
background: rgba(128, 230, 25, 0.4);
}
.ys10 {
background: #f2330d;
}
.ys11 {
background: #f20d0d;
}
.ys12 {
background: rgba(100, 50, 20, 0.5);
}
.ys13 {
background: rgba(0, 150, 120, 0.2);
}
.ys14 {
background: rgba(65, 85, 55, 0.35);
}
.ys15 {
background: #80ff00;
}
.ys16 {
background: #ffffff;
}
15.8 颜色值混合函数
- multiply()
- 分别将两种颜色的红绿蓝(RGB)三种值做乘法运算,然后再除以255,输出结果是更深的颜色。(注:对应Photoshop中的“变暗/正片叠底”)
- screen()
- 与multiply()函数效果相反,输出结果是更亮的颜色。(注:对应Photoshop中的“变亮/滤色”)
- overlay()
- 结合multiply()与screen()两个函数的效果,令浅的颜色变得更浅,深的颜色变得更深。(注:对应Photoshop中的“叠加”)注意:输出结果由第一个颜色参数决定。
- softlight()
- 与overlay()函数效果相似,只是当纯黑色或纯白色作为参数时输出效果不会是纯黑色或纯白色。(注:对应Photoshop中的“柔光”)
- hardlight()
- 与overlay()函数效果相似,不过由第二个颜色参数决定输出颜色的亮度或黑度,而不是第一个颜色参数决定(注:对应Photoshop中的“强光/亮光/线性光/点光”)
- difference()
- 从第一个颜色值中减去第二个(分别计算RGB三种颜色值),输出结果是更深的颜色(注:对应Photoshop中的“差值/排除”)
- exclusion()
- 效果与difference()函数效果相似,只是输出结果差别更小(lower contrast)(注:对应Photoshop中的“差值/排除”)
- average()
- 分别对RGB的三种颜色值取平均值,然后输出结果
- negation()
- 与difference()函数效果相反,输出结果是更亮的颜色。请注意:效果相反不代表做加法运算
body {
c: hsl(90, 80%, 50%);
c: saturate(hsl(90, 80%, 50%), 20%);
}
div {
width: 90px;
height: 50px;
line-height: 50px;
color: #fff;
font-size: 16px;
text-align: center;
}
//.ys1{
// background:#ff6600 ;
//}
//.ys2{
// background: #000000;
//}
//.ys3{
// background: multiply(#ff6600,#000000);
//}
//.ys4{
// background:#ff6600 ;
//}
//.ys5{
// background: #333;
//}
//.ys6{
// background: multiply(#ff6600,#333);
//}
//.ys7{
// background:#ff6600 ;
//}
//.ys8{
// background: #ffffff;
//}
//.ys9{
// background: multiply(#ff6600,#fff);
//}
//.ys1{
// background:#ff6600 ;
//}
//.ys2{
// background: #000000;
//}
//.ys3{
// background: screen(#ff6600,#000000);
//}
//.ys4{
// background:#ff6600 ;
//}
//.ys5{
// background: #333;
//}
//.ys6{
// background: screen(#ff6600,#333);
//}
//.ys7{
// background:#ff6600 ;
//}
//.ys8{
// background: #ffffff;
//}
//.ys9{
// background: screen(#ff6600,#fff);
//}
//.ys1{
// background:#ff6600 ;
//}
//.ys2{
// background: #000000;
//}
//.ys3{
// background: overlay(#ff6600,#000000);
//}
//.ys4{
// background:#ff6600 ;
//}
//.ys5{
// background: #333;
//}
//.ys6{
// background: overlay(#ff6600,#333);
//}
//.ys7{
// background:#ff6600 ;
//}
//.ys8{
// background: #ffffff;
//}
//.ys9{
// background: overlay(#ff6600,#fff);
//}
//.ys1{
// background:#ff6600 ;
//}
//.ys2{
// background: #000000;
//}
//.ys3{
// background: softlight(#ff6600,#000000);
//}
//.ys4{
// background:#ff6600 ;
//}
//.ys5{
// background: #333;
//}
//.ys6{
// background: softlight(#ff6600,#333);
//}
//.ys7{
// background:#ff6600 ;
//}
//.ys8{
// background: #ffffff;
//}
//.ys9{
// background: softlight(#ff6600,#fff);
//}
//.ys1{
// background:#ff6600 ;
//}
//.ys2{
// background: #000000;
//}
//.ys3{
// background: hardlight(#ff6600,#000000);
//}
//.ys4{
// background:#ff6600 ;
//}
//.ys5{
// background: #333;
//}
//.ys6{
// background: hardlight(#ff6600,#333);
//}
//.ys7{
// background:#ff6600 ;
//}
//.ys8{
// background: #ffffff;
//}
//.ys9{
// background: hardlight(#ff6600,#fff);
//}
//.ys1{
// background:#ff6600 ;
//}
//.ys2{
// background: #000000;
//}
//.ys3{
// background: difference(#ff6600,#000000);
//}
//.ys4{
// background:#ff6600 ;
//}
//.ys5{
// background: #333;
//}
//.ys6{
// background: difference(#ff6600,#333);
//}
//.ys7{
// background:#ff6600 ;
//}
//.ys8{
// background: #ffffff;
//}
//.ys9{
// background: difference(#ff6600,#fff);
//}
//
//.ys1{
// background:#ff6600 ;
//}
//.ys2{
// background: #000000;
//}
//.ys3{
// background: exclusion(#ff6600,#000000);
//}
//.ys4{
// background:#ff6600 ;
//}
//.ys5{
// background: #333;
//}
//.ys6{
// background: exclusion(#ff6600,#333);
//}
//.ys7{
// background:#ff6600 ;
//}
//.ys8{
// background: #ffffff;
//}
//.ys9{
// background: exclusion(#ff6600,#fff);
//}
//
//.ys1{
// background:#ff6600 ;
//}
//.ys2{
// background: #000000;
//}
//.ys3{
// background: average(#ff6600,#000000);
//}
//.ys4{
// background:#ff6600 ;
//}
//.ys5{
// background: #333;
//}
//.ys6{
// background: average(#ff6600,#333);
//}
//.ys7{
// background:#ff6600 ;
//}
//.ys8{
// background: #ffffff;
//}
//.ys9{
// background: average(#ff6600,#fff);
//}
.ys1 {
background: #ff6600;
}
.ys2 {
background: #000000;
}
.ys3 {
background: negation(#ff6600, #000000);
}
.ys4 {
background: #ff6600;
}
.ys5 {
background: #333;
}
.ys6 {
background: negation(#ff6600, #333);
}
.ys7 {
background: #ff6600;
}
.ys8 {
background: #ffffff;
}
.ys9 {
background: negation(#ff6600, #fff);
}
/*编译成*/
body {
c: #80e619;
c: #80ff00;
}
div {
width: 90px;
height: 50px;
line-height: 50px;
color: #fff;
font-size: 16px;
text-align: center;
}
.ys1 {
background: #ff6600;
}
.ys2 {
background: #000000;
}
.ys3 {
background: #ff6600;
}
.ys4 {
background: #ff6600;
}
.ys5 {
background: #333;
}
.ys6 {
background: #cc9933;
}
.ys7 {
background: #ff6600;
}
.ys8 {
background: #ffffff;
}
.ys9 {
background: #0099ff;
}
16.结语
- 更多文章可访问我的github