Less使用備忘錄

定義

Less （Leaner Style Sheets 的縮寫）是一門向後兼容的 CSS 擴展語言，動態樣式語言。

使用方式

直接引入less.js文件

好處：能獲取客戶端的數據，從而進行進一步的計算

壞處：在客戶端解析Less,造成性能的浪費，不利於維護

Koala編譯器

每次都需要啓運軟件，並配置編譯配置，初學者推薦使用

Koala下載鏈接：http://koala-app.com/

在編輯器中實時編譯

不同的編輯器需要進行不同的配置，不夠靈活，而且並不是所有編輯器都支持，不想多安裝別的軟件且項目較簡單可以使用

通過node等前端工程化工具(webpack,gulp)

目前主流的使用方式，特別是在vue，reaact項目中使用

特性

嵌套（Nesting）

Less 提供了使用嵌套（nesting）代替層疊或與層疊結合使用的能力

// 編譯前
#header {
  color: black;
  .logo {
    width: 300px;
  }
	&:hover{
		background-color:#666;
	}
}
// 編譯後
#header {
  color: black;
}
#header .logo {
  width: 300px;
}
#header:hover{
	background-color:#666;
}

& 表示當前選擇器的父級

@規則嵌套和冒泡

// 編譯前
.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
    @media  (min-resolution: 192dpi) {
      background-image: url(/img/retina2x.png);
    }
  }
  @media (min-width: 1280px) {
    width: 800px;
  }
}

// 編譯後
.component {
  width: 300px;
}
@media (min-width: 768px) {
  .component {
    width: 600px;
  }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background-image: url(/img/retina2x.png);
  }
}
@media (min-width: 1280px) {
  .component {
    width: 800px;
  }
}

變量（Variables）

less可以像js一樣支持變量定義，對於一些公共的值可以定義爲變量，全局統一管理，項目中用的比較多的就是全局顏色值管理

// 編譯前
@width: 10px;
@height: @width + 10px;
@bgColor: #fff;

#header {
  width: @width;
  height: @height;
	background-color:@bgColor;
	@bdColor: #ccc;
	#logo{
		border: 1px solid @bdColor;	
	}
}

// 編譯後
#header {
  width: 10px;
  height: 20px;
	background-color: #fff;
}
#header #logo{
	border: 1px solid #ccc;
}

變量有作用域特性,上面示例中@bdcolor屬於局部作用域,其它變量是全局的

變量的一些進階用法

// 編譯前
@my-selector: banner;
.@{my-selector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

// 編譯後
.banner {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

--------------------------------------------------
// 編譯前
@images: "../img";
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}

// 編譯後
body {
  color: #444;
  background: url("../img/white-sand.png");
}

--------------------------------------------------
// 編譯前
@property: color;
.widget {
  @{property}: #0ee;
  background-@{property}: #999;
}

// 編譯後
.widget {
  color: #0ee;
  background-color: #999;
}

--------------------------------------------------
// 編譯前
@primary:  green;
@secondary: blue;
.section {
  @color: primary;
  .element {
    color: @@color;
  }
}

// 編譯後
.section .element {
  color: green;
}

--------------------------------------------------
// 編譯前
.block {
  color: red; 
  .inner {
    background-color: $color; 
  }
  color: blue;  
}

// 編譯後
.block {
  color: red; 
  color: blue;  
} 
.block .inner {
  background-color: blue; 
}

混合（Mixins）

將一組屬性從一個規則集包含（或混入）到另一個規則集的方法

最簡單的混合方式

// 編譯前
.clearFix {
  *zoom:1;
	&:after{
		content: '';
		display: block;
		clear: both;
	}
}
#menu {
	.clearFix();
}

// 編譯後
#menu{
  *zoom:1;
}
#menu:after{
  	content: '';
		display: block;
		clear: both;
}

帶參數的混合方式：

參數可以有多個，也支持設置默認值，可以精簡css的寫法

// 編譯前
.bdmix(@width, @style:solid, @color:#00f){
	border: @width @style @color;
}
.box0{
	.bdmix(1px);
}
.box1{
	.bdmix(2px, dotted, #f00);
}

// 編譯後
.box0{
	border: 1px solid #00f;
}
.box1{
	border: 2px dotted #f00;
}

混合傳參支持arguments變量，適用於對參數無順序要求的場景

// 編譯前
.bdmix(@width, @style:solid, @color:#00f){
	border: @agruments;
}
.box0{
	.bdmix(1px);
}

// 編譯後
.box0{
	border: 1px solid #00f;
}

模式匹配

// 編譯前
.bdmix(top, @width:1px){
	border-top: @width solid red;
}
.bdmix(left, @width:1px){
	border-left: @width solid red;
}
.bdmix(right, @width:1px){
	border-right: @width solid red;
}
.bdmix(bottom, @width:1px){
	border-bottom: @width solid red;
}
// 默認匹配值
.bdmix(@_, @width:1px){
	width:100px;
}
.box0{
	.bdmix(top);
}
.box1{
	.bdmix(left, 2px);
}
.box2{
	.bdmix(right, 2px);
}
.box3{
	.bdmix(bottom, 2px);
}

// 編譯後
.box0{
	border-top: 1px solid red;
	width:100px;
}
.box1{
	border-left: 2px solid red;
	width:100px;
}
.box2{
	border-right: 1px solid red;
	width:100px;
}
.box3{
	border-bottom: 2px solid red;
	width:100px;
}

命名空間

// 編譯前
.blue{
	.button{
		background-color: blue;
	}
}
.red{
	.button{
		background-color: red;
	}
}
.box1{
	.red > .button
}

// 編譯後
.box1{
	background-color: red;
}

混合的進階用法

// 編譯前
.foo (@bg: #f5f5f5, @color: #900) {
  background: @bg;
  color: @color;
}
.unimportant {
  .foo();
}
.important {
  .foo() !important;
}

// 編譯後
.unimportant {
  background: #f5f5f5;
  color: #900;
}
.important {
  background: #f5f5f5 !important;
  color: #900 !important;
}

--------------------------------------------------
// 編譯前
.mixin(@color: black; @margin: 10px; @padding: 20px) {
  color: @color;
  margin: @margin;
  padding: @padding;
}
.class1 {
  .mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
  .mixin(#efca44; @padding: 40px);
}

// 編譯後
.class1 {
  color: #33acfe;
  margin: 20px;
  padding: 20px;
}
.class2 {
  color: #efca44;
  margin: 10px;
  padding: 40px;
}

映射（Maps）

從 Less 3.5 版本開始，你還可以將混合（mixins）和規則集（rulesets）作爲一組值的映射（map）使用

// 編譯前
#colors() {
  primary: blue;
  secondary: green;
}

.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}

// 編譯後
.button {
  color: blue;
  border: 1px solid green;
}

繼承（Extend）

將它所使用的選擇器的樣式與它所引用的選擇器樣式相合並

// 編譯前
nav ul {
  &:extend(.inline);
  background: blue;
}
.inline {
  color: red;
}

// 編譯後
nav ul {
  background: blue;
}
.inline, nav ul {
  color: red;
}

註釋（Comments）

支持通過//和//添加註釋，//的註釋不會帶入解析後的css文件中，//是css的代碼註釋，會帶入解析後的css文件中

其它

Math函數

// 編譯前
.sizemix(@width, @height, @padding){
	width: round(@width)*1px;
	height: ceil(@height)*1px;
	padding: floor(@padding)*1px;
}
.box0{
	.sizemix(100.2, 99.2, 10.2)
}

// 編譯後
.box0{
	width: 100px;
	height: 100px;
	padding: 10px;
}

導入（Importing）@import

@import "common.less";
@import "lib.css";

避免編譯 ~

// 編譯前
@rem: 10rem;
.box{
	width: 100/10rem;
	font: (12/@rem)~"/"(20/@rem) "宋體";
}

// 編譯後
.box{
	width: 10rem;
	font: 1.2rem/2rem "宋體";
}

// 編譯前,從 Less 3.5 開始 @min768: ~"(min-width: 768px)"; 可以直接寫成@min768: (min-width: 768px);
// 在 Less 3.5+ 版本中，許多以前需要“引號轉義”的情況就不再需要了
@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

// 編譯後
@media (min-width: 768px) {
  .element {
    font-size: 1.2rem;
  }
}

Less插件

通過手less插件，可以在less中實現一些JS才能完成的任務

// 插件代碼
module.exports = {
    install: function(less, pluginManager, functions) {
        functions.add('pi', function() {
            return Math.PI;
        });
    }
};

// 解析前
@plugin "my-plugin";
.show-me-pi {
  value: pi();
}

// 解析名
.show-me-pi {
  value: 3.141592653589793;
}

官方詳細文擋：https://less.bootcss.com/#概覽

Less使用備忘錄

定義

使用方式

直接引入less.js文件

Koala編譯器

在編輯器中實時編譯

通過node等前端工程化工具(webpack,gulp)

特性

嵌套（Nesting）

變量（Variables）

混合（Mixins）

最簡單的混合方式

帶參數的混合方式：

映射（Maps）

繼承（Extend）

註釋（Comments）

其它

Math函數

導入（Importing）@import

避免編譯 ~

Less插件

使用c#強大的表達式樹實現對象的深克隆之解決循環引用的問題

free AI online tools All In One

痞子衡嵌入式：恩智浦i.MX RT1xxx系列MCU啓動那些事（12.A）- uSDHC eMMC啓動時間(RT1170)

linux安裝cuda和cudnn

Mellanox網卡開啓SR-IOV

模擬手機設備：使用 Playwright 實現移動端自動化測試

HTML 00 Tutorial

全面系統的AI學習路徑，幫助普通人也能玩轉AI

從零開始：使用 Playwright 腳本錄製實現自動化測試

uni-app實現上拉加載

微信開發者工具請求接口 Provisional headers are shown

Ant Design Pro項目ProTable怎麼獲取搜索表單值

Vue項目報TypeError: Cannot read properties of undefined (reading '_wrapper')

React使用useRef調用子組件方法

Taro微信小程序獲取Tab頁可視區域高度

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結