知识体系
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 |
|
| 正确使用less |
|
| 变量 |
|
| 混合 |
|
|
嵌套规则
|
什么是嵌套规则 模仿html结构，让css代码更加简洁明了清晰。 header{ 960px; h1{ font-size: 18px; color: green; } .logo{ 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;
450px + 450;
height: 400 + 400px;
}
//涉及到优先级，使用()区分优先级
.wp{
margin: 0 auto;
(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{
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{
@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
ispercentageisem isunit
.mixin (@a) when (ispixel(@a)) {
background-color: black;
}
.mixin (@a) when (ispercentage(@a) ) {
background-color: white;
}
.mixin (@a) {
@a;
}
.class1 { .mixin(960px) } //background-color: black; 960px
.class2 { .mixin(95%) } //background-color: white;95%
|
|
循环
|
在less中，混合可以调用它自身，这样，当一个混合递归调用自己，再结合Guard表达式和模式匹配这两个特性，就可以写出循环结构.
.loop(@counter) when (@counter > 0) {
.loop((@counter - 1)); // 递归调用自身 4 3 2 1 0
(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)) {@x}
.x(@x) when not(default()) {padding:(@x/10)}
.div1{
.x(100px)
}
.div2{
.x(100cm);
color:red;
}
unit()函数 移除或者改变属性值的单位
div{
unit(100px); //100
unit(100px,cm); //100cm
unit(100,px); //100px
}
2、字符串函数
escape()函数 将输入字符串的url特殊字符进行编码处理
不转义的编码：, / ? @ & + ' ~ ! $
转义的编码：# ^ ) ( } { | ; > < : ] [ =
d:escape('#, ^, (, ), {, }, |, :, >, <, ;, ], [ , =');
e()函数 css转义 用~“值”符号代替。
filter: e("ms:alwaysHasItsOwnSyntax.For.Stuff()");
filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
calc(960px-100px); //css3新增属性 能让你给元素做计算
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{
ceil(2.9999999px); //3px
floor(2.9999999px); //2px
percentage( 0.5px); //将浮点数转换为百分比 50%
取整和四舍五入
4.5px ;
round(4.5px) ; //5px
4.4px ;
round(4.4px) ; //4px
计算一个数的平方根，原样保持单位。
sqrt(16px); //4px
sqrt(9px); //3px
计算数字的绝对值，原样保持单位。
top: -999px;
top: abs(-999px); //999px
sin(1); //1弧度角的正弦值
sin(1deg);//1角度角的正弦值
sin(1grad); //1百分度角的正弦值
反正弦值
asin(-0.84147098);
asin(0);
asin(2);
cos(1); //1弧度角的余弦值
cos(1deg);//1角度角的余弦值
cos(1grad); //1百分度角的余弦值
tan(1); //1弧度角的正切值
tan(1deg);//1角度角的正切值
tan(1grad); //1百分度角的正切值
PI
pi(); //3.14159265
乘方运算
pow(2px,2); //4px
pow(3px,2); //9px
pow(4px,2); //16px
pow(25px,0.5); //5px
mod()取余
mod(3px,2); //1px
min(3px,2px,1px); 1px
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{
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{
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);
}