LESS知識總結

本文轉載自查看原文 2016-08-05 19:10 4667 css

知識體系

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百分度角的正切值

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="ys8">ffffff</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);

}

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 less使用方法總結 Less常用語法總結最近關於less sass的新手總結 Minifilter知識總結 Docker知識總結 Java知識總結關於蘋果開發的知識總結 struts2知識總結知識圖譜的個人總結 golang知識總結