從零開始學 Web 之 移動Web(八)Less
大家好,這裡是「 從零開始學 Web 系列教程 」,並在下列地址同步更新......
- github:https://github.com/Daotin/Web
- 部落格園:http://www.cnblogs.com/lvonve/
- CSDN:https://blog.csdn.net/lvonve/
在這裡我會從 Web 前端零基礎開始,一步步學習 Web 相關的知識點,期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的探索之旅吧!
一、Less簡介
LESS 是一種動態的樣式表語言,通過簡潔明瞭的語法定義,使編寫 CSS 的工作變得非常簡單,本質上,LESS 包含一套自定義的語法及一個解析器。
二、less 安裝
1、下載安裝 node.js 環境。(官網:https://nodejs.org/zh-cn/)
2、安裝完成後驗證 node 環境是否安裝成功。
在命令列中輸入:node -v
出現 node 的版本號表示安裝成功。
3、安裝 less 工具(需要聯網)。
在命令列中輸入:npm install -g less
即可下載安裝。
4、安裝後驗證 less 是否安裝成功。
命令列輸入:lessc -v
出現 less 版本號,即表示安裝成功。
三、編譯
瀏覽器只能識別 CSS,Less 只是用來提升CSS可維護性的一個工具,所最終需要將LESS編譯成CSS。
編譯方式有兩種:
1、一種是使用命令列的方式手工編譯。
在我們編寫好一個 less 檔案後,可以使用命令列輸入以下指令將 less 檔案編譯成 css 檔案。
lessc .\test.less .\test.css
這種手工編譯的方式效率比較低下,一般我們都會藉助一些編輯器來完成自動編譯。
2、這裡我使用 vscode,使用很簡單,只需要安裝外掛 “Easy LESS” ,那麼編寫的 less 檔案在儲存時會自動在 less 檔案相同的目錄下生成 css 檔案。
四、語法
1、註釋
註釋的方式有兩種://
或者 /**/
。
但是這兩種註釋有區別:這兩種樣式在 less 中都是註釋,但是 //
註釋不會進行編譯,也就是不會在生成的 css 檔案中顯示,而 /**/
/*註釋 才會編譯*/
//這也是樣式,但是不會進行編譯
2、變數
語法格式為:@變數名:值;
,比如 @baseColor: #ccc;
使用的時候: div { color: @baseColor;}
/*變數 @變數名:值; */
@baseColor:#e92322;
a{
color: @baseColor;
}
3、混入(類似於函式)
語法:.樣式名(@變數名 :預設值) {具體樣式}
/*混入:可以將一個定義好的樣式引入到另外一個樣式中 類似於函式的呼叫*/
/*.addRadius{
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}*/
/*相當於定義一個函式的引數*/
.addRadius(@r:10px){
border-radius: @r;
-webkit-border-radius: @r;
-moz-border-radius: @r;
}
div{
width: 200px;
height: 200px;
/*引入已經寫好的圓角樣式*/
/*傳入引數*/
.addRadius(5px);
}
4、巢狀
巢狀可以實現選擇器的繼承,可以減少程式碼量,同時使用程式碼結構更加清晰。
/* 以前我們寫的樣式
.jd_header{}
.jd_header > div{}
.jd_header > div > h3{}
.jd_header > div > h3::before{}
.jd_header > div > a{}
.jd_header > div > a:hover{}
*/
/*巢狀:實現選擇器的繼承,可以減少程式碼量,同時使用程式碼結構更加清晰*/
.jd_header{
width: 100%;
height: 200px;
.addRadius();
// 加 > 表示直接子元素
> div{
// 加 & 表示中間沒有空格為 div::before,如果沒有 & 則是 div ::before 就錯了。
&::before{
content: "";
}
width: 100%;
// div下面的直接子元素a
>a{
text-decoration: underline;
// a::hover,中間沒有空格
&:hover{
text-decoration: none;
}
}
> h3{
height: 20px;
}
ul{
list-style: none;
}
}
}
五、less 檔案引入
我們之前編寫好 less 檔案之後,都是自動解析成 css 然後新增到 html 檔案中。如果 css 的檔案很多的話,就要引入很多個 link 標籤,那麼可不可以直接引入 less 檔案呢?
當然可以。
語法:
<link rel="stylesheet/less" href="./index.less">
只是在 stylesheet 後面加上 less 的說明。
只是引入 less 檔案是不可以的,還需要引入解析 less 的 js 外掛。
<script src="./js/less.js"></script>
看起來好麻煩哦,為什麼要引入 less 檔案,它有什麼好處嗎?
好處是:不管有多少 less 檔案,只需要引入一個 less 檔案就可以了,其他需要的 less 檔案都包含在引入的這個 less 檔案中。
如何在 less 檔案中引入其他 less 檔案呢?
語法:
@import "other1.less"; // other.less 為其他 less 檔案的路徑名稱
@import "other2.less";
@import "other3.less";
這樣,不管有多少個 less 檔案,都可以寫到一個待引入的 less 檔案中。
相關推薦
《從零開始學Swift》學習筆記(Day67)——Cocoa Touch設計模式及應用之MVC模式
table control sdn rate term targe rac uitabbar bsp 原創文章,歡迎轉載。轉載請註明:關東升的博客 MVC(Model-View-Controller,模型-視圖-控制器)模式是相當古老的設計模式之中的一個,它最早出如今
《從零開始學Swift》學習筆記(Day60)——Core Foundation框架
類型轉換 字符 sso grid blog spa www water 轉載 創文章,歡迎轉載。轉載請註明:關東升的博客 Core Foundation框架是蘋果公司提供一套概念來源於Foundation框架,編程接口面向C語言風格的API。盡管在Swift中調用這樣
從零開始學Kotlin-使用接口(7)
如何 mark android interface inter rand 兩個 blog dtw 從零開始學Kotlin基礎篇系列文章 定義接口 使用關鍵字interface定義接口 interface InterfaceDemo7 { } 類或對象可以實現一個或者多個接
webpack從零開始構建專案之rem問題(三)
使用webpack解決px轉rem的自適應問題 現在的專案配置已經可以正常執行 接下來我們要考慮下一個問題,由於VUE主要適用於移動端,所以我們需要一個自適應方案 由於這是一個大眾需求的剛需方案,所以我們大可不必自己手動去寫JS程式碼,重複造輪子 那麼我
【高德地圖API】從零開始學高德JS API(七)——定位方式大揭祕
摘要:關於定位,分為GPS定位和網路定位2種。GPS定位,精度較高,可達到10米,但室內不可用,且超級費電。網路定位,分為wifi定位和基站定位,都是通過獲取wifi或者基站資訊,然後查詢對應的wifi或者基站位置資料庫,得到的定位地點。定位資料庫可以不斷完善不斷補充,所以,
從零開始學習音視訊程式設計技術(八)FFMPEG Qt視訊播放器之音視訊同步
前面分別講解了: 現在我們就將視訊和音訊合併,並讓聲音和畫面同步。 加入音訊的部分就不做講解了,這裡主要講下聲音和視訊同步的步驟。 首先剛開始播放的時候通過av_gettime()獲取系統主時鐘,記錄下來。 以後便不斷呼叫av_gettime()獲取系統時鐘
轉載:高德地圖API學習 從零開始學高德JS API(一)地圖展現
摘要:關於地圖的顯示,我想大家最關心的就是麻點圖,自定義底圖的解決方案了吧。在過去,marker大於500之後,瀏覽器開始逐漸卡死,大家都開始尋找解決方案,比如聚合marker啊,比如麻點圖啊。聚合marker裡面還有一些複雜的演算法,而麻點圖,最讓大家頭疼的,就是如何生成麻點圖,如何切圖,如何把圖片貼到地圖
《從零開始學Swift》學習筆記(Day 57)——Swift編碼規範之凝視規範:文件凝視、文檔凝視、代碼凝視、使用地標凝視
精品 -type mil 顯示 clas ber ansi tex text 原創文章。歡迎轉載。轉載請註明:關東升的博客 前面說到Swift凝視的語法有兩種:單行凝視(//)和多行凝視(/*...*/)。這裏來介紹一下他們的使用規範。 1、文件凝視文件凝視就在每個文
【SpringMvc】從零開始學SpringMvc之資料庫(二)
大家好,在上一篇中,我們介紹了SpringMvc 的搭建,這篇我們來看下SpringMvc連線資料庫。 【SpringMvc】從零開始學SpringMvc之初始化(一) 準備 首先, 需要安裝Mysql、Navicat(或者類似軟體)、有一點sql基礎,瞭解一點
【SpringMvc】從零開始學SpringMvc之初始化(一)
大家好,我們今天開始SpringMvc 這個系列,由於筆者也是安卓出身,對SpringMvc 也是接觸不久,所以,這個系列僅僅只是記錄筆者學習SpringMvc 過程中的心得,如有錯誤,歡迎指正。 在開始之前,我們需要準備一些東西,JDK、Eclipse(MyEclipse)、Tom
【SpringMvc】從零開始學SpringMvc之實現使用者登入(三)
大家好,在前2篇中,我們實現了SpringMvc的配置和資料庫連線,這一篇我們來用html/ajax實現一個簡單的登入功能。 【SpringMvc】從零開始學SpringMvc之初始化(一) 【SpringMvc】從零開始學SpringMvc之資料庫(二) 準
【SpringMvc】從零開始學SpringMvc之實現使用者管理(四)
大家好,在上一篇中,我們實現了使用者登入,這一篇我們來實現使用者的增刪改查。由於在第2篇中,我們已經建立好了資料庫,這裡就不在詳述了。 準備 這裡,我們用到了騰訊的前端模板引擎art-template,不熟悉的小夥伴可以先了解一番,或者有熟悉其他模板引擎的,也
從零開始學Java之五種內部類將執行緒隱藏類中
1.使用普通內部類繼承Thread類 <code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box;
從零開始學C++之虛擬函式與多型(一):虛擬函式表指標、虛解構函式、object slicing與虛擬函式、C++物件模型圖
#include <iostream>using namespace std;class CObject {public: virtual void Serialize() { cout << "CObject::Serialize ..." <&
從零開始學Java之單例模式:懶漢模式和飽漢模式
單例模式:單例模式是一種常用的軟體設計模式。在它的核心結構中只包含一個被稱為單例類的特殊類。通過單例模式可以保證系統中一個類只有一個例項而且該例項易於外界訪問,從而方便對例項個數的控制並節約系統資源。
從零開始學C++之IO流類庫(三):檔案的讀寫、二進位制檔案的讀寫、檔案隨機讀寫
#include <cassert>#include <iostream>#include <fstream>#include <string>using namespace std;struct Test { int a; int b; };i
從零開始學Java之出入門衛管理(二)
這個系統包含了四塊,第一塊就是人員管理,經理分配三位分別有“ABC"許可權的人,分別管理請假申請,請假審批,門衛登記管理。同時不屬於本公司的內部人員,如別的公司的人員如果想到本公司訪問,也是先通過這”ABC“許可權的三個人代為寫來訪申請,來訪審批,來訪門衛登記管理
從零開始學Java之 編寫簡單的工程
筆者本人從最初開始接觸C語言、C++、VC++、彙編到後來接觸PHP以及Java,在這些語言的使用過程中深刻感受到這些語言都是相同的編寫思路,程式碼編寫的方式也是大同小異,目前認為Java語言的亮點是package以及反射機制。 package不僅提供
從零開始學Python3之五——模組
from ... import ... 什麼的我就不寫了= =模組的 __name__每個模組都有一個名稱,模組中的語句可以找到它們所處的模組的名稱。當模組第一次被匯入時,它所包含的程式碼將被執行。我們可以通過這一特性來使模組以不同的方式執行,這取決於它是為自己所用還
從零開始學Android之 AutoCompleteView 動態匹配輸入的內容(像搜尋引擎上的匹配)
1.AutoCompleteTextView屬性: 1>動態匹配輸入的內容 2>android:completionThreshold="n" -- 輸入n個字元開始匹配 在ac