less學習筆記

codercao 發布于2019-08-29 13:53 / 3150人閱讀

摘要：方便了的編寫和維護。本文記錄了開發中最常用的幾種語法。這里的單位可以省略，但是兩者必須有一個帶單位嵌套嵌套是中非常有用高效的語法。學習學習學習在中如果我們需要對這一結構的樣式進行渲染，就會使用等選擇器。

一、什么是less

less是一種動態樣式語言，屬于css預處理語言的一種，它使用類似css的語法，為css賦予了動態語言的特性，如變量、運算、函數等。方便了css的編寫和維護。

less可以在多種語言、環境中使用，包括瀏覽器端、桌面客戶端、服務端。

本文記錄了開發中最常用的幾種less語法。

二、編譯工具

瀏覽器并不認識less格式文件，我們需要使用編譯工具將less文件編譯成css文件，可以選擇kaola這個工具編譯。這個工具使用也十分簡單，將less文件的目錄拖入，然后設置輸出路徑。然后每次只要保存less文件就可實現編譯。

如果使用其他開發工具也可以，比如使用VSCode的話就可以安裝less插件easy less實現保存自動編譯。因為我使用的就是VSCode編輯器，所以我使用了這個插件做編譯處理。

基本使用
首先新建目錄

 --images
--style
  -- main.less
index.html

編寫index.html文件



 
  
  less編譯工具使用
   //在這里引入的是編譯后的css文件

編寫mian.less文件:

@charset "utf-8";

#main {
    width: 100px;
    height: 100px;
    background-color: red;
}

保存編譯后，在style目錄下就會出現main.css文件，這是編譯后的文件，我們可以直接使用。

三、less語法 1、注釋

less中有兩種注釋：/**/和//。

使用/**/的注釋是會被編譯進css文件的，而使用//的注釋不會被編譯進css文件。

//main.less
@charset "utf-8";

/*我會被編譯進css文件*/

//我不會被編譯進css文件

//執行編譯后的main.css
@charset "utf-8";

/*我會被編譯進css文件*/

由于我們應該一般編寫和維護less文件，所以我們一般采用第二種注釋，無需將注釋編譯進css文件。

2、變量

less中使用@聲明一個變量，和一般程序語言不同的是，@符號與變量之間不能有空格，比如我們要聲明一個myWidth這個變量：@myWidth。變量的賦值類似鍵值對：@myWidth : 200px;

變量的使用：

//less文件
@charset "utf-8";

@myWidth : 200px;
@myHeight : 500px;

#main {
    width: @myWidth;
    height: @myHeight;
    background-color: yellowgreen;
}

3、混合

混合的意思是說可以將less寫法與常規的css寫法進行混合書寫。

css中為某個元素添加樣式，首先需要為其添加類名，使用混合則很方便

//less文件
@charset "utf-8";

@myWidth : 200px;
@myHeight : 200px;

#main {
    width: @myWidth;
    height: @myHeight;
    background-color: yellowgreen;
    .border
}

.border {  
    border:3px solid pink
}

在css中我們需要將.border這個類添加到元素的class屬性中才能生效。但是在less中，只要將.border加入#main中就可以實現效果。

//編譯后的css
@charset "utf-8";
#main {
  width: 200px;
  height: 500px;
  background-color: yellowgreen;
  border: 3px solid green;
}
.border {
  border: 3px solid green;
}

混合也可以帶參數

//less
.border(@mywidth){
    border: @mywidth solid green;
}

.mybox {
    .border(5px);
}

//css
.mybox {
  border: 5px solid green;
}

參數也可以設置一個默認值：

//less
.border(@mywidth:4px){
    border: @mywidth solid green;
}

.mybox {
    .border();
}

//css
.mybox {
  border: 4px solid green;
}

4、匹配模式

根據不同的參數可以匹配不同的樣式：

.pos(r) {
    position:relative;
}

.pos(a) {
    position:absolute;
}

.pos(f) {
    position:fixed;
}

.pipei {
    width:200px;
    height:200px;
    background-color:green;
    .pos(f);     //.pos(r)   .pos(a) 傳入不同的參數，實現不同的定位方式
}

5、運算

less中可以實現運算，任何數字、顏色或者變量都可以參與運算（+ - * /），運算應該被包裹在括號中。

//less
.border(@mywidth:4px){
    border: @mywidth + 5px solid green;    //這里的單位可以省略，但是兩者必須有一個帶單位
}

.mybox {
    .border();
}

//css
.mybox {
  border: 4px solid green;
}

6、嵌套

嵌套是less中非常有用、高效的語法。

//html

    less學習2017-11-26
    less學習2017-11-26
    less學習2017-11-26

在css中如果我們需要對這一html結構的樣式進行渲染，就會使用#list、#list li、#list li a、#list li span等選擇器。在less中我們有了更簡潔的寫法：

//less
#list {
    width: 600px;
    margin: 30px auto;
    list-style: none;
    padding: 0;

    li {
        height: 30px;
        line-height: 30px;
        background-color: pink;
        margin-bottom: 5px;

        a {
            float: left;
        }

        span {
            float: right;
        }
    }
}

//css
#list {
  width: 600px;
  margin: 30px auto;
  list-style: none;
  padding: 0;
}
#list li {
  height: 30px;
  line-height: 30px;
  background-color: pink;
  margin-bottom: 5px;
}
#list li a {
  float: left;
}
#list li span {
  float: right;
}

在less中使用偽類選擇器也十分方便：

//less
#list li a {
  float: left;
  &:hover {
    font-size:20px;
  }
}

//css
#list li a:hover {
  font-size: 18px;
}

7、arguments參數

有時候我們不想單個操作參數，可以使用@argemunts操作參數。

//less
.border_arg(@w:30px,@c:red,@xx:solid){
    border:@arguments;
}

.test_arguments{
    .border_arg();
}

//css
.test_arguments {
  border: 30px red solid;
}

8、避免編譯

有時候我們需要輸出一些不正確的css語法或者使用一些less不認識的專有語法，要輸出這樣的值我們需要使用~""將語法包裹起來，語法放在雙引號或者單引號中間。從而實現不讓less編譯該段代碼：

//less
width:~"calc(100%-35)"

//css
width: calc(100%-35);

云服務器 GPU云服務器學習筆記學習筆記一基礎學習筆記深度學習筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112774.html

前端構建工具grunt學習筆記

使用grunt實時編譯less文件下圖是項目的文件組織 showImg(https://segmentfault.com/img/bVqbtg); 生成package.json文件，通過npm init命令。安裝你需要的Devdependencies/denpendencies。 npm install grunt --save-dev npm install load-grunt-ta...

zone 2019-08-21 10:42 評論0 收藏0
less學習筆記

摘要：方便了的編寫和維護。本文記錄了開發中最常用的幾種語法。這里的單位可以省略，但是兩者必須有一個帶單位嵌套嵌套是中非常有用高效的語法。學習學習學習在中如果我們需要對這一結構的樣式進行渲染，就會使用等選擇器。一、什么是less less是一種動態樣式語言，屬于css預處理語言的一種，它使用類似css的語法，為css賦予了動態語言的特性，如變量、運算、函數等。方便了css的編寫和維護。 le...

MkkHou 2019-08-02 15:58 評論0 收藏0
前端學習筆記

摘要：環境安裝本站實例采用的是百度的靜態資源庫上的資源。不包含文檔和最初的源代碼文件。點擊該按鈕，您可以直接從上得到最新的和源代碼。如果您使用的是未編譯的源代碼，您需要編譯文件來生成可重用的文件。 1.Bootstrap 1.1 Bootstrap 包的內容基本結構：Bootstrap 提供了一個帶有網格系統、鏈接樣式、背景的基本結構。這將在 Bootstrap 基本結構部分詳細講解。...

alogy 2019-08-19 18:11 評論0 收藏0
前端學習筆記

摘要：環境安裝本站實例采用的是百度的靜態資源庫上的資源。不包含文檔和最初的源代碼文件。點擊該按鈕，您可以直接從上得到最新的和源代碼。如果您使用的是未編譯的源代碼，您需要編譯文件來生成可重用的文件。 1.Bootstrap 1.1 Bootstrap 包的內容基本結構：Bootstrap 提供了一個帶有網格系統、鏈接樣式、背景的基本結構。這將在 Bootstrap 基本結構部分詳細講解。...

chenjiang3 2019-08-01 15:12 評論0 收藏0
關于Less的學習筆記

摘要：簡介部分記錄是一門預處理語言，它擴充了語言，增加了諸如變量混合函數等功能，讓更易維護方便制作主題擴充，是一種動態樣式語言。運算可進行加減乘除的運算。 Less簡介部分記錄： 1、 Less是一門CSS預處理語言，它擴充了CSS語言，增加了諸如變量、混合（mixin）、函數等功能，讓CSS更易維護、方便制作主題、擴充，是一種動態樣式語言。2、編譯工具：Koala。3、注釋（兩種...

姘擱『 2019-08-30 15:52 評論0 收藏0