為什么要有css預(yù)處理器
CSS基本上是設(shè)計(jì)師的工具葵礼，不是程序員的工具号阿。在程序員的眼里，CSS是很頭痛的事情鸳粉，它并不像其它程序語言扔涧，比如說PHP、Javascript等等赁严，有自己的變量扰柠、常量粉铐、條件語句以及一些編程語法，只是一行行單純的屬性描述卤档，寫起來相當(dāng)?shù)馁M(fèi)事蝙泼，而且代碼難以組織和維護(hù)。
很自然的劝枣，有人就開始在想汤踏，能不能給CSS像其他程序語言一樣，加入一些編程元素舔腾，讓CSS能像其他程序語言一樣可以做一些預(yù)定的處理溪胶。這樣一來，就有了“CSS預(yù)處器（CSS Preprocessor）”稳诚。
什么是css預(yù)處理器
- 是 CSS 語言的超集哗脖，比CSS更豐滿。
CSS 預(yù)處理器定義了一種新的語言扳还，其基本思想是：用一種專門的編程語言才避，為CSS增加了一些編程的特性，將CSS作為目標(biāo)生成文件氨距，然后開發(fā)者就只要使用這種語言進(jìn)行編碼工作桑逝。
通俗的說，CSS預(yù)處理器用一種專門的編程語言俏让，進(jìn)行Web頁面樣式設(shè)計(jì)楞遏，然后再編譯成正常的CSS文件，以供項(xiàng)目使用首昔。CSS預(yù)處理器為CSS增加一些編程的特性寡喝，無需考慮瀏覽器的兼容性問題，例如你可以在CSS中使用變量沙廉、簡單的邏輯程序拘荡、函數(shù)等等在編程語言中的一些基本特性，可以讓你的CSS更加簡潔撬陵、適應(yīng)性更強(qiáng)、可讀性更佳网缝，更易于代碼的維護(hù)等諸多好處巨税。
CSS預(yù)處理器技術(shù)已經(jīng)非常成熟，而且也涌現(xiàn)出了很多種不同的CSS預(yù)處理器語言粉臊，比如說：Sass（SCSS）草添、LESS、Stylus扼仲、Turbine远寸、Swithch CSS抄淑、CSS Cacheer、DT CSS等驰后。如此之多的CSS預(yù)處理器肆资，那么“我應(yīng)該選擇哪種CSS預(yù)處理器？”也相應(yīng)成了最近網(wǎng)上的一大熱門話題灶芝，在Linkedin郑原、Twitter、CSS-Trick夜涕、知呼以及各大技術(shù)論壇上犯犁，很多人為此爭論不休。相比過計(jì)我們對是否應(yīng)該使用CSS預(yù)處理器的話題而言女器，這已經(jīng)是很大的進(jìn)步了酸役。
到目前為止，在眾多優(yōu)秀的CSS預(yù)處理器語言中就屬Sass驾胆、LESS和Stylus最優(yōu)秀簇捍，
less的介紹
less 是一款比較流行的預(yù)處理 CSS，支持變量俏拱、混合暑塑、函數(shù)、嵌套锅必、循環(huán)等特點(diǎn)事格。
less的使用
- 做法一:先編譯成css,在HTML中引入css,產(chǎn)品上線推薦使用
- 做法二:在html中直接引用less文件
首先下載less.js放在lib文件中
<!-- 1. 創(chuàng)建和引入less文件 頁面中可以直接引入 但是不會像CSS一樣執(zhí)行 強(qiáng)調(diào)rel="stylesheet/less" -->
<link rel="stylesheet/less" href="demo.less">
<!-- 2. 引入一個(gè)less.js文件 編譯器文件 用來編譯less -->
<!-- 因?yàn)閘ess雖然引入了但是代碼不能被瀏覽器解析成樣式 通過less.js 吧less代碼 編譯(在js代碼里面臨時(shí)去編譯)成css代碼瀏覽器才可以執(zhí)行 -->
<script src="jd/lib/less/less.js"></script>
<!-- 3. 使用服務(wù)器打開頁面 less.js里面會發(fā)送ajax 請求demo.less 吧代碼編譯成css代碼 通過style標(biāo)簽嵌入到頁面中 完成了less的編譯 所以要注意引入順序 因?yàn)閘ess.js是用來編譯demo.less的 所以先引入demo.less 再引入less.js -->
less的基本語法
1.注釋(兩種)
1 // 模板注釋 這里的注釋轉(zhuǎn)換成CSS后將會刪除
2 /* */ CSS 注釋語法 轉(zhuǎn)換為CSS后會保留
總結(jié)：如果在less中寫注釋，我們推薦寫第一種注釋搞隐。除非是類似于版權(quán)等內(nèi)容驹愚，就采用第二種注釋。
2.定義變量
我們可以把重復(fù)使用或經(jīng)常修改的值定義為變量劣纲，在需要使用的地方引用這個(gè)變量即可逢捺。這樣可以避免很多重復(fù)的工作量
2.1定義變量
在less里面可以寫高級代碼
語法使用@符號開頭
變量名的命名規(guī)范和JS一樣 中間可以有-
值可以是任意CSS里面能夠?qū)懙闹?px 顏色 單詞等等 但是寫值的時(shí)候和CSS一樣帶單位
@變量名:值; */
/* 變量都是全局變量 變量名不能沖突 */
/* 把全局變量單獨(dú)提取到一個(gè)文件里面 */
@bgc: #ccc;
@w-100:200px;
@h-100:200px;
@border-color:hotpink;
2.2 使用變量
.box1 {
background-color: @bgc;
width: @w-100;
height: @h-100;
margin-top: 10px;
float: left;
}
2.3 使用嵌套
在 css 中經(jīng)常會用到子代,后代選擇器,經(jīng)常嵌套了很多層，寫起來很繁瑣
用less寫就比較簡潔,而且易于維護(hù),結(jié)構(gòu)與HTML結(jié)構(gòu)相同
.container{
width: 1170px;
margin: 0px auto;
padding: 0 15px;
height: 100px;
>.row{
margin: 0px -15px;
height: 100px;
>.col{
width: 33.33%;
float: left;
>a{
color:red;
text-decoration: none;
/* &在哪里面就表示誰 和JS this */
/* 表示當(dāng)前的a的hover */
&:hover{
color:green;
}
&::before{
content:'偽元素';
}
&::after{
content:'偽元素';
}
/* 交集選擇器 */
&.active{
color:yellow;
}
}
}
}
}
編譯成css后的代碼
/* less嵌套 可以像標(biāo)簽一樣寫嵌套 */
.container {
width: 1170px;
margin: 0px auto;
padding: 0 15px;
height: 100px;
}
.container > .row {
margin: 0px -15px;
height: 100px;
}
.container > .row > .col {
width: 33.33%;
float: left;
}
.container > .row > .col > a {
color: red;
text-decoration: none;
/* &在哪里面就表示誰 和JS this */
/* 表示當(dāng)前的a的hover */
/* 交集選擇器 */
}
.container > .row > .col > a:hover {
color: green;
}
.container > .row > .col > a:before {
content: '偽元素';
}
.container > .row > .col > a:after {
content: '偽元素';
}
.container > .row > .col > a.active {
color: yellow;
}
2.4Mixin(自定義函數(shù))
Mixin 的作用是把重復(fù)的代碼放到一個(gè)類當(dāng)中癞季，每次只要引用類名劫瞳，就可以引用到里面的代碼了，非常方便绷柒。
（1）在 less 文件中定義一個(gè)類：（將重復(fù)的代碼放到自定義的類中）
/* 給自定義函數(shù)添加參數(shù)
變量在函數(shù)里面 表示一個(gè)形參 參數(shù)名稱也是@符號
可以把一些重復(fù)使用樣式封裝成一個(gè)函數(shù) 還可以帶參數(shù) 參數(shù)還可以設(shè)置默認(rèn)值
參數(shù)可以有多個(gè) 多個(gè)使用特殊符號隔開 一般是逗號
*/
/* 把所有全局的函數(shù) 單獨(dú)提取到了一個(gè)公共的文件 */
.bordertb(@size,@style){
border-top: @size @style @border-color;
border-bottom: @size @style @border-color;
}
.bordertb(@size:5px,@style:solid){
border-top: @size @style @border-color;
border-bottom: @size @style @border-color;
}
上方代碼中志于，括號里的內(nèi)容@size是參數(shù)：這個(gè)5px參數(shù)的默認(rèn)值。
（2）在 less 文件中引用上面這個(gè)類：
.box1 {
background-color: @bgc;
width: @w-100;
height: @h-100;
margin-top: 10px;
.bordertb();
float: left;
}
.box2 {
background-color: @bgc;
width: @w-100;
height: @h-100+100;
margin-top: 10px;
.bordertb(20px,dashed);
float: left;
}
2.5 導(dǎo)包@import
（1）定義一個(gè)被引用的less文件废睦，名為variables.less：
/* 1. 定義變量
在less里面可以寫高級代碼
語法使用@符號開頭
變量名的命名規(guī)范和JS一樣 中間可以有-
值可以是任意CSS里面能夠?qū)懙闹?px 顏色 單詞等等 但是寫值的時(shí)候和CSS一樣帶單位
@變量名:值; */
/* 變量都是全局變量 變量名不能沖突 */
/* 把全局變量單獨(dú)提取到一個(gè)文件里面 */
@bgc: #ccc;
@w-100:200px;
@h-100:200px;
@border-color:hotpink;
（2）在 demo.less 中引用上面的 variables.less
/* 4. 引包 一般在最前面 把別的less文件的代碼引入到當(dāng)前l(fā)ess文件里面執(zhí)行
把一些公共的樣式 變量放到公共的文件里面 */
/* 引入定義變量的less文件 */
@import 'variables.less';
/* 引入定義函數(shù)的less文件 */
@import 'mixins.less';
.box1 {
background-color: @bgc;
width: @w-100;
height: @h-100;
margin-top: 10px;
.bordertb();
float: left;
}
將 上面的demo.less編譯為 demo.css之后伺绽，自動(dòng)生成的代碼如下：
.box1 {
background-color: #ccc;
width: 200px;
height: 200px;
margin-top: 10px;
border-top: 5px solid hotpink;
border-bottom: 5px solid hotpink;
border-top: 10px solid hotpink;
border-bottom: 10px solid hotpink;
float: left;
}
demo.less會自動(dòng)使用 variables.less里面定義好的變量
2.6 內(nèi)置函數(shù)
less有一些內(nèi)置函數(shù)
body {
background-color: lighten(#000, 90%); // 讓黑色變亮 10%
color: darken(#fff, 10%); // 讓白色變暗 10%
}
less的編譯
兩種方式
第一種
1 less 的編譯，依賴于 NodeJS 環(huán)境。因此奈应，我們需要先安裝 NodeJS澜掩。去Node.js官網(wǎng)下載安裝即可
2 安裝less的編譯環(huán)境
npm默認(rèn)為國外的話不翻墻可能安裝包很慢甚至安裝不了推薦使用國內(nèi)的 執(zhí)行分別下面2段命令
//切換淘寶鏡像
npm config set registry http://registry.npm.taobao.org/
//全局安裝下載less
npm install -g less
- 將 less 文件編譯為 css 文件
在 less 所在的路徑下，輸入 lessc xxx.less杖挣，即可編譯成功肩榕。或者程梦，如果輸入lessc xxx.less > ..\xx.css点把，表示輸出到指定路徑。
第二種
使用vscode的Easy less插件,安裝插件,less文件保存后會自動(dòng)編譯成css
