Less less基本使用

基本概況

less 是一門 css 預處理語言，它擴充了 css 語言，增加了諸如變數、混合（mixin）、函式等功能，讓 css 更易維護、方便製作主題、擴充。less 可以執行在 node、瀏覽器和 rhino 平台上。網上有很多第三方工具幫助你編譯 less 原始碼。

編譯

1、在npm中輸入以下語句，但是注意要更改檔案位置

lessc style.less style.css

注釋

1、// 雙斜槓的注釋 less是支援的而且這樣的注釋不會再編譯之後出現在css中

2、/**/使用css的注釋 less是支援的，編譯的時候該注釋會被保留 

變數

1、@變亮名：具體值

2、經過nmp進行編譯才能得到對於的css檔案

@w: 100px;

@h: 50px;
@c: rgba(255, 255, 255, 0.3);
body

===》編譯：

c:\users\administrator>lessc e:\less\first\01.less e:\less\first\01.css

===》編譯之後：

body

混合

1、樣式中可以混入類選擇器和id選擇器

.a, #b 

.mixin-class 
.mixin-id

===》編譯後

.a, #b 

.mixin-class 
.mixin-id

請注意，當您呼叫mixin時，括號是可選的

.a();   //these lines do the same thing

.a;

2、可以不輸出混合。你想用乙個混合，這個混合只是在被引用的時候輸出，自己不能作為類輸出，你可以在它後面加括號。

.my-mixin 

.my-other-mixin() 
.class

===》編譯後

.my-mixin 

.class

3、混合中帶有引數

.border-radius(@radius) 

#header 
.button

===》編譯後

#header 

.button

混合中含有引數也有是預設值

.border-radius(@radius: 5px)

巢狀

#father 

}}}

===》編譯後

#father 

#father div 
#father div ul 
#father div ul li

選擇器

1、巢狀中如果父元素與子元素有預設的空格，&可以取消空格，這為偽元素與交集選擇器提供了可能

.content() 

div 
&::after 
}

===》編譯後

div 

div:hover 
div::after

什麼是less？less有什麼好處？

less是動態的樣式表語言，通過簡潔明瞭的語法定義，是編寫 css的工作變得非常簡單。在實際專案開發中，可以大大提公升前端工程師的效率！css 層疊樣式表 是一門歷史悠久的標記性語言，同html一道，被廣泛應用於全球資訊網中。html主要負責文件結構的定義，css負責文件表現形式或樣式的定義。作為一...

什麼是less？less有什莫好處？

less是動態的樣式表語言，通過簡單，明了的語法定義，使編寫css 的工作變得非常簡單，在實際專案開發中，大大提高了前端工程師的工作效率 css需要書寫大量看似沒有邏輯的 不方便維護及擴充套件，不利於復用，造成這些困難的很大原因源於css是一門非程式性語言，沒有變數，函式，scope等概念 less...

oracle基本使用

ocm oracle 大師認證 ocp oracle 專家認證 oca oracle 初級認證 認證 1千 1.oracle啟動 電腦 管理 服務 oracleorahome90tnslistener oracleservice 你要開啟的資料庫 2.oracle使用者 syssystem scot...