Less常用功能使用

滴水微瀾發表於2023-01-14
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 

 

相關文章