Less簡(jiǎn)介以及Less的幾種使用方式
一、Less簡(jiǎn)介
官方網(wǎng)站：http://lesscss.cn/
Less是一門(mén)CSS預(yù)處理語(yǔ)言，它擴(kuò)展了CSS語(yǔ)言，增加了變量、Mixin、函數(shù)等特性，使CSS更易維護(hù)和擴(kuò)展。
Less可以運(yùn)行在Node或?yàn)g覽器端。也可運(yùn)行在桌面客戶(hù)端。
二、在Vue中使用Less
1、安裝依賴(lài)
處理普通的.css 文件， 需要安裝css-loader,style-loader
.less 文件， 需要安裝 less-loader
//.sass 文件，需安裝 sass-loader
npminstall css-loader style-loader --save-dev
npminstall less-loader --save-dev
//npminstall scss-loader --save-dev
2、安裝好相關(guān)loader后，我們需要在webpack.base.conf.js或者webpack.config.js 中加入相關(guān)配置代碼，如下
{undefined
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {undefined
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
},
{
test:/\.less$/,
use:[
"style-loader","css-loader","less-loader"
]
}
或者
{
test: /\.less$/,
loader:"style!css!less"
}
3、在style中加入lang="less"即可使用less
<stylescoped>
@nice-blue:#5b83ad;
.page{undefined
width: 200px;
height: 200px;
display: flex;
background: @nice-blue;
}
</style>
三、在客戶(hù)端使用
引入你的 .less 樣式文件的時(shí)候要設(shè)置 rel 屬性值為 “stylesheet/less”:
<link rel="stylesheet/less" type="text/css" href="styles.less">
然后點(diǎn)擊頁(yè)面頂部download按鈕下載 less.js, 在<head> 中引入:
<script src="less.js" type="text/javascript"></script>
注意你的less樣式文件一定要在引入less.js前先引入。
備注：請(qǐng)?jiān)诜?wù)器環(huán)境下使用！本地直接打開(kāi)可能會(huì)報(bào)錯(cuò)！
監(jiān)視模式
監(jiān)視模式是客戶(hù)端的一個(gè)功能，這個(gè)功能允許你當(dāng)你改變樣式的時(shí)候，客戶(hù)端將自動(dòng)刷新。
要使用它，只要在URL后面加上'#!watch'，然后刷新頁(yè)面就可以了。另外，你也可以通過(guò)在終端運(yùn)行l(wèi)ess.watch()來(lái)啟動(dòng)監(jiān)視模式。
四、在服務(wù)器端使用
安裝
在服務(wù)器端安裝 LESS 的最簡(jiǎn)單方式就是通過(guò) npm(node 的包管理器), 像這樣:
$ npm install less
如果你想下載最新穩(wěn)定版本的 LESS，可以嘗試像下面這樣操作:
$ npm install less@latest
使用
只要安裝了 LESS，就可以在Node中像這樣調(diào)用編譯器:
var less = require('less');
less.render('.class { width: 1 + 1 }', function (e, css) {
console.log(css);
});
上面會(huì)輸出
.class {
width: 2;
}
你也可以手動(dòng)調(diào)用解析器和編譯器:
var parser = new(less.Parser);
parser.parse('.class { width: 1 + 1 }', function (err, tree) {
if (err) { return console.error(err) }
console.log(tree.toCSS());
});
配置
你可以向解析器傳遞參數(shù):
var parser = new(less.Parser)({
paths: ['.', './lib'], // Specify search paths for @import directives
filename: 'style.less' // Specify a filename, for better error messages
});
parser.parse('.class { width: 1 + 1 }', function (e, tree) {
tree.toCSS({ compress: true }); // Minify CSS output
});
在命令行下使用
你可以在終端調(diào)用 LESS 解析器:
$ lessc styles.less
上面的命令會(huì)將編譯后的 CSS 傳遞給 stdout, 你可以將它保存到一個(gè)文件中:
$ lessc styles.less > styles.css
如何你想將編譯后的 CSS 壓縮掉，那么加一個(gè) -x 參數(shù)就可以了.
我們從以下三個(gè)方面，對(duì)比純靜態(tài)和偽靜態(tài)兩種靜態(tài)頁(yè)面生成方式，逐一展開(kāi)分析。
用JS的正則表達(dá)式如何判斷輸入框內(nèi)為中文或者是英文數(shù)字，或者是三者混編
css制作扇形
純CSS3文字Loading動(dòng)畫(huà)特效
PhpStorm 2022.1 EAP 3 在 PHPDoc 和屬性中添加了對(duì)多行和嵌套數(shù)組形狀的完全支持：在這種情況下，可以使用數(shù)組形狀注釋定義數(shù)組結(jié)構(gòu)，以獲得鍵的代碼補(bǔ)全并推斷值的類(lèi)型。
PHP作為Web界第一大語(yǔ)言近年來(lái)熱度不夠，但是這幾年的進(jìn)步和成長(zhǎng)卻沒(méi)有中斷。在2022伊始，我們來(lái)一起學(xué)習(xí)一下目前PHP的現(xiàn)狀以及最新版本帶來(lái)的特性。
Linux程序前臺(tái)后臺(tái)切換：在Linux終端運(yùn)行命令的時(shí)候，在命令末尾加上 & 符號(hào)，就可以讓程序在后臺(tái)運(yùn)行Ubuntu$">root@Ubuntu$ ./tcpserv01 &
Python 的正則表達(dá)式支持 多行模式，將每行文字分別匹配。然而各種操作系統(tǒng)里，換行符的表示法各不相同，會(huì)導(dǎo)致 Python 不能正確使用多行模式。