CSS中預(yù)處理語(yǔ)言的示例分析

小編給大家分享一下CSS中預(yù)處理語(yǔ)言的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

Less 是一門(mén) CSS 預(yù)處理語(yǔ)言，它擴(kuò)充了 CSS 語(yǔ)言，增加了諸如變量、混合（mixin）、函數(shù)等功能，讓 CSS 更易維護(hù)、方便制作主題、擴(kuò)充。

Less 可以運(yùn)行在 Node、瀏覽器和 Rhino 平臺(tái)上。網(wǎng)上有很多第三方工具幫助你編譯 Less 源碼。

官網(wǎng)地址

http://lesscss.org/

less手冊(cè)

www.lesscss.net/

bootstrap官網(wǎng)less介紹

http://less.bootcss.com/

一、瀏覽器端環(huán)境搭建
github下載地址：https://github.com/less/less.js

1、js引入
搭建Less的學(xué)習(xí)環(huán)境非常簡(jiǎn)單，只需在</body>標(biāo)簽前通過(guò)<script type="text/javascript" src="less.js"></script>引入處理器即可實(shí)現(xiàn)瀏覽器端中將less預(yù)編譯為css樣式。

更有效的方式是通過(guò)如下代碼監(jiān)測(cè)less樣式，自動(dòng)編譯為css樣式，從而減少我們修改less代碼后需按F5后才看到實(shí)際效果的繁瑣步驟。

<script>less = { env: 'development'};</script>
<script src="less.js"></script>
<script>less.watch();</script>

Note:注意你的less樣式文件一定要在引入less.js前先引入。

2、less的css樣式處理
less內(nèi)聯(lián)樣式和外聯(lián)樣式

基于我們現(xiàn)在使用的是瀏覽器端進(jìn)行預(yù)編譯，因此Less可用于內(nèi)聯(lián)樣式和外聯(lián)樣式當(dāng)中。

內(nèi)聯(lián)樣式如下：

<style type="text/less">
 // less 代碼
</style>

外聯(lián)樣式引入如下：

Note:注意rel的值是stylesheet/less

<link rel="stylesheet/less" type="text/css" href="文件.less" rel="external nofollow" />

二、語(yǔ)法
1、注釋

// 單行注釋?zhuān)粫?huì)作為最終輸出
/* 
多行注釋?zhuān)栽鶦SS的/*注釋....*/形式作為最終輸出
*/

2、變量
Less中的變量有以下規(guī)則：

以@作為變量的起始標(biāo)識(shí)，變量名由字母、數(shù)字、_和-組成
沒(méi)有先定義后使用的規(guī)定；
以最后定義的值為最終值；
可用于rule值、rule屬性、rule屬性部件、選擇器、選擇器部件、字符串拼接；
定義時(shí) "@變量名: 變量值;" 的形式；引用時(shí)采用 "@變量名" 或 "@{變量名}" 的形式；
存在作用域，局部作用域優(yōu)先級(jí)高于全局作用域。
Note:注意直接拷貝網(wǎng)頁(yè)中代碼可能因?yàn)橐恍┛瞻追脑驅(qū)е戮幾g出錯(cuò)。

less源碼

@color: color;
 @dialog: .dialog;
 @suffix: fix;
 // 空格將被忽略，若要保留空格則需要使用單引號(hào)或雙引號(hào)
 @hi: 'hello ';
 @dear: there ;
 
 .dialog{
 // 用于 rule屬性部件，必須使用"@{變量名}" 的形式
 background-@{color}: #888;
 // 用于 rule屬性，必須使用"@{變量名}" 的形式
 @{color}: blue;
 }
 // 用于 選擇器，必須使用"@{變量名}" 的形式
 @{dialog}{
 width: 200px;
 }
 @{dialog}::after{
 content: ': @{hi}@{dear}!'; // 用于 字符串拼接，必須使用"@{變量名}" 的形式
 }
 @h: 1000px;
 // 用于 選擇器部件，必須使用"@{變量名}" 的形式
 .ie-@{suffix}{
 @h: 30px; // 存在作用域，局部作用域優(yōu)先級(jí)高于全局作用域。
 height: @h; // 用于 屬性值，兩種形式均可使用
 line-height: 30px;
 }
 
 // 1. 以@作為變量的起始標(biāo)識(shí)，變量名由字母、數(shù)字、_和-組成
 // 2. 沒(méi)有先定義后使用的規(guī)定；
 @dialog-border-color: #666;
 @dialog-border-width: 10px;
 @dialog-border-width: 1px; // 3. 以最后定義的值為最終值；

最終輸出：

.dialog {
 background-color: #888;
 color: blue;
}
.dialog {
 width: 200px;
}
.dialog::after {
 content: ': hello there!';
}
.ie-fix {
 height: 30px;
 line-height: 30px;
}

三、gulp編譯less
1、安裝
全局安裝：npm install -g less

項(xiàng)目?jī)?nèi)安裝：npm install gulp-less --save-dev

2、使用

var gulp=require("gulp");
var less=require("gulp-less");


gulp.task("less",function(){
gulp.src('src/css/*.less')
.pipe(less())
.pipe(gulp.dest("src/css"));
});

//監(jiān)視文件的變化
gulp.task("watch",function(){
gulp.watch("src/css/*.less",['less']);
});

以上是“CSS中預(yù)處理語(yǔ)言的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！