前端基礎 less(全集)

2021-09-22 01:37:35 字數 1443 閱讀 1325

初識less:

less知識彙總:le2.html:

le2.less:

//以「//」開頭的注釋,不會編譯到css檔案當中,/**/以「/**/」包裹的注釋會被編譯到css資料夾中

//注釋11111

/*注釋222222,會顯示*/

//宣告變數(乙個屬性的值,直接引用)

@color:rgb(2, 255, 2);

//宣告變數(乙個屬性名,用{}引用)

@m:margin;

@bg:background-color;

//宣告變數(乙個選擇器,用{}引用)

@class1:.le11;

//less混合,把相同的屬性放到乙個變數裡面,然後在需要的樣式表裡面呼叫(類似於宣告變數,變數名.hunhe)

//普通混合,不帶引數。

//還有帶引數的混合,用逗號隔開.hunhe(@w,@h,@bc),這個不叫函式,叫mix in

//在.hunhe()呼叫的時候,如果只想給它指定某乙個引數,如只給@bc乙個紅色,可以在呼叫時這麼寫

//.hunhe(@bc:red);命名引數

//在下面呼叫.hunhe(@w,@h,@bc)的時候,如果沒有寫引數,可以使用預設值

//.hunhe(@w:10px,@h:10px,@bc:green)帶預設值的混合

// .hunhe(@w,@h,@bc):@bc;

//還可以在css資料夾裡面寫乙個單獨檔案hunhe.less,把這個.hunhe(@w,@h,@bc){}放到hunhe.less中

//在這裡通過@import"css/hunhe.less"呼叫

@import "./hunhe.less";

.le1 : 0 auto;

@ : @color;/*@color就是在上面定義的變數*/

.le12: rgb(84, 12, 94);

&:hover: rgb(165, 236, 33);

//繼承乙個樣式

.le13:extend(.in):@bc;

.bo(@1,@2,@3)

//.le14通過all可以把.in:hover{}屬性

.in{

width: 20+20px;//在less中可以進行+-*/的計算

height: ~"40px";//~""在這裡就是避免編譯,會原封不動的編譯成css檔案

border:2px solid rebeccapurple;

//乙個跟in有關的屬性,在前台可以用,繼承後生成的樣式

// .in:hover,

// .le1 .le14:hover {

// background-color: red;

.in:hover{

background-color: red;

前端 less 使用

在這裡插入 片 1 代表當前層級元素的上一級元素,就是當前層級元素的父元素。2 給當前元素加乙個偽類時候使用,hover hover after after css 用css寫法 aa hover less 用less寫法a css clearfix after clearfix less clea...

less基礎語法

less 是一門 css 預處理語言,它擴充了 css 語言,增加了諸如變數 混合 mixin 函式等功能,讓 css 更易維護 方便製作主題 擴充。node 瀏覽器和 rhino 平台都可以。本人使用的則是國人的koala。分為兩種 和 1.此種編譯後不會出現在css檔案中,不編譯 2.這種編譯後...

Less基礎使用

建立less 在less檔案可以引入其他檔案 如果引入檔案時less格式,字尾名可以省略 import aiqi aiqi 在scoped下穿透 deep p 變數 可以定義變數方便復用 backgroundcolor greenyellow important aiqi 混入 混合 mixin 是...