歡迎訪問我的博客晃危，祝碼農(nóng)同胞們早日走上人生巔峰枪向，迎娶白富美~~~

更好的體驗齿税，請移步less的基本用法

1 前言

當(dāng)我們用多了CSS的時候寞奸，特別是由后端轉(zhuǎn)前端的道友們用CSS的時候寓落，會發(fā)現(xiàn)CSS簡單易懂括丁，但是毫無邏輯，我們來看看下面幾種情況：

1. 常常一個顏色的值能出現(xiàn)很多很多次伶选，或者一個寬度的值能出現(xiàn)很多次史飞；
2. 大量的選擇器在代碼中，一會用那個仰税，一會用這個构资，毫無邏輯，無層次陨簇，不美觀吐绵，不易維護(hù)；
3. 每一個新屬性的誕生又會帶來大量瀏覽器兼容性的問題；
4. 此外己单，CSS雖然易學(xué)唉窃，好用，但其短板不可忽視纹笼，于是就引入了預(yù)處理語言

2 預(yù)處理語言

我了解到的是less纹份、sass，這里在后面會主要說less,歡迎道友補充指正

2.1 sass

sass誕生于2007年廷痘，是一個將腳本解析成CSS的腳本語言蔓涧，最開始叫縮進(jìn)語法，較新的叫SCSS牍疏，使用和CSS一樣的塊語法，即使用大括號將不同的規(guī)則分開拨齐，使用分號將不同的樣式分開鳞陨，通常擴展名為.sass或者.scss包含變量，嵌套瞻惋，混入等厦滤，和less類似，下面看less歼狼，學(xué)會了less的基本語法掏导，對sass就能有一定程度的掌握了

2.2 less

less是一門CSS預(yù)處理語言，它擴充了CSS羽峰，增加了我們前面提到的能夠使得代碼更有邏輯性的東西趟咆，例如變量，混入梅屉，函數(shù)等值纱，后綴名為.less，同時坯汤，less可以運行在Node或者瀏覽器端

2.2.1 less 初體驗

使用 less 方案一：

1. 引包：在頁面中直接引入less.js虐唠，可去官網(wǎng)下載放到自己的依賴包文件中，或者利用CDN在線引入

<script src="/libs/less.js/2.7.2/less.min.js"></script>

2. 引入自己寫好的less文件：link 標(biāo)簽一定要在 Less.js 之前引入惰聂，并且 link 標(biāo)簽的rel 屬性要設(shè)置為stylesheet/less

<link rel="stylesheet/less" href="/less/style.less">
<script src="/libs/less.js/2.7.2/less.min.js"></script>

3. 書寫CSS文件看看

/* style.css */
div {
  background: #e92323;
}
a:hover {
  color: #e92323;
}
.box {
  color: #e92323;
}

4. 我們用less語法去書寫和上面CSS同樣功能的代碼來看看

/* style.less */
@mainColor:#e92323;
@className:box;

div{
  background: @mainColor;
}
a:hover{
  color: @mainColor;
}
//變量用于字符拼接使用方法
.@{className}{
  color: @mainColor;
}

5. 總結(jié)：很顯然疆偿，我們看出將經(jīng)常出現(xiàn)的#e92323的值存儲在一個變量中，這樣清晰直觀搓幌，假如需要修改某個網(wǎng)站的主題色杆故，那么直接修改這個變量即可，我們.box這個類選擇器也儲存在一個變量中溉愁，同樣的道理反番，易于維護(hù)
6. 到這里，你可能已經(jīng)愛上它了

使用 less 方案二：

1. 使用包管理工具npm直接安裝less

npm i less -g

2. 使用命令，將less文件編譯成css文件

lessc style.less > style.css

3. 在webpack打包工具中可以使用less-loader處理

2.2.2 編譯工具

在這里可以選用VSCode或者Sublime Text 3罢缸，在使用less之前篙贸，建議大家先給自己的開發(fā)工具安裝一個牛逼轟轟的插件，在VSCode中枫疆，可以Ctrl + Shift + X到左側(cè)擴展商店里安裝Easy LESS插件爵川，在Sublime中安裝Less2Css插件，他們有什么用呢息楔？他們可以實時編譯less文件為CSS文件寝贡，方便及時修改和查看，另外sublime安裝插件的方法值依，請移步sublime安裝插件&常用的sublime插件

效果大概如下圖

variables

2.2.3 變量

關(guān)于less中變量圃泡、函數(shù)等，其實就和我們接觸到的其他語法中的理解起來差不多愿险，下面來舉例理解

變量：想想js里面的變量颇蜡，是干什么的？存儲值辆亏，防止同一個值重復(fù)出現(xiàn)风秤，提高代碼維護(hù)效率，這里其實差不多

/* style.less */

@charset "UTF-8";
/*注釋：在css當(dāng)中可以使用扮叨，所有編譯的過程當(dāng)中生成在css文件*/
//注釋：css不支持,不會編譯在css文件

/*變量*/
//必須@前綴缤弦，：是等于的以上，必須分號結(jié)束彻磁；
//不能以數(shù)組開頭碍沐，不能包含特殊字符，區(qū)分大小寫
@mainColor:#e92323;
@className:box;

div{
  background: @mainColor;
}
a:hover{
  color: @mainColor;
}
//變量用于字符拼接使用方法
.@{className}{
  color: @mainColor;
}

/* style.css */
@charset "UTF-8";
/*注釋：在css當(dāng)中可以使用衷蜓，所有編譯的過程當(dāng)中生成在css文件*/
/*變量*/
div {
  background: #e92323;
}
a:hover {
  color: #e92323;
}
.box {
  color: #e92323;
}

2.2.4 嵌套

十分神奇抢韭，寫完它，你會覺得樣式代碼層次感十足恍箭，邏輯分明刻恭，主要是看著爽，選擇器便于查找扯夭，易于維護(hù)

這是我做的一個防微金所小項目里的一段代碼

@charset "UTF-8";
.wjs_app{
  display: block;
  img{
    display: none;
  }
  // 需要連接的情況使用 &
  &:hover{
    img{
      display: block;
      position: absolute;
      left: 50%;
      margin-left:-60px;
      border: 1px solid #ccc;
      border-top: none;
      top:40px;
      z-index: 100000;
    }
  }
  >div{
    display: block;
  }
  &::before{
    content: "";
  }
}

@charset "UTF-8";
.wjs_app {
  display: block;
}
.wjs_app img {
  display: none;
}
.wjs_app:hover img {
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -60px;
  border: 1px solid #ccc;
  border-top: none;
  top: 40px;
  z-index: 100000;
}
.wjs_app > div {
  display: block;
}
.wjs_app::before {
  content: "";
}

看看以上的代碼鳍贾，less文件中是不是層次感十足，這里說幾點問題

1. &交洗，當(dāng)需要連接時使用&骑科，代表上層選擇器的名字，這里代表.wjs_app构拳，例如可以寫&:active咆爽，&::before梁棠，&:hover等等
2. 其他選擇器，例如>斗埂，即與父元素有直接的血緣關(guān)系的子元素符糊，在后面直接接上就行

2.2.4.1 媒體查詢@media

媒體查詢，在響應(yīng)式布局上應(yīng)用十分廣泛呛凶，那么在CSS中我們往往需要將一個類分開寫男娄，例如下面這樣

      .container{
        width:750px;
      }
      @media screen and (max-width:768px){
        .container{
          background: red;
        }
      }

而在less中，可以利用嵌套漾稀，將他們寫在一塊

      /* Less */
      .container{
          width: 750px;
    
          @media screen{
              @media (max-width:768px){
                background-color: red;
              }
          }
          @media tv {
            background-color: yellow;
          }
      }

      @media screen and (maxwidth:768px){
       .container{
            background-color: red; 
        }
      }
      @media tv{
        .container{
          background-color: yellow;
        }
      }

2.2.5 函數(shù)

2.2.5.1 一些內(nèi)置函數(shù)

判斷：isnumber模闲，iscolor，isurl,分別判斷是否是一個數(shù)字崭捍，顏色尸折，url

顏色操作：lighten增加顏色亮度，darken降低顏色亮度殷蛇，fade增加透明度实夹，mix根據(jù)比例混合兩種顏色，saturate增加顏色飽和度等等

數(shù)學(xué)函數(shù)：ceil向上取整晾咪，floor向下取整收擦，round四舍五入贮配，sqrt平方根谍倦，abs絕對值，pow冪泪勒，percentage浮點數(shù)轉(zhuǎn)化為百分比字符串等

2.2.5.2 自己寫個函數(shù)來用用

.fun() {
  width: 100px;
}

.container {
  .fun();
}

.container {
  width: 100px;
}

2.2.6 混入

1. 組合樣式混入
2. 類混入
3. 函數(shù)混入

@charset "UTF-8";
/*混入*/
/*組合樣式的例子*/
.w50{
 width: 50%;
}
.f_left{
 float: left;
}
.f_right{
 float: right;
}
/*類混入*/
.w50-f_left{
 .w50();
 .f_left();
}

/*函數(shù)混入*/
/*定義函數(shù)*/
.w50(){
  width: 50%;
}
/*定義函數(shù)包含參數(shù)*/
.f_left(){
 float: left;
}
.f_right(){
 float: right;
}
/*
1.定義了參數(shù)（沒有默認(rèn)值）昼蛀，調(diào)用的時候必須傳參
2.怎么定義默認(rèn)值 和定義變量值是一樣的
3.定義了參數(shù)（有默認(rèn)值），可傳可不傳
*/
.f(@direction:left){
  float: @direction;
}
.borderRadius(@width:100px){
  border-radius: @width;
  -webkit-border-radius:@width;
  -moz-border-radius:@width;
  -o-border-radius:@width;
  -ms-border-radius:@width;
}
.w50-f_left{
  .w50();
  .f(right);
  .borderRadius(20px);
}

@charset "UTF-8";
/*混入*/
/*組合樣式的例子*/
.w50 {
  width: 50%;
}
.f_left {
  float: left;
}
.f_right {
  float: right;
}
/*類混入*/
.w50-f_left {
  width: 50%;
  float: left;
}
/*函數(shù)混入*/
/*定義函數(shù)*/
/*定義函數(shù)包含參數(shù)*/
/*
1.定義了參數(shù)（沒有默認(rèn)值）圆存，調(diào)用的時候必須傳參
2.怎么定義默認(rèn)值 和定義變量值是一樣的
3.定義了參數(shù)（有默認(rèn)值）叼旋，可傳可不傳
*/
.w50-f_left {
  width: 50%;
  float: right;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -o-border-radius: 20px;
  -ms-border-radius: 20px;
}

2.2.7 繼承 extend

能夠繼承所匹配的所有樣式，但不會繼承其子元素的內(nèi)容

      .container {
        width: 100px;
        .other {
            color: red;
        }
      }
      .content {
        &:extend(.container);
      }
      .span {
        &:extend(.container .other);
      }

.container,
.content {
  width: 100px;
}
.container .other,
.span {
  color: red;
}

2.2.8 運算

在less語法中可以進(jìn)行簡單的運算沦辙，首先我們來看下面一段代碼

@num:9;
ul{
  width: 100%*@num;
  li{
    width: 100%/@num;
    color: red+yellow+blue;
    background: gray*0.7;
    /*內(nèi)置函數(shù)*/
    border-color: darken(red,20%);
  }
}

ul {
  width: 900%;
}
ul li {
  width: 11.11111111%;
  color: #ffffff;
  background: #5a5a5a;
  /*內(nèi)置函數(shù)*/
  border-color: #990000;
}

其實看到這里夫植，我們可以引申一點，bootstrap的柵格布局原理油讯，這是其中之一了详民，當(dāng)然只是引申，想要了解全部的陌兑，請移步Web前端中的幾種流行布局

2.2.9 導(dǎo)入

那么學(xué)了以上那些內(nèi)容沈跨，其實就可以將我們平常寫的CSS文件，大概分為變量兔综、函數(shù)饿凛、等等狞玛，然后導(dǎo)入到一個具主要處理的文件中，再通過嵌套涧窒、混入心肪、運算等寫一個完整的層疊樣式表了，這樣寫的好處是杀狡，功能分明蒙畴，易于維護(hù)

1. 導(dǎo)入less文件，可省略后綴

@charset "UTF-8";

@import "variables";

@import "mixins";

@import "topBar";

@import "banner";

@charset "UTF-8";
/*注釋：在css當(dāng)中可以使用呜象，所有編譯的過程當(dāng)中生成在css文件*/
/*變量*/
div {
  background: #e92323;
}
a:hover {
  color: #e92323;
}
.box {
  color: #e92323;
}

.w50-f_left {
  width: 50%;
  float: right;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -o-border-radius: 20px;
  -ms-border-radius: 20px;
}
.wjs_app {
  display: block;
}
.wjs_app img {
  display: none;
}
.wjs_app:hover img {
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -60px;
  border: 1px solid #ccc;
  border-top: none;
  top: 40px;
  z-index: 100000;
}
.wjs_app > div {
  display: block;
}
.wjs_app::before {
  content: "";
}

是不是很爽膳凝？

2. @import 的位置可隨意放置

.container {
    width: 100px;
}

@import "style";

2.2.9.1 reference

引入的 Less 文件，但不編譯

@import (reference) "style";

2.2.9.2 once

該 less文件只導(dǎo)入一次恭陡，其余導(dǎo)入的該less文件都不會被解析

@import (once) "style.less"; // 文件會被解析
@import (once) "style.less"; // 該文件不會被解析

2.2.9.3 multiple

允許導(dǎo)入多個同名文件蹬音，但是都會被解析

@import (multiple) "style.less"; // 文件會被解析
@import (multiple) "style.less"; // 文件也會被解析

2.3 less 和 sass 的區(qū)別

less和sass最大的區(qū)別在于其實現(xiàn)方式不同

less是基于javascript運行，所以less也常用語客戶端處理

sass是基于Ruby休玩，常在服務(wù)端處理

3 參考文章

• SASS
• Less中文網(wǎng)
• Less