Less常用功能使用 - tw511教學網

Less 是一門 CSS 預處理語言，它擴充了 CSS 語言，增加了諸如變數、混合（mixin）、函數等功能，讓 CSS 更易維護、方便製作主題、擴充。Less 可以執行在 Node 或瀏覽器端。

Less常用的重要功能有：

1.變數

2.cala計算

3.html樣的選擇器巢狀

4. &父選擇器本身或父選擇器偽類

1.變數

包括變數的定義，變數的參照，變數的計算

值變數

@width:5000px;
@height:300px;
@font_size:12px;

.textarea {
	width:@width;
	height:@height;
	font-size:@font_size;
}

名稱變數（選擇器或屬性名）

@width:5000px;
@height:300px;
@font_size:12px;
@name:.text;
@b_c:border-color;
.textarea {
	width:@width;
	height:@height;
	font-size:@font_size;
}
@{name} {
    @{b_c}: aqua;
}

2.calc計算

div{ 
@val: 0.20rem; 
width: calc(~」100% - @{val}」); 
}
編譯成:
div { 
width: calc(100% - 0.2rem); 
}

3.選擇器巢狀，參照

less的使用像html一樣使用的巢狀結構，並且可以參照

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

//參照使用
#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

4. &父選擇器參照

在使用巢狀規則時，需要注意 & 符號。

當內層選擇器前面沒有& 符號時，它表示的是父選擇器後面的後代選擇器。

如果有& 時，表示的是父元素自身或父元素的偽類

    .van-cell {
      background-color: #007bff;
      color: white;
      &::after {
        display: none;
      }
      .avatar {
        width: 60px;
        height: 60px;
        background-color: #fff;
        border-radius: 50%;
        margin-right: 10px;
      }
      .username {
        font-size: 14px;
        font-weight: bold;
      }
    }

更多使用方式從官網檢視：https://less.bootcss.com/#概覽

偽類與偽元素介紹

偽元素：使用::before ::after修飾，建立的一個有內容的虛擬容器。這個元素雖然邏輯上存在，但並不存在於實際的DOM樹中，它是新建立的元素，這個新建立的元素叫「偽元素」。

偽類（xxx的偽類，如a:link）：使用:link :hover修飾，它存在於DOM樹中，邏輯上存在，但在DOM樹上無須標識的「幽靈」標籤。

:before/:after是Css2的寫法，

::before/::after是Css3的寫法

1.偽元素要配合content屬性一起使用

2.偽元素不會出現在DOM中，所以不能通過js來操作，僅僅是在 CSS 渲染層加入

3.偽元素的特效通常要使用:hover偽類樣式來啟用

4.eg:當滑鼠移在span上時，span前插入」duang」

<style>
 　　 span{
         background: yellow;
     }
      span:hover::before{
          content:"duang";
      }
  </style>
  
  <span>222</span>

參考文章：https://blog.csdn.net/weixin_49115895/article/details/108683791