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