小編給大家分享一下CSS中預(yù)處理語言的示例分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
專注于為中小企業(yè)提供成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)南譙免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都,凝聚了一批互聯(lián)網(wǎng)行業(yè)人才,有力地推動(dòng)了上1000家企業(yè)的穩(wěn)健成長(zhǎng),幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
Less是一門 CSS 預(yù)處理語言,它擴(kuò)充了 CSS 語言,增加了諸如變量、混合(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)簽前通過<script type="text/javascript" src="less.js"></script>引入處理器即可實(shí)現(xiàn)瀏覽器端中將less預(yù)編譯為css樣式。
更有效的方式是通過如下代碼監(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" />
二、語法
1、注釋
// 單行注釋,不會(huì)作為最終輸出 /* 多行注釋,以原生CSS的/*注釋....*/形式作為最終輸出 */
2、變量
Less中的變量有以下規(guī)則:
以@
作為變量的起始標(biāo)識(shí),變量名由字母、數(shù)字、_和-組成
沒有先定義后使用的規(guī)定;
以最后定義的值為最終值;
可用于rule值、rule屬性、rule屬性部件、選擇器、選擇器部件、字符串拼接;
定義時(shí) "@變量名: 變量值;" 的形式;引用時(shí)采用 "@變量名" 或 "@{變量名}" 的形式;
存在作用域,局部作用域優(yōu)先級(jí)高于全局作用域。
Note:注意直接拷貝網(wǎng)頁中代碼可能因?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. 沒有先定義后使用的規(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ù)處理語言的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
新聞名稱:CSS中預(yù)處理語言的示例分析
URL標(biāo)題:http://bm7419.com/article34/goecpe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供用戶體驗(yàn)、ChatGPT、定制網(wǎng)站、品牌網(wǎng)站建設(shè)、動(dòng)態(tài)網(wǎng)站、Google
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)