最全的less筆記，半小時學會！

時間  2019-11-06
標籤 筆記 半小時 學會 简体版
原文   原文鏈接

1. less 簡介

  1. less是CSS的預編譯器，能夠擴展CSS語言（固然也兼容CSS），能夠定義變量、混合、函數等等，讓CSS代碼更易維護和擴展
  2. less與傳統寫法相比：
  • less後綴爲" .less "
  • less中的註釋有兩種
// 這種註釋不會編譯到CSS文件
/* 這種註釋會編譯到CSS文件*/
div {
  font-size: 14px;
}
複製代碼
  1. less須要編譯成css才能使用
  • 使用編譯工具，好比 Koala 挺好用的（固然也有不少在線編譯工具）
  • 在項目中使用（好比Vue，須要安裝less-loader）
  • 客戶端調試（存在跨域問題，不推薦這種方式）
  • 使用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 注意事項

  1. 變量是延遲加載的，能夠不預先聲明
div {
  color: @black
}

@black: #000000;

//編譯結果
div {
  color: #000000;
}
複製代碼
  1. 變量的做用域
  • 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;
}
/* 一、將16px 和 50px 賦值給混合 .average進行計算 二、計算結果賦值給變量 @average 三、而後在div中調用@average的值 四、編譯後就獲得了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中封裝了很是多函數庫，例如顏色定義、顏色操做、顏色混合、字符串處理等等css

  • 例如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;
}
複製代碼

感謝你的閱讀和點贊！瀏覽器

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程