CSS的預編譯——less語言基本語法教程（入門）

阿新 • • 發佈：2018-12-28

less語言基本語法教程（入門）

一、CSS解析
css是一門標記性語言，語法簡單，對使用者的要求也比較低。

缺點：1、對於css：使用css時需要書寫大量的看似沒有邏輯的程式碼，不方便維護和擴充套件，不利於複用；

2、對於開發者：如果一個程式設計師缺乏對css的編寫經驗，那麼想寫出組織良好且易於維護的css程式碼是一件很困難的事情。

二、LESS簡介

LESS 是一門 CSS 預處理語言，LESS在CSS的語法基礎上增加了變數、Mixin、函式等特性，使 CSS 更易維護和擴充套件，可以讓我們用更少的程式碼做更多的事情。另外，

LESS可以執行在 Node 或瀏覽器端。

官網地址：http://lesscss.org/ （英文網）

http://less.bootcss.com/ （中文網）

bootstrap官網中less教程： http://www.bootcss.com/p/lesscss/

三、LESS引入

1、客戶端使用.less檔案：先要從 http://lesscss.org 下載 less.js 檔案，然後在我們需要引入 LESS 原始檔的 HTML 中加入如下程式碼：

（1）<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

（2）引入手機端初始化.css(reset.css)

（3）用rem來寫的話必須引入media-100.css和iconfont.css (media-100.css檔案是封裝好的css，兩者屬於可選)

（4）<link rel="stylesheet/less" type="text/css" href="styles.less">

注意：此處的rel屬性值是“ stylesheet/less ”。

自己寫的less原始檔一定要在less.js引入之前引入，才能保證自己的less原始檔正確編譯解析。

（5）<script src="less.min.js" type="text/javascript"></script>

2.在開發工具中使用：主要是藉助於LESS的編譯器，將less原始檔編譯生成最終的css檔案（推薦）

以HBulider開發工具為例：

（1）開啟HBuilder--工具 -- 預編譯器設定 - -新建 -- 檔案字尾 .less--觸發命令地址 (選擇...找到.cmd的路徑)--命令引數 %FileName% %FileBaseName%.min.js --- 智慧完成/確定

（2）在專案裡面新建less檔案，寫less時系統會自動編譯成css檔案（如果沒有成功，關閉HBuilder，右鍵以管理員身份開啟）

四、LESS的使用（CSS樣式處理）

1、變數：一次定義可以重複使用

變數允許我們單獨定義一系列通用的樣式，然後在需要的時候去呼叫，所以在做全域性樣式調整的時候我們只需要修改幾行的程式碼就OK了。

  // LESS

@color: #4D926F; （自己定義的變數）

#header {
  color: @color;
}
h2 {
  color: @color;
}


/* 生成的 CSS */

#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

2、混入--Mixins：先申明一個類，然後在其它類中呼叫當前這個類

混合可以將一個定義好的classA引入到另一個classB中，從而簡單的實現classB繼承classA中的所有屬性，我們還可以帶引數呼叫，就像使用函式一樣。

// LESS

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

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}


/* 生成的 CSS */

#header {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
#footer {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

3、繼承

有類A用了一組樣式，另外一個類B也想用這個樣式，這樣的話類B可以繼承類A的樣式：

// LESS
.base-style {
  font-size: 26px;
  font-weight: bold;
}


第一種繼承寫法：
#header {
  .base-style();
  color:red;
}

第二種繼承寫法：
#header {
  &:extend(.base-style);
  color:red;
}


/* 生成的 CSS */
兩種寫法不同，編譯後生成的CSS樣式也不一樣

第一種：
.base-style {
  font-size: 26px;
  font-weight: bold;
}


#header {
 font-size: 26px;
 font-weight:bold;
 color:red;
}


第二種：
#header, .base-style {
  font-size:26px;
  font-weight:bold;
}
#header {
color: red;
}

4、巢狀規則

我們可以在一個選擇器中巢狀另一個選擇器來實現繼承，這樣很大程度上減少了程式碼量，並且程式碼看起來更加的清晰，

其中&符號的使用——如果你想寫串聯選擇器而不是後代選擇器，就可以用到&了，這點對偽類尤其有用，如：hover 和：focus。

// LESS

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}


/* 生成的 CSS */

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

5、函式&運算

運算提供了加減乘除操作；我們可以做屬性和顏色的運算，這樣就可以實現屬性值之間的複雜關係。

LESS中的函式——映射了JavaScript程式碼，還可以操作屬性值。

// LESS

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}


/* 生成的 CSS */

#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}
#footer { 
  color: #114411;
  border-color: #7d2717;
}


詳細函式功能請參考：http://less.bootcss.com/functions/
詳細函式功能請參考：http://less.bootcss.com/functions/

6、作用域

LESS中的作用域和其他程式語言相似，LESS會從本地查詢變數或者混合模組，如果沒找到的話會去父級作用域中查到，直到找到為止。


@var: red;


#page {
  @var: white;
  #header {
    color: @var; // white
  }


#footer {
  color: @var; // red  
}

CSS的預編譯——less語言基本語法教程（入門）

less語言基本語法教程（入門）一、CSS解析 css是一門標記性語言，語法簡單，對使用者的要求也比較低。缺點：1、對於css：使用css時需要書寫大量的看似沒有邏輯的程式碼，不方便維護和擴充套件，不利於複用；

C語言-基本語法教程

C 的令牌（Tokens） C 程式由各種令牌組成，令牌可以是關鍵字、識別符號、常量、字串值，或者是一個符號。例如，下面的 C 語句包括五個令牌：這五個令牌分別是：分號 ; 在 C 程式中，分號是語句結束符。也就是說，每個語句必須以分號結束。它表明一個邏輯實體

Kotlin VS Java：基本語法差異（轉載）

允許接收 point this view 學習替換同時 ons 5月18號，goole宣布Kotlin成為官方支持的開發語言以來，Kotlin語言社區，公眾號，qq群等全面轟炸，本文是一篇譯文，來自國外的一個用戶，將給大家介紹，基礎語法部分Kotlin和java之間的

js基本語法總結（一）

向上取整取余轉字符串結果 lin ase 調試錯誤進行 1.js簡介 a）js是一種網頁腳本語言，使得瀏覽器可以與網頁互動。 js的一種基於對象和事件驅動，具有安全性能的腳本語言，腳本語言就是在客戶端的瀏覽器就可以互動響應處理程序的語言，而不需要服務器的處理和響應

Scala基本語法總結（一）

Scala基本語法總結時隔快一年了，又撿起scala，不是想學的有多麼的精通，只是想把之前遇到的知識點和實踐中遇到的重點進行歸納總結，對以後的面試或許有點幫助吧！一、scala開發環境的配置我這裡分享一下有道雲筆記的地址，有之前學習的時候對scala的安裝方法的詳細描述，有興趣的可以看看 http

Groovy語言學習--語法基礎（1）

2018年11月末，從上家公司離職後進入現在的公司。進入專案以來，發現專案中有很多groovy指令碼，以前沒接觸過groovy,抽時間系統地學一下，也方便後期專案的開發和維護。 groovy和java的淵源以及和規則引擎的比較，作為白板目前還沒評論的資格，學語言當然還是直接擼程式碼來得實在。好在和java同

Groovy語言學習--語法基礎（3）

若有 nes 2.4 基礎語法 col del person div metaclass 側重點可能是groovy metaClass基元類的概念，有點像java的反射，因為java反射目前基本也沒研究過，就mark一下,後續若有用到就深入研究一下。基礎語法的東西

Groovy語言學習--語法基礎（5）

應該 github 結束 tle java targe cit 範圍項目至此groovy語言學習-語法基礎就結束了，新的工作已經安排下來，要幹活了。對groovy了解到一定程度之後就可以在java項目中對其進行引入了。為此新建了一個微型的項目，個人覺得千言萬語

Oracle資料庫使用基本語法整理——（1）

資料庫高階（oracle）1、sql基礎 1.1 sql語言：structure query language DDL：(data define language) create \drop\alter\truncate(截斷) ddl預設自帶事務，自動提交

Python3的基本語法學習（一）

一、Python的基本資料型別 python簡化了資料型別。整數：int （其他語言：單精度（float），雙精度（double））浮點數：float （其他語言：short，int，long） tips:1.可以

Android ORM——greenDAO 3之Properties、QueryBuilder與資料庫的增刪改查的基本語法應用（二）

引言 Android ORM——初識greenDAO 3及使用greenDAO 3前應該掌握的一些知識點介紹了greenDAO的配置步驟和一些重要的知識點，以及重要的角色的功能和聯絡，這一篇就正式開始結合點原始碼從應用greenDAO方面總結。在使用green

java學習之路之基本語法-方法（函式）及練習題

方法（函式）：方法是類或物件行為特徵的抽象，也稱為函式。 Java裡的方法不能獨立存在，所有的方法必須定義在類裡。方法的宣告的語法格式：修飾符返回值型別方法名（引數型別形參1，引數型別形參2，….）｛程式程式碼 return 返回值; ｝其中：形式引數：

neo4j 基本語法筆記（全）

按照總監要求看了兩天的neo4j 資料庫的使用。在網上找了一個基礎教程類似於w3c.school的網站（英文，中文，中文的翻譯的不是很好，如果英文不好可以輔助理解），這個教程基礎知識很全全面，從資料庫的安裝，到spring框架下的使用都有降到，由於spring

Verilog學習筆記基本語法篇（四）·········塊語句

http://www.cnblogs.com/SYoong/archive/2016/09/08/5852128.html 塊語句是指將兩條或者兩條以上的語句組合在一起，使其在格式上更像一條語句。塊語句分為兩種： 1）用begin_end語句，通常用來標識順序執行的

MATLAB基本語法介紹（上）

一、安裝略二、介紹 MATLAB和Mathematica、Maple並稱為三大數學軟體。它在數學類科技應用軟體中在數值計算方面首屈一指。MATLAB可以進行矩陣運算、繪製函式和資料、實現演算法、建立使用者介面、連線其他程式語言的程式等，主要應用於工程計算、控制設計、

建立一門新的程式語言-Flex&Bison教程-（1）-初探

之前一直想鑽研一下這方面的東西，於是便花了一些精力研究這些相關的工具和技術，現在我把我總結的一些經驗分享給大家 Flex & Bison 是比較有名而且易用的parser組合，今後的工作大體都用到了這兩個工具。他們可以在gnu官網下載，windows使用者要麼去下載

用C語言擴充套件lua模組（入門）

#include <lua.h> #include <lauxlib.h> #include <lualib.h> static void encode_sha(const char* src, char* des) { /* *sha-hash /

為什麼要使用CSS預編譯處理器？eg：LESS，SASS

前端逐步瞭解的過程中，經常提及一個技術：css預編譯處理查詢相關資料後發現，是用另一種格式的語言讓css也能像程式語言一樣寫，然後再將其轉換為css 瞭解其大概原理後，就十分疑惑為什麼要引進這種技術與概念，查詢相關資料後，發現有個帖子解答了我的疑惑：

全國計算機等級考試二級教程--python語言程式設計（2018年版）第二章：PYthon語言基本語法元素

宣告：本篇文章只是個人知識盲區、知識弱點、重點部分的歸納總結，望各位大佬不喜勿噴。梳理順序是按照書籍的實際順序梳理，轉載請註明出處。作者：sumjess 一、程式的格式框架： 1、縮排：縮排指每行語

CSS預編譯工具（SASS，LESS）

SASS和LESS都是專用於CSS的預編譯語言，他們2者的功能，操作都是大同小異。LESS稍微簡單一些，而SASS有一些比較成熟的框架（如compass），功能強大一些，其中的語法也比較符合一門程式語言的習慣，比如說函式，作用域，程序控制等等。所以，我也是選擇的SASS來

CSS的預編譯——less語言基本語法教程（入門）

less語言基本語法教程（入門）

相關推薦