動態樣式語言 LESS基礎知識

css是一門非程式式語言，缺少邏輯性，不便於維護

less在css現有語法的基礎上，為css加入程式式語言的特性

引入了變數、混入、運算、函式等功能，大大簡化css的編寫，降低了css的維護成本

less包含一套語法和乙個解析器，使用者用它的語法生成樣式規則，這些規則通過解析器後生成css檔案

1.變數

以{}劃分作用域，變數從裡往外進行查詢

@width : 20px; 

#homediv } 
#leftdiv

#homediv #centerdiv #leftdiv

2.混入（實現多重繼承）

將乙個類巢狀到另乙個類中使用

// 定義乙個樣式選擇器

.roundedcorners(@radius:5px) // 在另外的樣式選擇器中使用
#header #footer

#header #footer

混入引數

// 定義乙個樣式選擇器

.borderradius(@radius)// 使用已定義的樣式選擇器
#header .btn

arguments引數：表示所有變數：

.boxshadow(@x:0,@y:0,@blur:1px,@color:#000)#header

支援命名空間，防止重名問題：

#mynamespace .user }

巢狀規則：

<

div 
id="home"
>
<
div 
id="top"
>top
div>
<
div 
id="center"
>
<
div 
id="left"
>left
div>
<
div 
id="right"
>right
div>
div>
div>

#home 

#center 
#right 
} }

&：

a  

}

3.運算及函式

對數值型value（如顏色、數字）進行四則運算

專門針對color的一組函式

lighten(@color, 10%); //

返回比原色亮10%的顏色
darken(@color, 10%); //
返回比原色暗10%的顏色
saturate(@color, 10%); //
返回比原色飽和10%的顏色
desaturate(@color, 10%);//
返回比原色不飽和10%的顏色
fadein(@color, 10%); //
返回比原色不透明10%的顏色
fadeout(@color, 10%); //
返回比原色透明10%的顏色
spin(@color, 10); //
比原色大10度色調比
spin(@color, -10); //
比原色小10度色調比
//使用

init: #f04615; 

#body

4、注釋

與js一樣

注意：單行注釋不會出現在編譯後的css檔案中，若需要保留注釋，使用多行注釋

5.使用方式：

客戶端：

//注意檔案的先後順序

stylesheet/less" type="text/css" href="styles.less">

實際專案開發中常用：

編寫less檔案後，直接將它編譯成css檔案，然後引入頁面

動態樣式語言 LESS

less作為css語言的擴充套件，賦予了css動態語言的特性，如 變數，繼承，運算，函式等。如果你原本就是程式設計師，你一定會非常喜愛less，它可以幫你節省很多重複工作，可以讓你像編寫一門動態語言一樣地編寫css。本文總結了less的相關語法和使用方式，可供查閱和入門使用。less允許使用變數，可...

less基礎知識

定義 什麼是less？less是乙個css預處理器，可以為 啟用可自定義 可管理和可重用的樣式表 擴充套件了css樣式，增加了變數 mixin 函式等特性 less可執行在node或瀏覽器端 優勢 安裝 npm install g less 提前安裝node.js 可在less後通過 指定安裝版本 ...

CSS樣式基礎知識（下）

1 預定的顏色 2 十六進製制顏色 如 0f0f0f 3 rgb顏色 128，0，0 全紅 4 在rgb的基礎上又新增了表示透明度的alpha 5 hsl 用色調，飽和度，和透明度三個分量來表示顏色 6 hsla 在hsl的基礎上又新增了表示透明度的alpha 預定義顏色 rgb顏色 16進製制顏色...