今天完成的事情：

首先第一件事情是，整理一下常用的顏色攝取

#F1F1F1 google的設(shè)置頁(yè)面的body的背景顏色

#FFF 為google的內(nèi)容塊的背景顏色

另外就是學(xué)習(xí)test11中提到的less

一。跳出less和sass的戰(zhàn)斗。網(wǎng)上一大堆的互相撕逼，看來(lái)各有春秋?。〉菍?duì)我這菜鳥(niǎo)的人說(shuō)，我不管它們的得失。我只管知道預(yù)處理是一個(gè)好主意，管它是那種。

都是為了偷懶，不就是要讓css更加自能化嗎！

在知乎上有位“海皮飛”的博主提出了如下場(chǎng)景。

1. 要做各種內(nèi)核都兼容的圓角效果，這個(gè)CSS效果是有固定模版的，那每個(gè)用到圓角的地方都復(fù)制一遍同樣的代碼的話，那如果圓角有一天都要改得更加圓一些怎么辦？這個(gè)時(shí)候是不是可以把這些模版封裝起來(lái)會(huì)比較好？

2. 網(wǎng)站每個(gè)地方都要用同一種紅色怎么辦？ 是要`#E7253D...#E7253D...#E7253D...#E7253D`，還是要`$red: #E7253D; $red...$red...$red`

一位實(shí)際開(kāi)發(fā)的博主給出的看法是less可以方便模塊化和調(diào)用。

但是就算不用看，也知道要編譯，那么對(duì)一個(gè)項(xiàng)目來(lái)說(shuō)是增加額外的花銷(xiāo)。

正題：

怎么使用less開(kāi)發(fā)呢？

客戶(hù)端運(yùn)行Less分為兩種情況：

第一種方式是直接在html頁(yè)面引用.less文件，然后借助less.js去編譯less文件動(dòng)態(tài)生成css樣式而存在于當(dāng)前頁(yè)面，這種方式適用于開(kāi)發(fā)模式。

第二種方式是我們首先寫(xiě)好.less文件的語(yǔ)法，然后借助工具生成對(duì)應(yīng)的.css文件，然后客戶(hù)端直接引用.css文件即可。比如我們常用的bootstrap.css就是通過(guò)工具編譯而成，這種方式更適合運(yùn)行環(huán)境。

截圖出自知乎

一。開(kāi)發(fā)模式下使用Less

還真多人不提倡引入js文件。

不過(guò)也要說(shuō)一下

1.搭建less環(huán)境

引入腳本less.js.

<link rel="stylesheet/less" type="text/css" href="less/styles.less" rel="external nofollow" >
<script src="js/less.js" type="text/javascript"></script>

ps:第一行的意思是：less樣式文件

第二行的意思是：引入處理器，實(shí)現(xiàn)瀏覽器將less預(yù)編譯為css樣式。

這可是在less開(kāi)源地址下載less.js文件引入的。

可以直接在CDN方式引入less.js

<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

在網(wǎng)文中還有這種代碼實(shí)現(xiàn)自動(dòng)刷新功能。

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

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

也有人說(shuō)明在引用less.js之前，需要一個(gè)less變量，聲明編譯less的環(huán)境參數(shù)，所以最終所有引用文件如下：

<link rel="stylesheet/less" type="text/css" href="~/Content/less.less" rel="external nofollow" />
<script type="text/javascript">
 less = {
  env: "development",
  async: false,
  fileAsync: false,
  poll: 1000,
  functions: {},
  dumpLineNumbers: "comments",
  relativeUrls: false,
  rootpath: ":/a.com/"
 };
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

二。運(yùn)行環(huán)境下使用Less

上圖評(píng)論中都在介紹軟件Koala。但是我是使用webstrom來(lái)敲代碼的。那么可否通過(guò)配置webstrom來(lái)實(shí)現(xiàn)less生成對(duì)應(yīng)css文件呢？

Windows10 x64 系統(tǒng)下安裝 Nodejs 并在 WebStorm 2017.1 下搭建編譯 LESS 環(huán)境

1、 打開(kāi)Nodejs官網(wǎng)http://www.nodejs.org/，點(diǎn)“DOWNLOADS”

2、 下載好后，雙擊“node-v6.11.2-x64.msi”，默認(rèn)安裝路徑為：C:\Program Files\nodejs。而我的是F:\Program Files (x86)\nodejs

3、 “開(kāi)始”-->cmd,打開(kāi)cmd程序，輸入“node -v”,出現(xiàn)” v6.11.2”; 輸入“npm -v”,出現(xiàn)” 3.10.10”,說(shuō)明Nodejs和npm都已安裝成功。

4、“開(kāi)始”-->cmd,打開(kāi)cmd程序，輸入“cd F:\Program Files (x86)\nodejs”,進(jìn)入nodejs安裝目錄。輸入npm install less -g 回車(chē)，安裝less組件。稍等片刻，完成后，你會(huì)發(fā)現(xiàn)C:\Users\bond\AppData\Roaming\npm\node_modules 目錄下有l(wèi)ess組件。

至此Windows7 x64系統(tǒng)下安裝Nodejs及配置less組件已基本完成，接下來(lái)我們配置WebStorm 2017.1，使其能將less文件編譯成css文件。

6、File-->Settings,打開(kāi)設(shè)置選項(xiàng)。找到“External Tools”擴(kuò)展工具設(shè)置項(xiàng)，點(diǎn)開(kāi)右側(cè)的“+”，在Name欄輸入“LESS”，“Tool settings”分別輸入如下：

F:\Program Files (x86)\nodejs\node.exe

C:\Users\bond\AppData\Roaming\npm\node_modules\less\bin\lessc $FilePath$ $FileDir$\$FileNameWithoutExtension$.css

F:\Program Files (x86)\nodejs

7、在Settings 面板頂端輸入“key”,找到快捷鍵設(shè)置項(xiàng)“Keymap”，在右側(cè)找到“External Tools”點(diǎn)開(kāi)，點(diǎn)選“LESS”并單擊右鍵，選擇“Add Keyboard Shortcut”,在出現(xiàn)其面板的“First Stroke”處同時(shí)按下“Alt+L”鍵，這樣就將“Alt+L”設(shè)置為將less文件編譯成css文件的快捷鍵。

最終，生成的css樣式，如下：

至此已成功將less文件編譯成css文件。

2.認(rèn)識(shí)less的四大特性

LESS 擁有四大特性：變量variables、混入mixins、嵌套、函數(shù)operations。

變量variables它官方的意思是允許像函數(shù)那樣定義常量值，然后調(diào)用到其他地方。

它可以只是用@前綴定義常量，調(diào)用。也可以用@前綴定義已經(jīng)定義變量的@前綴。隨便也插入sass的知識(shí)。

對(duì)于sass的變量是以$前綴定義常量的，同時(shí)也跟less一樣可以定義變量的變量。

如：

@base0:20px;
@base1:@base0+40px;

@global-color:blue;
header{
background:@global-color;
 padding:@base1;
}

而生成的css樣式是這樣的：

header {
 background: blue;
 padding: 60px;
}

其實(shí)我認(rèn)為變量功能上實(shí)際是可以代替原生css的base樣式表的基礎(chǔ)樣式功能。

其二就是升華為可以計(jì)算和循環(huán)的語(yǔ)法。使其真正意義上的向編程語(yǔ)言靠攏?？勺冃院涂裳h(huán)性增強(qiáng)。暫時(shí)理解是這樣。

再來(lái)一個(gè)深加工

@base0:20px;
@base1:@base0+40px;

@global-color:blue;

.bor-radius (@radius: 5px) {
 border-radius: @radius;
 -webkit-border-radius: @radius;
 -moz-border-radius: @radius;
}


header{
 background:@global-color;
 padding:@base1;
 .bor-radius(30px);
}
#div1{
 background:pink;
 .bor-radius;
}

生成的css是這樣的

header {
background: blue;
 padding: 60px;
 border-radius: 30px;
 -webkit-border-radius: 30px;
 -moz-border-radius: 30px;
}
#div1 {
background: pink;
 border-radius: 5px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
}

暫時(shí)很好理解。我是將它當(dāng)excel里的函數(shù)來(lái)理解的。

前面的例子總結(jié)一下是，用到了變量計(jì)算+變量混合（混合可以將一個(gè)定義好的class A輕松的引入到另一個(gè)class B中，從而簡(jiǎn)單實(shí)現(xiàn)class B繼承class A中的所有屬性。）

再來(lái)研究一下嵌套規(guī)則

#div1{
 background:pink;
 .bor-radius;
 h1{
 font-size:26px;
 }
 span{
 font-size:12px;
 a{
  text-decoration:none;
  &:hover{color:yellow;
   }
 }
 }
}

它亂結(jié)構(gòu)了，這個(gè)就調(diào)整了。以下沒(méi)時(shí)間一個(gè)一個(gè)的調(diào)哦。

他的css生成是這樣的。

#div1 h1 {
font-size: 26px;
}
#div1 span {
font-size: 12px;
}
#div1 span a {
text-decoration: none;
}
#div1 span a:hover {
color: yellow;
}

當(dāng)然要放上html里的代碼才容易理解

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <link rel="stylesheet" type="text/css" href="less/styles.css" rel="external nofollow" >
</head>
<body>
<header>
 <div id="div1">
  <h1>sb</h1>
  <span><a href="#" rel="external nofollow" >666</a></span>

 </div>
</header>
</body>
</html>

這么說(shuō)吧，less給我的感覺(jué)是，使用{}括號(hào)像編程語(yǔ)言這樣嵌套子元素。而css是固有的通過(guò)>或者空格“ ”來(lái)說(shuō)明下方是其子元素。而使用less還可以明確的知道他們之間的關(guān)系。

還有要說(shuō)一下的是，有個(gè)變量作用域這種說(shuō)法，其實(shí)就是變量可以重復(fù)賦值。

不知道看官，有沒(méi)有注意到一個(gè)問(wèn)題，就是我在.bor-radius中的代碼

.bor-radius (@radius: 5px) {
 border-radius: @radius;
 -webkit-border-radius: @radius;
 -moz-border-radius: @radius;
}

我覺(jué)得這里也是使用預(yù)處理的原因之一吧！直接省掉很多瀏覽器兼容的語(yǔ)句。

哦，雖然12點(diǎn)多了，但是還要說(shuō)一下的是如何調(diào)用多個(gè)less文件！

網(wǎng)上也給出了方法，就是import

比如A.less里面定義了一個(gè)變量@aaa:red，而B(niǎo).less文件里面也需要使用@aaa這個(gè)變量,那么

A.less內(nèi)容如下：

@aaa:red;

B.less內(nèi)容如下：

@import 'A.less';
div{
color:@aaa;
}

然后再html頁(yè)面引入B.less文件，編譯最終可以得到如下結(jié)果

div{
color:@aaa;
}

往大說(shuō)，就是當(dāng)多個(gè)less在一個(gè)總less里通過(guò)import引入，然后再html里調(diào)用總less，就可以調(diào)用所有的less了。

也差不多是這些了。

這能很好的讓我縮短時(shí)間。感謝我遇上了這個(gè)學(xué)習(xí)的機(jī)構(gòu)。

以上這篇認(rèn)識(shí)less和webstrom的less配置方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論