CSS預處理器之Less詳解

来源:https://www.cnblogs.com/smyhvae/archive/2018/02/26/8476602.html
-Advertisement-
Play Games

本文最初發表於 "博客園" ，併在 "GitHub" 上持續更新 前端的系列文章 。歡迎在GitHub上關註我，一起入門和進階前端。 以下是正文。 CSS 預處理器 為什麼要有 CSS 預處理器 CSS基本上是設計師的工具，不是程式員的工具 。在程式員的眼裡，CSS是很頭痛的事情，它並不像其它程式語 ...


本文最初發表於博客園，併在GitHub上持續更新前端的系列文章。歡迎在GitHub上關註我，一起入門和進階前端。

以下是正文。

CSS 預處理器

為什麼要有 CSS 預處理器

CSS基本上是設計師的工具，不是程式員的工具。在程式員的眼裡，CSS是很頭痛的事情，它並不像其它程式語言，比如說PHP、Javascript等等，有自己的變數、常量、條件語句以及一些編程語法，只是一行行單純的屬性描述，寫起來相當的費事，而且代碼難以組織和維護。

很自然的，有人就開始在想，能不能給CSS像其他程式語言一樣，加入一些編程元素，讓CSS能像其他程式語言一樣可以做一些預定的處理。這樣一來，就有了“CSS預處器（CSS Preprocessor）”。

什麼是 CSS 預處理器

  • 是 CSS 語言的超集，比CSS更豐滿。

CSS 預處理器定義了一種新的語言，其基本思想是：用一種專門的編程語言，為CSS增加了一些編程的特性，將CSS作為目標生成文件，然後開發者就只要使用這種語言進行編碼工作。

通俗的說，CSS預處理器用一種專門的編程語言，進行Web頁面樣式設計，然後再編譯成正常的CSS文件，以供項目使用。CSS預處理器為CSS增加一些編程的特性，無需考慮瀏覽器的相容性問題，例如你可以在CSS中使用變數、簡單的邏輯程式、函數等等在編程語言中的一些基本特性，可以讓你的CSS更加簡潔、適應性更強、可讀性更佳，更易於代碼的維護等諸多好處。

CSS預處理器技術已經非常成熟，而且也涌現出了很多種不同的CSS預處理器語言，比如說：Sass（SCSS）、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS等。如此之多的CSS預處理器，那麼“我應該選擇哪種CSS預處理器？”也相應成了最近網上的一大熱門話題，在Linkedin、Twitter、CSS-Trick、知呼以及各大技術論壇上，很多人為此爭論不休。相比過計我們對是否應該使用CSS預處理器的話題而言，這已經是很大的進步了。

到目前為止，在眾多優秀的CSS預處理器語言中就屬Sass、LESS和Stylus最優秀，討論的也多，對比的也多。本文將分別從他們產生的背景、安裝、使用語法、異同等幾個對比之處向你介紹這三款CSS預處理器語言。相信前端開發工程師會做出自己的選擇——我要選擇哪款CSS預處理器。

less 的介紹

less 是一款比較流行的預處理 CSS，支持變數、混合、函數、嵌套、迴圈等特點。

less 的語法

註釋

less 的註釋可以有兩種。

第一種註釋：模板註釋

  // 模板註釋 這裡的註釋轉換成CSS後將會刪除

因為 less 要轉換為 css才能在瀏覽器中使用。轉換成 css 之後，這種註釋會被刪除（畢竟 css 不識別這種註釋）。

第二種註釋：CSS 註釋語法


/* CSS 註釋語法 轉換為CSS後讓然保留 */

總結：如果在less中寫註釋，我們推薦寫第一種註釋。除非是類似於版權等內容，就採用第二種註釋。

定義變數

我們可以把重覆使用或經常修改的值定義為變數，在需要使用的地方引用這個變數即可。這樣可以避免很多重覆的工作量。

（1）在less文件中，定義一個變數的格式：

@變數名: 變數值;        //格式

@bgColor: #f5f5f5;      //格式舉例

（2）同時，在 less 文件中引用這個變數。

最終，less文件的完整版代碼如下：

main.less：

// 定義變數
@bgColor: #f5f5f5;

// 引用變數
body{
    background-color: @bgColor;
}

我們將上面的less文件編譯為 css 文件後（下一段講less文件的編譯），自動生成的代碼如下：

main.css：

body{
    background-color: #f5f5f5;
}

使用嵌套

在 css 中經常會用到子代選擇器，效果可能是這樣的：

.container {
  width: 1024px;
}

.container > .row {
  height: 100%;
}

.container > .row a {
  color: #f40;
}

.container > .row a:hover {
  color: #f50;
}

上面的代碼嵌套了很多層，寫起來很繁瑣。可如果用 less 的嵌套語法來寫這段代碼，就比較簡潔。

嵌套的舉例如下：

main.less:

.container {
  width: @containerWidth;

  > .row {
    height: 100%;
    a {
      color: #f40;

      &:hover {
        color: #f50;
      }

    }
  }

  div {
    width: 100px;

    .hello {
      background-color: #00f;
    }

  }
}

將上面的less文件編譯為 css 文件後，自動生成的代碼如下：

main.css

.container {
    width: 1024px;
}

.container > .row {
    height: 100%;
}

.container > .row a {
    color: #f40;
}

.container > .row a:hover {
    color: #f50;
}

.container div {
    width: 100px;
}

.container div .hello {
    background-color: #00f;
}

Mixin

Mixin 的作用是把重覆的代碼放到一個類當中，每次只要引用類名，就可以引用到裡面的代碼了，非常方便。

（1）在 less 文件中定義一個類：（將重覆的代碼放到自定義的類中）

/* 定義一個類 */
.roundedCorners(@radius: 5px) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}

上方代碼中，第一行裡面，括弧里的內容是參數：這個參數是預設值。

（2）在 less 文件中引用上面這個類：

#header {
  .roundedCorners;
}
#footer {
  .roundedCorners(10px);
}

上方代碼中，header 中的引用沒有帶參數，表示參數為預設值； footer 中的引用帶了參數，那就用這個參數。

Import

在開發階段，我們可以將不同的樣式放到多個文件中，最後通過@import 的方式合併。意思就是，當出現多個 less 文件時，怎麼引用它們。

這個很好理解， css 文件可以有很多個，less文件也可以有很多個。

（1）定義一個被引用的less文件，名為_button1.less：

_button1.less:

.btn{
  line-height: 100px;
  color: @btnColor;
}

PS1：被引用的less文件，我們習慣在前面加下劃線，表示它是部分文件。

PS2：_button1.less里可以引用main.css里的自定義變數。

（2）在 main.css 中引用上面的 _button1.less：（代碼的第二行）

main.css：

@btnColor: red;

@import url(`_button1.less:');    //這裡的路徑寫的是相對路徑

body{
  width: 1024px;
}

將 上面的main.less 編譯為 main.css之後，自動生成的代碼如下：

.btn {
    line-height: 100px;
    color: red;
}

body {
    width: 1024px;
}

內置函數

less 里有一些內置的函數，這裡講一下 lighten 和 darken 這兩個內置函數。

main.less:

body {
  background-color: lighten(#000, 10%);   // 讓黑色變亮 10%
  color: darken(#fff, 10%);               // 讓白色變暗 10%
}

將 上面的 main.less 編譯為 main.css 之後，自動生成的代碼如下：

main.css：

body {
  background-color: #1a1a1a;
  color: #e6e6e6;
}

如果還有什麼不懂的，可以看 api 文檔，在上面的第二段附上了鏈接。

在 index.html中直接引用 less.js

  • 做法一：寫完 less文件後，將其編譯為 css 文件，然後在代碼中引用css文件。

  • 做法二：在代碼中直接用引用 less 文件。

產品上線後，當然是使用做法一，因為做法二會多出編譯的時間。

平時開發或演示demo的時候可以用做法二。

這一段，我們講一下做法二，其實是瀏覽器在本地線上地把 less 文件轉換為 css 文件。

（1）在 less 官網下載 less.js 文件：

把下載好的文件放在工程文件的lib文件夾里：

（2）在 index.html 中引入 less.js 和我們自己寫的 main.less。位置如下：

copy 紅框那部分的代碼如下：

    <link rel="stylesheet/less" href="../main.less">

我們可以在打開的網頁中，通過控制台看到效果：

註意，我們要在伺服器中打開 html 文件，否則，看不到效果。

這裡也告訴了我們：

不提倡將 less 引入頁面，因為 less 需要編譯，因此你就需要再引入一個less.js, 多了一個HTTP 請求，同時當瀏覽器禁用了 js 你的樣式就不起作用了，less 編譯應該在服務端或使用 grunt 自動編譯。

工程文件：（工程文件中，我引用的less.js版本是 2.5.3）

參考鏈接：

less 的編譯

less 的編譯指的是將寫好的 less 文件 生成為 css 文件。

less 的編譯，依賴於 NodeJS 環境。因此，我們需要先安裝 NodeJS。

1、安裝 Node.js

去 Node.js的官網下載安裝包：

一路 next 進行安裝。

安裝完成後，配置環境變數：

在 path 變數中追加安裝路徑：;C:\Program Files\nodejs。重啟資源管理器，即可生效。

PS：我發現，我安裝的 node.js v8.9.4 版本，已經自動添加了環境變數。

在 cmd 命令行，輸入node.exe -v，可以查看 node.js 的版本。

2、安裝 less 的編譯環境

將 npm.zip 解壓，將解壓後的文件拷貝到路徑C:\Users\smyhvae\AppData\Roaming\npm下：

然後重啟資源管理器（或者重啟電腦）。在 cmd 中輸入 lessc，如果能看到下麵的效果，說明 less編譯環境安裝成功：

如果你用的是 linux 系統，可以輸入下麵的命令安裝：

    npm install -g less

3、將 less 文件編譯為 css 文件

在 less 所在的路徑下，輸入 lessc xxx.less，即可編譯成功。或者，如果輸入 lessc xxx.less > ..\xx.css，表示輸出到指定路徑。

我的公眾號

想學習代碼之外的軟技能？不妨關註我的微信公眾號：生命團隊（id：vitateam）。

掃一掃，你將發現另一個全新的世界，而這將是一場美麗的意外：


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • iOS-消除CocoaPods內容警告
    前言 2018年2月26日 農曆正月十一 星期一 今天就想更新下博客，內容不多，心情複雜； 突然想吟詩一首： 其實，我是一個善良的人； 其實，我是一枚... 算了，還是說正事吧 消除CocoaPods警告 在我們集成了CocoaPods 並 install 後，有些集成後的內容會有很多警告，其實只需 ...
  • Android自定義圖片選擇器2-仿微信版
    1關於圖片選擇器的重點的地方上一篇已經寫了，主要就是如何獲取手機圖片的問題，至於仿微信，主要就是佈局的問題了。 2年前的時候自己就斷斷續續的寫這個，本來以為是比較好寫的，但是越寫發現微信的細節越多，之前有點考慮不對的地方改來改去，再加上我自己不會切圖，能用代碼畫的基本上都用代碼畫出來的，基本沒用圖片 ...
  • [Android FrameWork 6.0源碼學習] View的重繪ViewRootImpl的setView方法
    博客首頁：http://www.cnblogs.com/kezhuang/p/ 本篇文章來分析一下WindowManager的後續工作，也就是ViewRootImpl的setView函數的工作 本篇內容很簡單，僅僅是個大繪製流程的初始化工作，接下來會著重分析performTraversals函數，在 ...
  • Android 音視頻深入 十四 FFmpeg與OpenSL ES 播放mp3音樂，能暫停（附源碼下載）
    項目地址https://github.com/979451341/FFmpegOpenslES 這次說的是FFmpeg解碼mp3，數據給OpenSL ES播放，並且能夠暫停。 1.創建引擎 2.創建混音器 3.FFmpeg解碼mp3準備工作 4.緩存隊列設置 最後還要給這個緩存回調函數賦予參數，這個 ...
  • html讓圖片居中顯示
    <div align=center><img............></div> ...
  • CSS佈局(一) 盒子模型
    一、盒子模型 標準盒子模型 從下圖可以看到標準 w3c 盒子模型的範圍包括 content、padding、border、margin，並且 content 部分不包含其他部分。 怪異盒子模型 從下圖可以看到 ie 盒子模型的範圍也包括 margin、border、padding、content，和 ...
  • vscode常用設置
    前面的話 本文是vscode使用中遇到問題的解決辦法總結 CPU100% 有時，vscode會出現CPU利用率100%的情況，兩個rg.exe占用了全部的CPU。解決辦法如下 文件>首選項>設置, 搜索設置 "search.followSymlinks" ：false； emmet 若想在jsx中使 ...
  • ajax跨域問題解決思路
    ajax跨域問題的解決思路主要分為3種： 1.瀏覽器限制解決思路：不讓瀏覽器做出限制解決方法：通過指定參數，讓瀏覽器不做跨域校驗評價：價值不大，需要每個人都做改動，而且改動是客戶端的改動 2.XHR請求解決思路：不使用XHR解決方法：JSONP缺點：無法滿足現有的開發要求 3.跨域（重要）解決思路： ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類