Less的安裝和簡單使用

這是我參與8月更文挑戰的第4天，活動詳情查看：8月更文挑戰

安裝步驟

1. 安裝nodejs, 根據操做系統版本從官網下載對應的安裝包

官網下載連接: nodejs.org/en/download…

好比個人電腦是Windows10 64位, 就選擇這個連接:

下載以後, 直接雙擊運行, 不須要進行什麼特殊設置就能夠直接完成安裝.

2. 檢查是否安裝成功, 在命令框中輸入:

node -v
複製代碼

若是安裝成功, 會出現版本號:

3. 基於node.js在線安裝less, 使用下面命令便可:

npm install -g less
複製代碼

4. 檢查是否安裝成功, 使用cmd查看less的版本

lessc -v
複製代碼

Less的使用

新建一個後綴名爲.less的文件, 在這個文件中書寫less語句.

Less變量

CSS中的一些顏色和數值會常常用到變量.

語法:

@變量名:值;
複製代碼

1. 變量命名規範

• 必須有@做爲前綴
• 不能包含特殊符號
• 數字不能做爲開頭
• 大小寫敏感

例如:

@color: pink;
@Color: deeppink;

@fs14: 14px;
複製代碼

變量使用規範

div {
    background-color: @color;
}
複製代碼

解決了css不能直接更改全部顏色的弊端, 維護更加簡單

Less編譯

本質上, Less包含一套自定義的語法及一個解析器, 用戶根據這些語法定義本身的樣式規則, 這些規則最終會經過解析器, 編譯生成對應的CSS文件.

因此,咱們須要把咱們的.less文件, 編譯生成.css文件, 這樣html頁面才能使用.

方法 -- 藉助nodejs: 在當前.less文件夾下打開cmd命令行, 輸入以下命令將如今的.less文件 (style.less) 編譯成.css文件 (style.css). 這個css就是日常咱們使用的css代碼.

lessc style.less > style.css
複製代碼

VScode Less插件

Easy LESS 插件用來把less文件編譯爲css文件. 安裝完插件後, 從新加載一下vscode, 之後只要保存less文件就會自動生成css文件

Less嵌套

以前使用的選擇器:

Less嵌套寫法:

若是碰見 交集/僞類/僞元素選擇器, 須要在內層選擇器的前面加 & 符號, 這樣才能被解析爲父元素自身或父元素的僞類; 苟澤會被解析爲父選擇器的後代.

以前使用的選擇器:

Less嵌套寫法:

Less運算

任何數字, 顏色或者變量均可以參與運算, less提供了 加 (+), 減 (-), 乘 (*), 除 (/) 算術運算.

注意:

1. 參與運算的兩個數字, 能夠一個有單位, 一個沒有單位, 最終單位就是惟一的那個單位.
2. 參與運算的兩個數字, 若是兩個都有單位, 最終單位取第一個數字的單位.
3. 運算符左右必須加空格, 不然有時候會出問題 (常見於加法).
4. 除法要加括號, 不然不生效.

common.less:

// 根據媒體查詢,設置不一樣屏幕中的html字號
// 屏幕劃分爲15等份
// 默認顯示html字號參考750px的寬度
@no: 15;

html {
    font-size: 50px;
}

//320px
@media screen and (min-width: 320px) {
    html {
        font-size: (320px / @no);
    }
}

//360px
@media screen and (min-width: 360px) {
    html {
        font-size: 360px / @no;
    }
}
複製代碼

common.css:

html {
  font-size: 50px;
}
@media screen and (min-width: 320px) {
  html {
    font-size: 21.33333333px;
  }
}
@media screen and (min-width: 360px) {
  html {
    font-size: 360px / 15;
  }
}
複製代碼