知识体系

1、认识less

2、使用less

3、变量（ variables  ）

4、混合 （ mixins  ）

5、嵌套规则 （ nested-rules  ）

6、运算（operations）

7、函数（functions）

8、命名空间

9、作用域

10、引入（importing）

11、关键字（ important  ）

12、条件表达式

13、循环（loop）

14、合并属性

15、函数库（function）

详情
初见less
  • 1、什么是less
  • less是css预编译器，可以扩展css语言，添加功能如变量、混合、函数和许多其他技术。
  • 让css更具维护性、主题性、扩展性。
  • 2、less官方网站
  • 英文站 http://www.lesscss.org
  • 中文站 http://www.lesscss.net
  • 3、less中的注释
  • //    不会被编译到css文件中
  • /**/ 会编译到css文件中
  • 4、less的第一次使用
  • ul{
  •    background:#ff0;
  •    li{
  •       background:#f0f;
  •       a{
  •          background:#0ff;
  •       }
  •    }
  • }
正确使用less
  • 如何使用less
  • less只有被编译后才能被浏览器识别使用。
  • less头部最好加上 @charset("utf-8") 。
  • less编译工具
  • Koala     http://www.koala-app.com
  • Winless  http://winless.org
  • CodeKit  http://incident57.com/codekit/index.html
  • 客户端调试方式
  • 先引用less文件"rel=stylesheet/less";
  • 再引用less.js文件。
  • 注意：这时不会生成css文件，编译后的样式直接会加载在页面上。
变量
  • 普通变量
  • @blue：#ff0;
  • input{
  • background: @blue;
  • }
  • 作为选择器和属性名的变量,注意属性名必须为可用的才行。widths 这个就不能通过编译
  • @kuandu:width;
  • .@{kuandu}{
  •   @{kuandu}:150px
  • }
  • 作为URL的变量
  • @imgurl:"img/a.jpg";
  • header{
  •   background: @green url("@{imgurl}bdlogo.png");
  •   height: 500px;
  • }
  • 延迟加载
  • 变量是延迟加载的，在使用前不一定要先申明。
  • 定义多个相同名称的变量时
  • @var: 0;
  • .class {
  • @var: 1;
  • .brass {
  • @var: 2;
  • three: @var; //这是的值是3   同级别中最后一个，顺序无所谓
  • @var: 3;
  • }
  • one: @var; //这是的值是1
  • }
混合
  • 普通混合   font_hn会输出到css文件中
  • .font_hn{
  • color: red;
  • font-family: microsoft yahei；
  • }
  • h1{
  • font-size: 28px;
  • .font_hn;
  • }
  • 不带输出的混合，类名后面使用( )；font_hn不会在css文件中输出
  • .font_hn( ){
  •   color: red;
  •   font-family: microsoft yahei;
  • }
  • h1{
  •   font-size: 28px;
  •   .font_hn;
  • }
  • 带选择器的混合     &选择的是所有的父级元素
  • .my-hover-mixin {
  • &:hover {
  • border: 1px solid red;
  • }
  • }
  • button {
  • .my-hover-mixin();
  • }
  • 带参数的混合
  • .border(@color){           //参数不带有默认值
  •   border: 1px solid @color;
  • }
  • h1{
  •   &:hover{
  •     .border(green);    //由于没有默认值，这里必须传参，否则报错
  •   }
  • }
  • 带参数并且有默认值的混合
  • .border_you(@color:red){
  •   border: 1px solid @color;
  • }
  • h1{
  •   &:hover{
  •     .border_you( ); //不传参的情况下，使用的是默认red
  •   }
  • }
  • 带参数并且有默认值的混合
  • 如果传参的括号里面全部都是以“，”分割，那么会依次传给各个参数值，
  • 如果传参的括号里面既有“，”又有“；”那么，会把“；”前面的看作一个整体，传给一个参数值。
  • .mixin(@color; @padding:xxx; @margin: 2) {
  •   color-3: @color;
  •   padding-3: @padding;
  •   margin: @margin @margin @margin @margin;
  • }
  • .divmaizi{
  •   .mixin(red;)
  • }
  • 定义多个具有相同名称和参数数量的混合
  • .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);
  • }
  • 命名参数
  • .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;)
  • }
  • arguments
  • .border(@x:solid,@c:red){
  • border: 21px @arguments;
  • }
  • .div1{
  • .border(solid);
  • }
  • 匹配模式
  • .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;
  • }
  • 混合的返回值
  • .average(@x, @y) {
  • @average: ((@x + @y) / 2);
  • @he:(@x + @y);
  • }
  • div {
  • .average(16px, 50px);
  • padding: @average;
  • margin: @he;
  • }
嵌套规则
 什么是嵌套规则
模仿html结构，让css代码更加简洁明了清晰。
header{ 
  width: 960px; 
  h1{ 
    font-size: 18px; 
    color: green; 
  } 
  .logo{ 
    width: 300px; 
    height: 150px; 
    background: darkred; 
    &:hover{ 
      background: forestgreen; 
    } 
  } 
}
& 说明：表示当前选择器的所有父选择器。
& 插入到选择器之后，就会将当前选择器插入到父选择器之前。  
.a{ 
  .b{ 
    .c&{ 
      color: 123; 
    } 
  } 
} 
编译后  
.c .a .b{
      color: 123;   
}
组合生成所有可能的选择器列表
p, a, li { 
  border-top: 2px dotted #366; 
  & & { 
    border-top: 0; 
  } 
}
编译后   
p p,
p a,
p li,
a p,
a a,
a li,
li p,
li a,
li li{
     border-top: 0; 
}
运算
运算说明（运算符与值之间必须以空格分开，涉及优先级时以“( )”优先）
任何数值、颜色和变量都可以进行运算；
less会自动推断数值的单位，所有不必所有数值都加上单位。
.wp{
  margin: 0 auto;
  background: forestgreen;
  width: 450px + 450;
  height: 400 + 400px;
}
//涉及到优先级，使用()区分优先级
.wp{
  margin: 0 auto;
  width: (550 - 50)*2 + 24px;
  height: 400 + 400px;
  background:#ff0000 - 55; //#000021 c8c8c8
}
//rgb模式他的值是 0~255 ，当你的值超过255 ，那么就会以255进行相加操作
函数
 Less提供了许多用于转换颜色，处理字符串和进行算术运算的函数。
.bgcolor{
  background :rgb(0,133,0) ;
   z-index: blue(#050506); 
}   
编译后
.bgcolor{
   background :#008500; 
   z-index: 6;   
}    
命名空间
什么是命名空间
在less中，我们需要将一些混合组合在一起，可以通过嵌套多层id或者class实现。
#bgcolor(){
  background: #ffffff;
  .a{
    color: #888888;
    &:hover{
      color: #ff6600;
    }
    .b{
      background: #ff0000;
    }
  }
}
.bgcolor1{
  background: #fdfee0;
  #bgcolor>.a;
}
注意：">"可以省略不写
作用域
什么是作用域
less中的作用域与编程语言中的作用域概念非常相似，首先会在局部查找变量和混合。如果没找到，编译器就会在父作用域中查找，依次类推。
@clolor:#ffffff;
.bgcolor{
  width: 50px;
  a{
    color: @clolor;    //#ff0000
  }
}
@clolor:#ff0000;
引入
什么是引入
你可以引入一个或多个.less文件，然后这个文件中的所有变量都可以在当前的less项目中使用！
@import "main.less";
@import (reference) "main.less"; //引用LESS文件，但是不输出
@import (inline) "main.less"; //引用LESS文件，但是不进行操作
@import (once) "main.less"; //引用LESS文件，但是不进行操作
@import (less) "index.css"; //无论是什么格式的文件，都把他作为LESS文件操作
@import (css) "main.less"; //无论是什么格式的文件，都把他作为CSS文件操作
@import (multiple) "main.less"; //multiple，允许引入多次相同文件名的文件
@import (multiple) "main.less"; //multiple，允许引入多次相同文件名的文件
@import (multiple) "main.less"; //multiple，允许引入多次相同文件名的文件
.centen{
  width:@wp;
  .color;
}
注意：引用.css文件，会被原样输出到编译文件中！
关键字
什么是 !important关键字
在调用的混合集后面追加 !important 关键字，可以使混合集里面的所有属性都继承!important。
.foo (@bg: #f5f5f5, @color: #900) {
  background: @bg;
  color: @color;
  font-size: 16px;
  font-weight: 900;
}
 
.unimportant {
  .foo();
}
.important {
  .foo() !important;
}
注意：会提升所有样式的权重，尽量少用，不推荐使用。
条件表达式
 >,>=,=,<=,<,true

.mixin (@a) when (lightness(@a) >= 50%) {   //255/2=127.5
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}
.class1 { .mixin(#7e7e7e) }  //221  > 127.5  >50%  background-color: black;  7e7e7e  =  126
.class2 { .mixin(#808080) }  //85 <127.5  <50%   background-color: white;  808080 = 128
类型检查函数
可以基于值的类型来匹配函数
      iscolor
      isnumber
      isstring
      iskeyword
      isurl
 
.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) }  //background-color: black;
.class2 { .mixin(123) }  //background-color: white;
 
单位检查函数
可以基于值的类型来匹配函数
      ispixel

ispercentage
      isem

      isunit
 
.mixin (@a) when (ispixel(@a)) {
  background-color: black;
}
.mixin (@a) when (ispercentage(@a) ) {
  background-color: white;
}
.mixin (@a) {
  width: @a;
}
.class1 { .mixin(960px) }  //background-color: black; width:960px
.class2 { .mixin(95%) }  //background-color: white;width:95%
循环
在less中，混合可以调用它自身，这样，当一个混合递归调用自己，再结合Guard表达式和模式匹配这两个特性，就可以写出循环结构.
.loop(@counter) when (@counter > 0) {
  .loop((@counter - 1));    // 递归调用自身 4 3 2 1 0
  width: (10px * @counter); // 每次调用时产生的样式代码30px 20px  10px
}
 
div {
  .loop(3); // 调用循环
}
 
.loop(@counter) when (@counter > 0) {
  h@{counter}{
    padding: (10px * @counter);
  }// 每次调用时产生的样式代码
  .loop((@counter - 1));    // 递归调用自身
}
 
div {
  .loop(6); // 调用循环
}
合并属性
"+"逗号分隔所合并的属性值
在需要合并的属性的：的前面加上+就可以完成合并，合并以，分割属性
 
//+ 合并以后，以逗号分割属性值
.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()
}
//background+_:#f60 url("/sss.jod");
 
注意：当前使用的是哪个，就以这个想加。
 
 
 
函数库
 
1、其他函数
color() 函数 解析颜色，将代表颜色的字符串转换为颜色值
color(“#f60”)
convert()函数 将数字从一种类型转换到另一种类型
长度单位：m、cm、mm、in（英寸）、pt（磅）、px、pc（派卡）
时间单位：s、ms
角度单位：rad（弧度）、deg（度）、grad（梯度）、trun（圆）
convert(1s,mm) convert(20cm,px)
data-uri()函数 将一个资源内嵌到样式文件，如果开启了ieCompat选项，而且资源文件的体积过大，或者是在浏览器中使用，则会使用url进行回退。如果没有直达MIME，则node.js会使用MIME包来决定正确的MIME。
background:data-uri("a.jpg");
编译后：background:url(data:image/jpeg:base64,/9j/...........) 变成base64位的编码
default()函数 只能边界条件中使用，没有匹配到定义其他函数（mixin）的时候返回true，否则返回false。
.x(1) { x:11 }
.x(2) { y:22 }
.x(@x) when (default()) {z:@x} //当@x != 1 也 !=2 时，使用默认的
.div1{
.x(1) //x:11
}
.div2{
.x(123) //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;
}
unit()函数 移除或者改变属性值的单位
div{
width: unit(100px); //100
width: unit(100px,cm); //100cm
width: unit(100,px); //100px
}
 
2、字符串函数
escape()函数 将输入字符串的url特殊字符进行编码处理
不转义的编码：, / ? @ & + ' ~ ! $
转义的编码：# ^ ) ( } { | ; > < : ] [ =
d:escape('#, ^, (, ), {, }, |, :, >, <, ;, ], [ , =');
e()函数 css转义 用~“值”符号代替。
filter: e("ms:alwaysHasItsOwnSyntax.For.Stuff()");
filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
width: calc(960px-100px); //css3新增属性 能让你给元素做计算
width: calc(~'960px-100px'); //原样输出，让浏览器自己运算
%()函数 函数%(string,arguments......) 格式化一个字符串。
font-family: %( "%a %a" , "Microsoft", "YaHei");
编译结果: font-family: ""Microsoft" "YaHei"";
font-family: %( "%A %a" , "Microsoft", "YaHei");
编译结果: font-family: "%22Microsoft%22 "YaHei"";
font-family: %( "%s %s" , F60, "YaHei");
编译结果: font-family: %( "%s %s" , "Microsoft", "YaHei");
font-family: "Microsoft YaHei";
 
replace()函数 用另一个字符串替换文本。
content: replace("Hello, maizi", "maizi", "LESS");
编译结果：content:"Hello, LESS";
content: replace("Hello, A", "A", "B");
编译结果：content:"Hello, B";
3、长度相关函数
length() 返回集合中值的个数
n:length(1px solid #0080ff);
编译后：n:3
extract() 返回集合中指定索引的值
@list: "A", "B", "C", "D";
n:extract(@list,4) // n:"D";
 
 
4、数学函数
ceil() 向上取整
floor() 向下取整
percentage() 将浮点数转换为百分比
round() 取整和四舍五入
sprt() 计算一个数的平方根，原样保持单位
abs() 计算数字的绝对值，原样保持单位
sin() 正弦函数
asin() 反正弦函数
cos() 余弦函数
acos() 反余弦函数
tan() 正切函数
atan() 反正切函数
pi() 返回π(pi)
pow() 乘方运算
mod() 取余运算
min() 最小值运算
max() 最大值运算
div{
width: ceil(2.9999999px); //3px
width: floor(2.9999999px); //2px
width:percentage( 0.5px); //将浮点数转换为百分比 50%
 
取整和四舍五入
width:4.5px ;
width:round(4.5px) ; //5px
 
width:4.4px ;
width:round(4.4px) ; //4px
 
计算一个数的平方根，原样保持单位。
width: sqrt(16px); //4px
width: sqrt(9px); //3px
 
计算数字的绝对值，原样保持单位。
top: -999px;
top: abs(-999px); //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(); //3.14159265
 
乘方运算
width: pow(2px,2); //4px
width: pow(3px,2); //9px
width: pow(4px,2); //16px
width: pow(25px,0.5); //5px
 
mod()取余
width: mod(3px,2); //1px
 
width: min(3px,2px,1px); 1px
width: max(3px,2px,1px); 3px
}
 
 
5、类型函数
isnumber() 如果值是数字，返回真（true），否则返回假（false）
isstring() 如果值是一个字符串，返回真（true），否则返回假（false）
iscolor() 如果值是一个颜色，返回真（true），否则返回假（false）
iskeyword() 如果值是一个关键字，返回真（true），否则返回假（false）
isurl() 如果值是一个url地址，返回真（true），否则返回假（false）
ispixel() 如果值是带px单位的数字，返回真（true），否则返回假（false）
issem() 如果值是带em单位的数字，返回真（true），否则返回假（false）
ispercentage() 如果值是一个带%单位的数字，返回真（true），否则返回假（false）
isunit() 如果值是带指定单位的数字，返回真（true），否则返回假（false）
//如果一个值是一个数字，返回'真(true)',否则返回'假(false)'.
.m(@x) when (isnumber(@x)) {
x:@x
}
div{
.m(123); //x:123
.m(ABC);
}
 
//如果一个值是一个字符串，返回'真(true)',否则返回'假(false)'.
.m(@x) when (isstring(@x)) {
x:@x
}
div{
.m(123);
.m("ABC"); //x:"ABC"
}
 
//如果一个值是一个颜色，返回'真(true)',否则返回'假(false)'.
.m(@x) when (iscolor(@x)) {
x:@x
}
div{
.m(123);
.m(red); //x:#ff0000
}
 
//如果一个值是一个关键字，返回'真(true)',否则返回'假(false)'.
.m(@x) when (iskeyword(@x)) {
x:@x
}
div{
.m(123);
.m("ABC");
.m(red);
.m(ABC); //x:ABC
}
 
//如果一个值是一个url地址，返回'真(true)',否则返回'假(false)'.
.m(@x) when (isurl(@x)) {
x:@x
}
div{
.m(ABC);
.m(url(arr.jpg)); //x:url(arr.jpg)
}
 
//如果一个值是带像素长度单位的数字，返回'真(true)',否则返回'假(false)'.
.m(@x) when (ispixel(@x)) {
x:@x
}
div{
.m(220px); //x:220px
.m(220cm);
}
 
//如果一个值是带em长度单位的数字，返回'真(true)',否则返回'假(false)'.
.m(@x) when (isem(@x)) {
x:@x
}
div{
.m(220px);
.m(240em); //x:240em
}
 
//如果一个值是带百分比单位的数字，返回'真(true)',否则返回'假(false)'.
.m(@x) when (ispercentage(@x)) {
x:@x
}
div{
.m(220px);
.m(240em);
.m(260%); //x:260%
}
 
//如果一个值是带指定单位的数字，返回'真(true)',否则返回'假(false)'.
.m(@x) when (isunit(@x,em)) {
x:@x
}
div{
.m(123);
.m(220px);
.m(240em); //x:240em
.m(280em); //x:280em
.m(290em); //x:290em
.m(260%);
}
 
6、颜色值定义函数
rgb() 通过十进制红、绿、蓝（RGB）创建不透明的颜色对象
rgba() 通过十进制红、绿、蓝（RGB），以及alpha四种值（RGBA）创建带alpha透明的颜色对象
argb() 创建格式为#AARRGGBB的十六进制颜色 ，用于iE滤镜，.net和安卓开发
hls() 通过色相，饱和度，亮度（HLS）三种值创建不透明的颜色对象
hsla() 通过色相，饱和度，亮度，以及alpha四种值（HLSA）创建带alpha透明的颜色对象
hsv() 通过色相，饱和度，色调（HSV）创建不透明的颜色对象
hsva() 通过色相，饱和度，亮度，以及alpha四种值（HSVA）创建带alpha透明的颜色对象
//通过十进制红色，绿色，蓝色三种值 (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%);
}
 
 
7、颜色值通道提取函数
hue() //从HSL色彩空间中提取色相值
saturation() //从HSL色彩空间中提取饱和度
lightness() //从HSL色彩空间中提取亮度值
hsvhue() //从HSV色彩空间中提取色相值
hsvsaturation() //从HSV色彩空间中提取饱和度值
hsvvalue() //从HSV色彩空间中提取色调值
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));
}
 
8、颜色值运算函数
saturate() 增加一定数值的颜色饱和度
desaturate() 降低一定数值的颜色饱和度
lighten() 增加一定数值的颜色亮度
darken() 降低一定数值的颜色亮度
fadein() 降低颜色的透明度（或增加不透明度），令其更不透明
fadeout() 增加颜色的透明度（或降低不透明度），令其更透明
fade() 给颜色（包括不透明的颜色）设定一定数值的透明度
spin() 任意方向旋转颜色的色相角度
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%)
}
 
9、颜色值混合函数
multiply() 分别将两种颜色的红绿蓝三种值做乘法运算，然后再除以255，输出结果更深的颜色。（对应ps中的“变暗/正片叠底”）
screen() 与multiply函数效果相反，输出结果更亮的颜色。（对应ps中“变亮/滤色”）
overlay() 结合multiply与screen两个函数的效果，令浅的颜色更浅，深的颜色更深。（对应ps中的叠加）。输出结果由第一个颜色参数决定。
softlight() 与overlay函数效果相似，只是当纯黑色或纯白色作为参数时输出结果不会是纯黑色或纯白色。（对应ps中的“柔光”）
hardlight() 与overlay函数效果相似，不过由第二个颜色参数决定输出颜色的亮度或黑度，而不是第一个颜色参数决定。（对应ps中“强光/亮光/线性光/点光”）
difference() 从第一个颜色值中减去第二个（分别计算RGB三种颜色值），输出结果更深的颜色。（对应ps中“差值/排除”）
exclusion() 效果与difference函数效果相似，只是输出结果差别更小。（对应ps中“差值/排除”）
average() 分别对RGB三个颜色值取平均值，然后输出结果。
negation() 与difference函数效果相反，输出结果是更亮的颜色。（效果相反不代表做加法运算）
<div class="ys1">ff6600</div>
<div class="ys2">000000</div>
<div class="ys3">000000</div>
<div class="ys4">ff6600</div>
<div class="ys5">333333</div>
<div class="ys6">331400</div>
<div class="ys7">ff6600</div>
<div class="ys8">ffffff</div>
<div class="ys9">ff6600</div>
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);
}
 
 
 
 
 
 
 
 
 
 

LESS知识总结的更多相关文章

  1. 你必须知道的EF知识和经验

    注意:以下内容如果没有特别申明,默认使用的EF6.0版本,code first模式. 推荐MiniProfiler插件 工欲善其事,必先利其器. 我们使用EF和在很大程度提高了开发速度,不过随之带来的 ...

  2. MySQL高级知识- MySQL的架构介绍

    [TOC] 1.MySQL 简介 概述 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB公司开发,目前属于Oracle公司. MySQL是一种关联数据库管理系统,将数据保存在不同的表中,而 ...

  3. 学点HTTP知识

    不学无术 又一次感觉到不学无术,被人一问Http知识尽然一点也没答上来,丢人丢到家了啊.平时也看许多的技术文章,为什么到了关键时刻就答不上来呢? 确实发现一个问题,光看是没有用的,需要实践.看别人说的 ...

  4. java中的字符串相关知识整理

    字符串为什么这么重要 写了多年java的开发应该对String不陌生,但是我却越发觉得它陌生.每学一门编程语言就会与字符串这个关键词打不少交道.看来它真的很重要. 字符串就是一系列的字符组合的串,如果 ...

  5. [C#] C# 知识回顾 - 你真的懂异常（Exception）吗？

    你真的懂异常(Exception)吗? 目录 异常介绍 异常的特点 怎样使用异常 处理异常的 try-catch-finally 捕获异常的 Catch 块 释放资源的 Finally 块 一.异常介 ...

  6. [C#] C# 知识回顾 - 学会处理异常

    学会处理异常 你可以使用 try 块来对你觉得可能会出现异常的代码进行分区. 其中,与之关联的 catch 块可用于处理任何异常情况. 一个包含代码的 finally 块,无论 try 块中是否在运行 ...

  7. [C#] C# 知识回顾 - 学会使用异常

    学会使用异常 在 C# 中,程序中在运行时出现的错误,会不断在程序中进行传播,这种机制称为“异常”. 异常通常由错误的代码引发,并由能够更正错误的代码进行 catch. 异常可由 .NET 的 CLR ...

  8. [C#] C# 知识回顾 - 异常介绍

    异常介绍 我们平时在写程序时,无意中(或技术不够),而导致程序运行时出现意外(或异常),对于这个问题, C# 有专门的异常处理程序. 异常处理所涉及到的关键字有 try.catch 和 finally ...

  9. [.NET] C# 知识回顾 - Event 事件

    C# 知识回顾 - Event 事件 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/6060297.html 序 昨天,通过<C# 知识回顾 - ...

  10. [.NET] C# 知识回顾 - 事件入门

    C# 知识回顾 - 事件入门 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/6057301.html 序 之前通过<C# 知识回顾 - 委托 de ...

随机推荐

  1. 拜托！面试请不要再问我Spring Cloud底层原理

    概述 毫无疑问,Spring Cloud是目前微服务架构领域的翘楚,无数的书籍博客都在讲解这个技术.不过大多数讲解还停留在对Spring Cloud功能使用的层面,其底层的很多原理,很多人可能并不知晓 ...

  2. mybatis 中 foreach collection的三种用法

    foreach的主要用在构建in条件中,它可以在SQL语句中进行迭代一个集合. foreach元素的属性主要有 item,index,collection,open,separator,close. ...

  3. 进程与线程的通信机制----Queue

    进程运行时候变量是隔离的,线程间共享全局变量. 进程: from multiprocessing import Process from threading import Thread def get ...

  4. Neutron ：默认通过 dnsmasq 实现 DHCP 功能----Namespace

    Neutron 提供 DHCP 服务的组件是 DHCP agent. DHCP agent 在网络节点运行上,默认通过 dnsmasq 实现 DHCP 功能.   配置 DHCP agent DHCP ...

  5. 软件工程(GZSD2015) 第三次作业

    时间: 2015/4/17-2015/4/23 基本要求: 在之前编写的四则运算程序基础之上做如下改进: 请参照教材Page57:4.2-4.3节中内容,修改原程序,使之符合 "代码风格和设 ...

  6. window.onload 与 $(document).ready() 的区别

    以浏览器装载文档为例,在页面加载完毕后,浏览器会通过 JavaScript 为 DOM 元素添加事件.在常规的 JavaScript 代码中,通常使用 window.onload 方法 ,而在 jQu ...

  7. Ajax跨域请求，无法传递及接收cookie信息

    最近在做一个系统遇到一个问题,在网上找个一个和我遇到相同问题的(原文地址:https://www.cnblogs.com/helloyy/p/6109665.html)按照他的步骤还是没有解决,继续查 ...

  8. 一键分享代码（提供能分享到QQ空间、新浪微博、人人网等的分享功能）

    <html> <head></head> <body> <div class="xl_2"> <span styl ...

  9. @Autowired 基本介绍，有待丰富

    今天做项目对于@Autowired理解有点错误:过两天再来看看 转自:https://www.cnblogs.com/szlbm/p/5512931.html 什么是注解 传统的Spring做法是使用 ...

  10. 【数学建模】数模day13-灰色系统理论I-灰色关联与GM(1,1)预测

    接下来学习灰色系统理论. 0. 什么是灰色系统? 部分信息已知而部分信息未知的系统,我们称之为灰色系统.相应的,知道全部信息的叫白色系统,完全未知的叫黑色系统. 为什么采用灰色系统理论? 在给定信息不 ...