知识体系

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. 使用github 的相关博客

    基于hexo+github搭建一个独立博客     如何用Github的gh-pages分支展示自己的项目     使用git clone error: RPC failed     Git的使用-- ...

  2. 《通过C#学Proto.Actor模型》之Persistence

    Actor是有状态的,当每一步执行失败后,返回失败地方继续执行时,希望此时的状态是正确的,为了保证这一点,持久化就成了必要的环节了. Proto.Actor提供了三种方式执久化: Event Sour ...

  3. PySocks安装使用方法

    PySocks是一个基于Python的SOCKS代理客户端,它是SocksiPy的一个分支,修改了一些bug和增加了一些额外功能. ---------------------------------- ...

  4. 网站添加icon

    设置网站的icon<link rel="shortcut icon" href="./static/img/favicon.ico" >

  5. JS 设计模式二 -- 单例模式

    单例模式 概念 单例模式 就是保证一个类只有一个实例,并提供一个访问它的全局访问点. 实现方法 先判断实例是否存在,如果存在直接返回,如果不存在就创建实例后在返回,确保了一个类只有一个实例对象. va ...

  6. axios拦截器

    import axios from "axios"; axios.interceptors.response.use(response => { //=>设置响应拦截器 ...

  7. 常见的页面中两个div自适应等高CSS控制

    第一种利用dispaly:table,父级div设置dispaly:table子级div设置display: table-cell; 第一种利用dispaly:flex,父级div设置dispaly: ...

  8. ES 应用

    1. ES的不同之处:   全文检索.处理同义词.通过相关性给文档评分, 从同样的数据中生成分析与聚合数据, 实时大型批处理. 安装es与kibana 1.下载:https://www.elastic ...

  9. Python项目部署-使用Nginx部署Django项目

    一.nginx介绍及部署 二.nginx部署路飞学城代码 nginx配置安装 同样,nginx也有很多的安装方式: 1)源码安装(运维偏向:规范,便于配置管理) 2)yum,rpm安装(为了效率可以选 ...

  10. 关于Java面试

    Java基础知识复习 1. 简单讲一下Java跨平台的原理 由于操作系统(Windows.Linux)支持的指令集,不是完全一致的.就会让我们程序在不同的操作系统上执行不同的代码.Java开发了不同操 ...