less基礎知識

2021-09-16 12:40:25 字數 1462 閱讀 4576

定義:

什麼是less? less是乙個css預處理器,可以為**啟用可自定義、可管理和可重用的樣式表;擴充套件了css樣式,增加了變數、mixin、函式等特性;less可執行在node或瀏覽器端;

優勢:安裝

npm install -g less(提前安裝node.js)可在less後通過@*.*.*指定安裝版本; less -v獲取less版本

使用:

1.新建乙個.html和.css檔案,然後再建立乙個.less檔案(同一目錄下);

2.將.less檔案編譯為.css檔案供.html檔案使用, 命令:lessc **.less **.css(當.less檔案被修改後都要使用這個命令再次編譯)

注:.less檔案的簡單示例

@back-color:#fff000;

@high:100px;

h1      .css  p

less函式:

less命名空間和訪問器

將mixins分組在通用名稱下,使用命名空間可以避免名稱衝突,並從外部封裝mixin組

less變數範圍

變數範圍指定可用變數的位置。 變數將從本地作用域搜尋,如果它們不可用,則編譯器將從父作用域搜尋

less注釋  /* */ 和 //但單行注釋//不會顯示在.css檔案中

less匯入可匯入已生成好的.less和.css檔案 

@import  "**.less" //這句**可放在任何位置

less混合: 

.less檔案中 

.p1{

color:res;

.p2{

font-size:20px;

.p1();//復用 .p1的樣式

.css 檔案:

.p2{

font-size:20px;

color:red;

less數學函式:

ceil(),floor(),percentage();round();sqrt();abs();sin();asin();cos();acos();tan();atan();pi();pow();mod();min(x1,x2,x3[,,,,]);max(x1,x2,x3[,,,,]);

lessl型別函式(判斷某個值是否屬於某個型別)

isnumber();isstring()等等

less顏色函式:使定義和操作顏色變得超級簡單,幫助你控制顏色、更好地配色

rgb();rgba();

less顏色操作函式改變顏色強度、透明度等

動態樣式語言 LESS基礎知識

css是一門非程式式語言,缺少邏輯性,不便於維護 less在css現有語法的基礎上,為css加入程式式語言的特性 引入了變數 混入 運算 函式等功能,大大簡化css的編寫,降低了css的維護成本 less包含一套語法和乙個解析器,使用者用它的語法生成樣式規則,這些規則通過解析器後生成css檔案 1....

C 基礎知識整理 基礎知識(2) 類

類,是物件導向語言的基礎。類的三大特性 封裝 繼承 多型。最基本的特性就是封裝性。程式設計師用程式描述世界,將世界的所有事物都看成物件,怎麼描述這個物件?那就是類了。也就是用類來封裝物件。用書上的話說,類是具有相同屬性和行為的物件的抽象。寶馬汽車 別克汽車 五菱之光汽車.基本具有相同的屬性和行為,所...

C 基礎知識整理 基礎知識(2) 類

類,是物件導向語言的基礎。類的三大特性 封裝 繼承 多型。最基本的特性就是封裝性。程式設計師用程式描述世界,將世界的所有事物都看成物件,怎麼描述這個物件?那就是類了。也就是用類來封裝物件。用書上的話說,類是具有相同屬性和行為的物件的抽象。寶馬汽車 別克汽車 五菱之光汽車.基本具有相同的屬性和行為,所...