Less-學習前的準備工做

時間 2019-11-11

標籤學習準備简体版

原文原文鏈接

學習less，咱們確定要有相應的環境，咱們預覽網址css

http://www.1024i.com/demo/less/html

提供了2種方法，咱們採用服務端用法，不過只是用前半部分，就是把寫好的less文件轉爲css文件，html引用的仍是css文件，僅僅做爲css開發工具前端

咱們要作的一些工做node

1.nodejs的安裝，這個很少說npm

http://my.oschina.net/u/2352644/blog/487488sass

2.安裝less，咱們進入cmd窗口執行less

npm install -g less

3.檢測less是否安裝工具

lessc -v

4.都無提示表示成功安裝，這些步驟很是簡單學習

5.咱們建立一個文件夾，個人叫 lessdemo，下面建立demo.html 開發工具

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>less</title>
<link rel="stylesheet" type="text/css" href="less.css"/>
</head>
<body>
 <div class="demo">less</div>
</body>
</html>

6.咱們在lessdemo下建立less.less文件，裏面會寫入被less支持的語法，less對css兼容，咱們放入一段原生css

.demo{
height: 93px;
color: #000;
font-size: 22px;
line-height: 93px;
border-radius: 10px;
overflow: hidden;
width:200px;
border:1px solid #000;
}

7.lessdemo下有如下文件

咱們預覽demo.html，是不帶樣式的，由於沒有less.css

8.咱們cmd窗口切換到lessdemo文件夾

個人命令：

cd nodejs/lessdemo

9.當前目錄找到，已經寫好了less.less，咱們執行less命令，進行編譯

lessc less.less>less.css

10.咱們在lessdemo下就能夠看到編譯生成的less.css了，預覽html頁面，看到有圓角和高度等樣式的內容

11.其餘

1.咱們先到定位到存放less文件目錄

2. lessc 編譯命令

3. > 表示編譯後的css存放在當前目錄下

做爲前端，確定沒用過也會據說過less這種預處理css，比較熱門的除了less還有sass和styuls

sass是最先出現的，咱們知道css很是簡單，是不帶語法的，開發人員爲了讓他帶有語言功能，這門技術出現了，sass對比less語法更嚴格

less是在sass以後出現，借鑑了sass，語法上比較接近css

styuls這是來自nodejs社區，爲node開發提供的預處理css技術

對比之下咱們學習less和styuls比較適合前端，不過less應用的更多一些，學習預處理css技術，咱們入門就從學習less開始！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。