1. less 簡介
- less是CSS的預編譯器,可以擴充套件CSS語言(當然也相容CSS),可以定義變數、混合、函式等等,讓CSS程式碼更易維護和擴充套件
- less與傳統寫法相比:
- less字尾為" .less "
- less中的註釋有兩種
// 這種註釋不會編譯到CSS檔案
/* 這種註釋會編譯到CSS檔案*/
div {
font-size: 14px;
}
複製程式碼
- less需要編譯成css才能使用
- 使用link標籤引用less.min.js(官網下載),注意rel="stylesheet/less"
- 這種方式不生成css檔案,直接在瀏覽器檢視
2. 巢狀規則
2.1 less的巢狀規則類似HTML的結構,使得CSS程式碼清晰
/*css 寫法*/
div {
font-size: 14px;
}
div p {
margin: 0 auto;
}
div p a {
color: red;
}
// less寫法
div {
font-size: 14px;
p {
margin: 0 auto;
a {
color: red;
}
}
}
複製程式碼
2.2 父元素選擇符 &
- 表示當前選擇器的所有父選擇器
//css寫法
.bgcolor {
background: #fff;
}
.bgcolor a {
color: #888888;
}
.bgcolor a:hover {
color: #ff6600;
}
//less寫法
.bgcolor {
background: #fff;
a {
color: #888888;
&:hover {
color: #ff6600;
}
}
}
複製程式碼
2.3 改變選擇器的順序
- 將&放到當前選擇器之後,會將當前選擇器移到最前面
- 只需記住 “& 代表當前選擇器的所有父選擇器”
ul {
li {
.color &{
background: #fff;
}
}
}
//編譯結果
.color ul li {
background: #fff;
}
複製程式碼
2.4 組合使用
- 將生成所有可能的選擇器列表
.div1, .div2 {
color: red;
& & {
border-top: 1px solid blue;
}
}
//編譯結果
.div1, .div2 {
color: red;
}
.div1 .div2,
.div2 .div1,
.div1 .div1,
.div2 .div2 {
border-top: 1px solid blue;
}
複製程式碼
3. 變數
3.1 變數的定義和使用
- 定義:@name: value; (@black: #000;)
- 使用場合分3種:
- 常規使用:@name
- 作為選擇器或屬性名:@{name}
- 作為URL:"@{name}"
/* 1.常規使用 */
@black: #000000;
div {
color: @black
}
//編譯結果
div {
color: #000000;
}
/* 2.作用選擇器和屬性名 */
@selName: container;
@proName: width;
.@{selName} {
@{proName}: 100px;
}
//編譯結果
.container {
width: 100px;
}
/* 3.作為URL */
@imgUrl: "./images/logo.png"
div {
background: #FFF url("@{imgUrl}")
}
//編譯結果
div {
background: #FFF url("./images/logo.png")
}
複製程式碼
3.2 注意事項
- 變數是延遲載入的,可以不預先宣告
div {
color: @black
}
@black: #000000;
//編譯結果
div {
color: #000000;
}
複製程式碼
- 變數的作用域
- less會從當前作用域沒找到,將往上查詢(類似js)
- 如果在某級作用域找到多個相同名稱的變數,使用最後定義的那個(類似css)
@var: 0;
.class {
@var: 1;
.brass {
@var: 2;
three: @var;
@var: 3;
}
one: @var; //類似js,無法訪問.brass內部
}
//編譯結果
.class {
one: 1;
}
.class .brass {
three: 3; //使用最後定義的 @var: 3
}
複製程式碼
4. 混合(mixins)
- 混合:一種將一系列屬性從一個規則集引入(“混入”)到另一個規則集的方式
- 混合是非常重要的一個概念,內容也偏多,可以嘗試多看幾遍!
4.1 普通混合
//混合
.border {
border-top: solid 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #eee;
.border;
}
//編譯結果
.border {
border-top: solid 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #eee;
border-top: solid 1px black;
border-bottom: solid 2px black;
}
複製程式碼
4.2 不帶引數的混合
- 從上面的程式碼發現,混合也被編譯輸出了
- 在混合名字後加上括號,編譯後不再輸出
//加括號但不帶引數的混合
.border() {
border-top: solid 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #eee;
.border; //加不加括號都可以
}
//編譯結果
#menu a {
color: #eee;
border-top: solid 1px black;
border-bottom: solid 2px black;
}
複製程式碼
4.3 帶引數的混合
//帶引數的混合
.border(@color) {
border-top: solid 1px @color;
border-bottom: solid 2px @color;
}
#menu a {
color: #eee;
.border(#fff);
}
//編譯結果
#menu a {
color: #eee;
border-top: solid 1px #ffffff;
border-bottom: solid 2px #ffffff;
}
複製程式碼
4.4 帶引數且有預設值的混合
//帶引數且有預設值的混合
.border(@color: #fff) {
border-top: solid 1px @color;
border-bottom: solid 2px @color;
}
#menu a {
color: #eee;
.border;
}
#menu p {
.border(#000);
}
//編譯結果
#menu a {
color: #eee;
border-top: solid 1px #ffffff;
border-bottom: solid 2px #ffffff;
}
#menu p {
border-top: solid 1px #000000;
border-bottom: solid 2px #000000;
}
複製程式碼
4.5 帶多個引數
- 多個引數時,引數之間可以用分號或逗號分隔
- 注意逗號分隔的是“各個引數”還是“某個列表型別的引數”
- 兩個引數,並且每個引數都是逗號分隔的列表:.name(1,2,3; something, ele)
- 三個引數,並且每個引數都包含一個數字:.name(1,2,3)
- 使用分號,呼叫包含一個逗號分割的css列表(一個引數): .name(1,2,3; )
- 逗號分割預設值(兩個引數):.name(@param1:red, blue)
//less編寫
.mixin(@color, @padding: xxx, @margin: 2) {
color-3: @color;
padding-3: @padding;
margin: @margin @margin @margin @margin;
}
.div {
.mixin(1,2,3; something, ele); //2個引數
}
.div1 {
.mixin(1,2,3); //3個引數
}
.div2 {
.mixin(1,2,3; ); //1個引數
}
//編譯輸出
.div {
color-3: 1, 2, 3;
padding-3: something, ele;
margin: 2 2 2 2;
}
.div1 {
color-3: 1;
padding-3: 2;
margin: 3 3 3 3;
}
.div2 {
color-3: 1, 2, 3;
padding-3: xxx;
margin: 2 2 2 2;
}
複製程式碼
4.6 定義多個相同名稱的混合
- less會根據引數進行呼叫相應的混合
.mixin(@color) {
color-1: @color;
}
.mixin(@color; @padding: 2) {
color-2: @color;
padding-2: @padding;
}
.mixin(@color; @padding: 3; @margin) {
color-3: @color;
padding-3: @padding;
margin: @margin @margin @margin @margin;
}
.some .selector div {
.mixin(#008000); //第二個mixins也被呼叫了,因為 @padding 有預設值
}
.some .selector p {
.mixin(#008000, 5); //只有第二個mixins被呼叫
}
//編譯結果
.some .selector div {
color-1: #008000;
color-2: #008000;
padding-2: 2;
}
.some .selector p {
color-2: #008000;
padding-2: 5;
}
複製程式碼
4.7 命名引數
- 引用mixin時可以通過引數名稱而不是引數的位置來為mixin提供引數值,任何引數都通過名稱來引用,這樣就不必按照特定的順序來使用引數
.mixin(@color: black; @margin: 10px; @padding: 20px) {
color: @color;
margin: @margin;
padding: @padding;
}
.class1 {
.mixin(@margin:20; @color: #33acfe);
}
.class2 {
.mixin(#efca44; @padding: 40px);
}
//編譯輸出
.class1 {
color: #33acfe;
margin: 20px;
padding: 20px;
}
.class2 {
color: #efca44;
margin: 10px;
padding: 40px;
}
複製程式碼
4.8 @arguments變數
- @arguments表示所有可變引數
- 引數的先後順序就是括號內的順序 ,在賦值時,值的位置和個數也是一一對應的
- 只有一個值,把值賦給第一個,兩個值,賦給第一個和第二個......
- 若想賦給第一個和第三個,必須把第二個引數的預設值寫上
.border(@x: solid, @c: red) {
border: 21px @arguments;
}
.div1 {
.border;
}
.div2 {
.border(solid, black)
}
//編譯輸出
.div1 {
border: 21px solid #ff0000;
}
.div2 {
border: 21px solid #000000;
}
複製程式碼
4.9 匹配模式
- 自定義一個字元,使用時加上那個字元,就呼叫相應的規則
.border(all, @w: 5px) {
border-radius: @w;
}
.border(t_l, @w: 5px) {
border-top-left-radius: @w;
}
.border(b_l, @w: 5px) {
border-bottom-left-radius: @w;
}
.border(b_r, @w: 5px) {
border-bottom-right-radius: @w;
}
.border {
.border(all, 50%);
}
//編譯結果
.border {
border-radius: 50%;
}
複製程式碼
4.10 得到混合中變數的返回值
.average(@x, @y) {
@average((@x + @y)/2);
}
div {
.average(16px, 50px);
padding: @average;
}
//編譯結果
div {
padding: 33px;
}
/*
1、將16px 和 50px 賦值給混合 .average進行計算
2、計算結果賦值給變數 @average
3、然後在div中呼叫@average的值
4、編譯後就得到了average的值33px
*/
複製程式碼
5. 運算
- 任何數值、顏色值和變數都可以進行運算
5.1 數值類運算
- less會自動推算數值的單位,不必每個值都加上單位
- 運算子之間必須以空格分開,存在優先順序問題時注意使用括號
.wp {
width: (450px - 50)*2;
}
//編譯輸出
.wp {
width: 900px;
}
複製程式碼
5.2 顏色值運算
- 先將顏色值轉換為rgb模式,運算完後再轉換為16進位制的顏色值並返回
- 注意:取值為0-255,所以計算時不能超過這個區間,超過預設使用0或255
- 注意:不能使用顏色名直接運算
.content {
color: #000000 + 8;
}
//rgb(0,0,0) + 8
//rgb(8,8,8)
//十六進位制:#080808
//編譯輸出
.content {
color: #080808;
}
複製程式碼
6. 名稱空間
- 有時混合中巢狀了比較多的規則,而我們只需要其中一部分,可使用名稱空間獲取
6.1 使用 ">" 符號
//混合集
#bgcolor() {
background: #fff;
.a() {
color: #888;
&:hover {
color: #ff6600;
}
.b() {
background: #ff0000;
}
}
}
.bgcolor1 {
background: #fdfee0;
#bgcolor>.a; //只使用.a()
}
.bgcolor2 {
#bgcolor>.a>.b; //只使用.b()
}
//編譯輸出
.bgcolor1 {
background: #fdfee0;
color: #888;
}
.bgcolor1:hover {
color: #ff6600;
}
.bgcolor2 {
background: #ff0000;
}
複製程式碼
6.2 省略 ">",換成空格
//混合集
#bgcolor() {
background: #fff;
.a() {
color: #888;
&:hover {
color: #ff6600;
}
.b() {
background: #ff0000;
}
}
}
.bgcolor1 {
background: #fdfee0;
#bgcolor .a; //只使用.a()
}
.bgcolor2 {
#bgcolor .a .b; //只使用.b()
}
//編譯輸出
.bgcolor1 {
background: #fdfee0;
color: #888;
}
.bgcolor1:hover {
color: #ff6600;
}
.bgcolor2 {
background: #ff0000;
}
複製程式碼
7. 引入
- 引入一個或多個檔案,這些檔案定義的規則可在當前less檔案中使用
- 使用@import
7.1 引入less檔案
//main.less
@wp: 960px;
.color {
color: #fff;
}
//當前less檔案
@import "main"; //可以不加字尾
.content {
width: @wp;
}
//編譯輸出
.color {
color: #fff
}
.content {
width: 960px;
}
複製程式碼
7.2 引入css檔案
- 注意:不能混合css的規則到專案中,編譯後原樣輸出“@import xxx.css”
- 並且引入時不能省略字尾名
//main.css
.color {
color: #ff6600;
}
@import "main.css" ;
.content {
width: @wp;
height: @wp;
}
//編譯輸出
@import "main.css"; //原樣輸出,但有效,css有這條語句
.content {
width: 960px;
height: 960px;
}
複製程式碼
7.3 帶引數的引入
- once:預設,只引入一次
- reference:使用less檔案但不輸出,注意對比上面的例子( 不使用會輸出沒有加括號的混合)
@wp: 960px;
.color {
color: #fff;
}
//當前less檔案
@import (reference) "main";
.content {
width: @wp;
}
//編譯輸出
.content {
width: 960px;
}
複製程式碼
- inline:在輸出中包含less檔案但是不能操作
@wp: 960px;
.color {
color: #fff;
}
//當前less檔案
@import (inline) "main";
.content {
width: @wp;
}
//編譯輸出
@wp: 960px; //報錯,@wp未知
.color {
color: #fff;
}
複製程式碼
- less:將檔案作為less檔案物件,無論什麼副檔名
//main.css檔案
.color {
color: #ff6600;
}
//當前less
@import (less) "main.css";
.content {
.color;
}
//編譯輸出
.color {
color: #ff6600;
}
.content {
color: #ff6600;
}
複製程式碼
- css:將檔案作為css檔案物件,無論什麼副檔名
//當前less檔案
@import (css) "main.less";
.content {
color: red;
}
//編譯輸出
@import "main.less";
.content {
color: red;
}
複製程式碼
- multiple:允許引入多次相同檔名的檔案
//當前less
@import (multiple) "main.less";
@import (multiple) "main.less";
@import (multiple) "main.less";
.content {
width: @wp;
}
//編譯輸出
.color {
color: #fff;
}
.color {
color: #fff;
}
.color {
color: #fff;
}
.content {
width: 960px;
}
複製程式碼
8. !important
- 提升權重優先順序為最高(儘量避免使用)
- 在呼叫的混合集後面追加 !important 關鍵字,混合集中所有屬性都繼承 !important
.foo(@bg: #fdfdfd, @color: #900) {
background: @bg;
color: @color;
}
.important {
.foo() !important
}
//編譯輸出
.important {
background: #fdfdfd !important;
color: #990000 !important;
}
複製程式碼
9. 條件表示式
9.1 帶條件的混合
- 比較運算子:>, >=, =, =<, <
- 格式:when() { }
// lightness() 是檢測亮度的函式,用%度量
.mixin(@a) when(lightness(@a) >= 50% ) {
background-color: black;
}
.mixin(@a) when(lightness(@a) < 50% ) {
background-color: white;
}
.mixin(@a) {
color: @a;
}
.class1 {
.mixin(#ddd);
}
.class2 {
.mixin(#555);
}
//編譯輸出
.class1 {
background-color: black;
color: #dddddd;
}
.class2 {
background-color: white;
color: #555555;
}
複製程式碼
9.2 型別檢測函式
- 檢測值的型別
- iscolor
- isnumber
- isstring
- iskeyword
- isurl
.mixin(@a: #fff; @b: 0) when(isnumber(@b)) {
color: @a;
font-size: @b;
}
.mixin(@a; @b: black) when(iscolor(@b)) {
font-size: @a;
color: @b;
}
複製程式碼
9.3 單位檢測函式
- 檢測一個值除了數字是否是一個特定的單位
- ispixel
- ispercentage
- isem
- isunit
.mixin(@a) when(ispixel(@a)) {
width: @a;
}
.mixin(@a) when(ispercentage(@a)) {
width: @a;
}
.class1 {
.mixin(960px);
}
.class2 {
.mixin(95%);
}
//編譯輸出
.class1 {
width: 960px;
}
.class2 {
width: 95%;
}
複製程式碼
10. 迴圈
- 混合可以呼叫自身,當一個混合遞迴呼叫自身就構成迴圈結構
.loop(@counter) when(@counter > 0) {
.h@{counter} {
padding: (10px*@counter);
}
.loop((@counter - 1)); //遞迴呼叫自身
}
div{
.loop(5);
}
//編譯輸出
div .h5 {
padding: 50px;
}
div .h4 {
padding: 40px;
}
div .h3 {
padding: 30px;
}
div .h2 {
padding: 20px;
}
div .h1 {
padding: 10px;
}
複製程式碼
11. 合併屬性
- 將多條規則合併為一條
11.1 方式一
- 在需要合併的屬性的冒號之前加上 “+”,合併後用逗號分隔
.mixin() {
box-shadow+: inset 0 0 10px #555;
}
.myclass {
.mixin;
box-shadow+: 0 0 20px black;
}
//編譯輸出
.myclass {
box-shadow: inset 0 0 10px #555, 0 0 20px black; //逗號分隔兩個屬性值
複製程式碼
11.2 方式二
- 在需要合併的屬性的冒號之前加上 “+_”,合併用空格分隔
.mixin() {
background+_: #f66;
background+_: url("/sss.jpg")
}
.class {
.mixin;
}
//編譯輸出
.class {
background: #f66 url("/sss.jpg"); //空格分隔
}
複製程式碼
11.3 兩種方式結合
.mixin() {
background+_: #f66;
background+: url("/sss.jpg");
background+_: no-repeat;
background+: center;
}
.class {
.mixin;
}
//編譯輸出
.class {
background: #f66, url("/sss.jpg") no-repeat, center;
}
複製程式碼
12. 函式庫
-
less中封裝了非常多函式庫,例如顏色定義、顏色操作、顏色混合、字串處理等等
-
例如color():用於解析顏色,將代表顏色的字串轉換為顏色值
body {
color: color("#f60");
background: color("red");
}
//編譯輸出
body {
color: #ff6600;
background: #ff0000;
}
複製程式碼
- 例如convert():將數字從一種型別(單位)轉換為另一種型別
- 長度單位:m, cm, mm, in, pt, px, pc
- 時間單位:s, ms
- 角度單位:rad(弧度), deg(度), grad(梯度), tum(圓)
body {
width: convert(20cm, px);
}
//編譯輸出
body {
width: 755.90551181px;
}
複製程式碼
- 更多函式前往官網檢視!
感謝你的閱讀和點贊!