Less 基礎
1.CSS是一門非程序語言， 沒有變量、函數、SCOPE（作用域）等概念。
1. CSS需要書寫大量看似沒有邏輯的代碼，CSS冗餘度是比較高的。
2. 不方便維護及擴展，不利於複用。
3. CSS沒有很好的計算能力。
4. 非前端開發工程師來講，往往會因爲缺少CSS編程經驗而很難寫出組織良好且易於維護的CSS代碼項目。
css的缺點：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html{
font-size: 50px;
}
img{
/* width: 82px;
height: 82px; */
width: 1.64rem;
height: 1.64rem;
}
div{
background-color: blue;
}
p{
background-color: blue;
}
span{
background-color: blue;
}
</style>
</head>
<body>
</body>
</html>
這樣寫的話太麻煩了。。
2. Less 介紹
Less （leaner Style Sheets 的縮寫） 是一門CSS擴展語言， 也就成爲CSS預處理器。
作爲CSS的一種形式的擴展，它並沒減少CSS的功能，而是在現有的CSS語法上，爲CSS加入程序是語言的特性。
它在 CSS 的語法基礎之上，引入了變量，Mixin （混入）， 運算以及函數等功能，大大簡化了CSS的編寫，
並且降低了CSS的維護成本，就像它的名稱所說的那樣，less可以讓我們用更少的代碼做更多的事情。
這是Less中文網址：
http://lesscss.cn/
常見的css預處理器： Sass、Less、Stylus
一句話：Less是一門CSS預處理語言，它擴展了CSS的動態特性。
3. Less 安裝
1. 安裝nodejs，可選擇版本（8.0）， 網址：http://nodejs.cn/download/
2. 檢查是否安裝成功，使用cmd命令（win10 是 Windows +r 打開 運行輸入cmd） ---輸入 “node-v”查看版本即可。
3. 基於nodejs在線安裝less， 使用cmd命令“npm install -g less” 即可。
4. 檢查是否安裝成功，使用cmd命令“lessc -v” 查看版本即可。
less 使用：
我們首先新建一個後綴名爲less的文件，在這個less文件裏面書寫less語句。
less變量
less編譯
less嵌套
less運算
4. less變量
變量是指沒有固定的值，可以改變的，因爲我們CSS中的一些顏色和數值等經常使用。
@變量名：值；
1. 變量命名規範
必須有@爲前綴
不能包括特殊字符
不能以數字開頭
大小寫敏感
5. less 編譯
本質，less包含一套自定義的語法及一個解析器，用戶根據這些語法定義自己的樣式規則，這些規則
最終會通過解析器，編譯生成對應的CSS文件。
所以，我們需要把我們的less文件，編譯生成爲css文件，這樣我們的html頁 面才能使用。
vocode Less 插件
Easy LESS 插件用來把less文件編譯爲
css文件
安裝完畢插件，重新加載下 vscode。
只要保存一下Less文件，會自動生成CSS文件。
命令演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="Untitled-1.css">
</head>
<body>
<div>
我們顏色也是粉色
</div>
</body>
</html>
less：
//定義一個粉色的變量
@color:pink ;
//錯誤的變量名 @1color @color~@#
// 變量名區分大小寫 @color 和 @Color 是兩個不同的變量
// 定義了一個字體爲14像素的變量
@font14:14px;
body{
background-color: @color;
}
div{
color: @color;
font-size: @font14;
}
a{
font-size: @font14;
}
css：
body {
background-color: pink;
}
div {
color: pink;
font-size: 14px;
}
a {
font-size: 14px;
}
網頁顯示圖：
6. Less 嵌套
我們經常用到選擇器的嵌套。
#header .logo{
width:300px;
}
Less 嵌套寫法
#header{
.logo{
width: 300px;
}
}
如果遇見 （交集|僞類|僞元素選擇器）
內層選擇器的前面沒有&符號，則它被解析爲父選擇器的後代；
如果有&符號，它就被解析爲父元素自身或父元素的僞類。
a:hover{
color：red;
}
Less嵌套寫法
a{
&:hover{
color:red;
}
}
嵌套命令演示：
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* .header{}
.header a{} */
</style>
<link rel="stylesheet" href="nest.css">
</head>
<body>
<div class="header">
<a href="#">文字</a>
</div>
<div class="nav">
<div class="logo">辰逸博客</div>
</div>
</body>
</html>
less：
.header{
width: 200px;
height: 200px;
background-color: pink;
// 1. less嵌套 子元素的樣式直接寫到父元素裏面就好了
a{
color: red;
// 2. 如果有僞類、交集選擇器、僞元素選擇器 我們內層選擇器的前面需要加&
&:hover{
color: blue;
}
}
}
.nav {.logo{
color: green;
}
&::before{
content: "";
}
}
css：
```css
.header {
width: 200px;
height: 200px;
background-color: pink;
}
.header a {
color: red;
}
.header a:hover {
color: blue;
}
.nav .logo {
color: green;
}
.nav::before {
content: "";
}
網頁顯示圖：
7. less運算
任何數字、顏色或者變量都可以參與運算。就是Less提供了加（+）、乘（*）、除（/）算術運算。
/*Less 裏面寫*/
@with：10px + 50px；
div{
border:@width solid red;
}
/*生成的css*/
div{
border: 15px solid red;
}
/* Less 甚至還可以這樣*/
width：（@width + 5）*2；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="count.css">
</head>
<body>
<div></div>
</body>
</html>
count.less:
```css
@baseFont: 50px;
html{
font-size: @baseFont;
}
@border:5px + 5;
div{
width: 200px - 50;
height: (200px + 50px) * 2;
border: @border solid red;
background-color: #666 - #222;
}
img{
width: 82rem / @baseFont;
height: 82rem / @baseFont;
}
// 1. 我們運算符的左右兩側必須敲一個空格隔開
// 2. 兩個數參與運算 如果只有一個數有單位，則最後的結果就以這個單位爲準
// 3. 兩個數參與運算，如果2個數都有單位，而且不一樣的單位 最後的結果以第一個單位爲準。
**css:**
```css
@baseFont: 50px;
html{
font-size: @baseFont;
}
@border:5px + 5;
div{
width: 200px - 50;
height: (200px + 50px) * 2;
border: @border solid red;
background-color: #666 - #222;
}
img{
width: 82rem / @baseFont;
height: 82rem / @baseFont;
}
// 1. 我們運算符的左右兩側必須敲一個空格隔開
// 2. 兩個數參與運算 如果只有一個數有單位，則最後的結果就以這個單位爲準
// 3. 兩個數參與運算，如果2個數都有單位，而且不一樣的單位 最後的結果以第一個單位爲準。
注意：
乘號（*）和除號（/）的寫法。
運算符中間左右有個空格隔開1px + 5
對於兩個不同的單位的值之間的運算，運算結果的值取第一個值的單位。
如果兩個值之間只有一個值有單位，則運算結果就取該單位。
