前言

css的不足

??作為前端界的三大基石，css是每一個(gè)前端開發(fā)人員必須要會(huì)的，css作為一門標(biāo)記語言，給人的第一印象就是簡(jiǎn)單易懂，沒有什么邏輯性，和編程語言差距較大，短板非常明顯，當(dāng)有新的屬性出來時(shí)個(gè)瀏覽器也不能同時(shí)兼容，為了解決css這個(gè)短板，涌現(xiàn)出了一些預(yù)處理語言，他們讓css可以使用變量，循環(huán)，集成，自定義方法等，讓其邏輯性大大加增強(qiáng)。

預(yù)處理語言

??現(xiàn)在主要流行的有sass、less、stylus 三種

Sass 誕生于 2007 年，Ruby 編寫，其語法功能都十分全面，可以說它完全把 CSS 變成了一門編程語言。另外在國內(nèi)外都很受歡迎，并且它的項(xiàng)目團(tuán)隊(duì)很是強(qiáng)大，是一款十分優(yōu)秀的預(yù)處理語言。
Stylus 誕生于 2010 年，來自 Node.js 社區(qū)，語法功能也和 Sass 不相伯仲，是一門十分獨(dú)特的創(chuàng)新型語言。
Less 誕生于 2009 年，受Sass的影響創(chuàng)建的一個(gè)開源項(xiàng)目。它擴(kuò)充了 CSS 語言，增加了諸如變量、混合（mixin）、函數(shù)等功能，讓 CSS 更易維護(hù)、方便制作主題、擴(kuò)充

預(yù)處理語言的選擇

??sass、less、stylus其實(shí)都差不多，在基本功能上也是大同小異，選擇less是比較適合初學(xué)者的，相比sass和stylus，less能讓你更快上手，less保留了所有css的功能個(gè)，學(xué)習(xí)成本低，另外less可以在編輯器里直接編譯，在電腦上安裝less后只需下載個(gè)小插件就可以使用，vscode使用Easy Less擴(kuò)展就可以直接使用less。

正文

變量

??less定義變量的形式 @變量名:值，這樣就可以定義一個(gè)變量。使用起來非常簡(jiǎn)單，比如我們可以定義一個(gè)頁面的主色調(diào)@bgc，這樣在反復(fù)用到給顏色的地方我們就可以直接使用，注意在css屬性中使用變量的時(shí)候需要把變量名用大括號(hào)包起來，這樣才能正確編譯。

/**
*@param: bgc 主色調(diào)
*@param: fsz 字體大小
*/
@bgc: RGB(88,190,203);
@fsz: 100px;
@wd: width;
@imgurl:"../img/";
html
{
    font-size: @fsz;
}

.wrap
{
    @{wd}: 7.5rem; //屬性中使用變量
    height: .89rem;
    background-color: @bgc;
    bckground-image: url("@{imgurl}/pic.jpg");//url中使用變量
}

//編譯成css
html {
  font-size: 100px;
}
.wrap {
  width: 7.5rem;
  height: .89rem;
  background-color: #58becb;
}

變量的作用域，當(dāng)變量被多次定義時(shí)，以最后一次定義為準(zhǔn)，且從當(dāng)前作用域向上搜尋

//栗子
@bgc: #333;
.wrap
{
    @bgc: #339;
    .article
    {
        color: @bgc;
    }
}

//編譯css
.wrap .article {
  color: #339;
}

//變量是延遲加載的，不一定要在使用之前定義
@bgc: #333;
.wrap
{
    .article
    {
        color: @bgc;
    }
    @bgc: #339;
}

//一樣的結(jié)果
.wrap .article {
  color: #339;
}

混合（mixin）

混合的概念也很簡(jiǎn)單.

//比如你寫一個(gè)border,然后在別的地方應(yīng)引用它，less管這個(gè)叫混合
.border
{
    border: 1px solid #eee;
}
.tab
{
    width: .2rem;
    height: .1rem;
    .border;
}

//編譯成css就變成了
.border {
  border: 1px solid #eee;
}
.tab {
  width: .2rem;
  height: .1rem;
  border-top: 1px solid #333;
  border-bottom: 1px solid #eee;
  border: 1px solid #eee;
}

??當(dāng)然也有更多好玩的用法，舉個(gè)栗子，這個(gè)和函數(shù)一樣，括號(hào)內(nèi)定義參數(shù)，同時(shí)可以給參數(shù)指定默認(rèn)值，使用的時(shí)候也很簡(jiǎn)單，直接在需要的地方調(diào)用就好，比如想給box加個(gè)1px，顏色是#eee的上邊框直接寫.border(top);就完成任務(wù)。（很少寫文章寫的不太好，畢竟叫l(wèi)ess入門）

.border(@direction,@num:1px,@color:#eee)
{
    border-@{direction} : @num solid @color;
}

.box
{
    width: 100px;
    height: 50px;
    .border(top);
}

模塊化

??less支持用import引入文件，也就相對(duì)有了模塊化的寫法，比如編寫一個(gè)head.less,只要在需要該樣式的less文件寫上import “head.less”，在編譯出的css文件里就有了head.less里的樣式。

//global.less
@charset "utf-8";
*,
::before,
::after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    color: #333;
    font-family: "PingFang-SC-Medium" ,"sans-serif";
    background: rgba(0,0,0,0);;
}
//style.less
@charset "utf-8";
@import "global.less";
//style.less編譯出來后
@charset "utf-8";
*,
::before,
::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  color: #333;
  font-family: "PingFang-SC-Medium", "sans-serif";
  background: rgba(0, 0, 0, 0);
}

when

??less提供了when這個(gè)關(guān)鍵字功能，when很好理解就是一個(gè)判斷條件，只有當(dāng)when的條件達(dá)到時(shí)才會(huì)執(zhí)行，廢話少說直接上代碼。

??我們定義一個(gè).area方法，width大于100px的時(shí)候加一個(gè)radius，小于等于一百的時(shí)候不加，注意這時(shí)候調(diào)用的時(shí)候會(huì)將100px轉(zhuǎn)化位數(shù)值和100比較，用的是unit函數(shù)，后面我們會(huì)學(xué)到。

.area(@width) when (@width > 100)
{
    width: @width;
    height: 100px;
    background: #ff6600;
    border-radius: 3px;
}
.area(@width) when(@width < = 100)
{
    width: @width;
    height: 100px;
    background: #ff6600;
}

.box
{
    .area(200px);
}
//編譯后
.base-area {
  height: 100px;
  background: #ff6600;
}

這里我們還可以使用嵌套來對(duì)代碼進(jìn)行優(yōu)化

.base-area
{
    width: @width;
    height: 100px;
}
.area(@width) when (@width > 100)
{
    .base-area;
    border-radius: 3px;
}
.area(@width) when(@width < = 100)
{
    .base-area;
}

.box
{
    .area(200px);
    background: #ff6600;
}

loop

less的loop是用when來實(shí)現(xiàn)的，下面我們就寫一個(gè)簡(jiǎn)單的例子

.fn( @i ) when ( @i < 10 )
{
    width: unit( @i , px );
    .fn(( @i + 1 ));
}
.loopWidth
{
    .fn(1);
}
//編譯
.loopWidth {
  width: 1px;
  width: 2px;
  width: 3px;
  width: 4px;
  width: 5px;
  width: 6px;
  width: 7px;
  width: 8px;
  width: 9px;
}

??通過簡(jiǎn)單例子大概就能明白less中的loop了，下面簡(jiǎn)單寫一個(gè)平常能用到的，比如給list的item添加不同的背景圖片

@imgurl: "../img";
.bg-loop(@n,@i:1) when (@i < @n)
{
    .list
    {
        .item-@{i}
        {
            background-image: url("@{imgurl}/icon-@{i}.jpg");
        }
    }
   
    .bg-loop(@n,(@i+1));
}
.bg-loop(4);

//編譯
.list .item-1 {
  background-image: url("../img/icon-1.jpg");
}
.list .item-2 {
  background-image: url("../img/icon-2.jpg");
}
.list .item-3 {
  background-image: url("../img/icon-3.jpg");
}

匹配模式

舉一個(gè)寫三角形的列子，less提供@_來匹配共同的一些操作.

.triangle(top,@width:100px,@color:#333)
{
    border-width: @width;
    border-color: @color transparent transparent transparent;
    border-style: solid dashed dashed dashed;
}
.triangle(right,@width:100px,@color:#333)
{
    border-width: @width;
    border-color: transparent @color transparent transparent;
    border-style: dashed solid dashed dashed;
}
.triangle(bottom,@width:100px,@color:#333)
{
    border-width: @width;
    border-color: transparent transparent @color transparent;
    border-style:  dashed dashed solid dashed;
}
.triangle(left,@width:100px,@color:#333)
{
    border-width: @width;
    border-color: transparent transparent transparent @color;
    border-style: dashed dashed dashed solid ;
}
.triangle(@_,@width:100px,@color:#333)
{
    height: 0;
    width: 0;
    overflow: hidden;
}
.target
{
    .triangle(top);
}
//css
.target {
  border-width: 100px;
  border-color: #333 transparent transparent transparent;
  border-style: solid dashed dashed dashed;
  height: 0;
  width: 0;
  overflow: hidden;
}

雜項(xiàng)目

arguments

arguments包含了所有參數(shù)

.border(@w:1px,@s:solid,@c:#eee)
{
    border:@arguments;
}
.arg{
    .border;
}
//css
.arg {
  border: 1px solid #eee;
}

避免編譯

??有時(shí)候一些計(jì)算需要到客戶端才進(jìn)行，比如使用calc，在less轉(zhuǎn)css中會(huì)被提前計(jì)算，這時(shí)候就需要避免編譯，格式是～‘避免編譯的內(nèi)容’

.inner
{
    width: 100px;
    height: ~'calc(1000/2)';
}

！important

less里也可以用！important，這個(gè)不建議用

.box{
    width: 200px;
    height: 200px;
    background: #333;
}

.inner
{
    .box !important;
}
//css
.inner {
  width: 200px !important;
  height: 200px !important;
  background: #333 !important;
}

函數(shù)

常用的函數(shù)

一些常用的函數(shù)：

lighten 提高亮度
darken 降低亮度

@bgc:#ff6600;
.box
{
    width: 100px;
    height: 100px;
    background:@bgc;
}
.box-1
{
    width: 100px;
    height: 100px;
    background: lighten(@bgc,20%); //亮度提高百分之二十
}
.box-2
{
    width: 100px;
    height: 100px;
    background: darken(@bgc,20%);//亮度減少百分之二十
}

saturate 提高飽和度
desaturate 降低飽和度

@bgc: skyblue;
.box
{
    width: 100px;
    height: 100px;
    background:@bgc;
}
.box-1
{
    width: 100px;
    height: 100px;
    background: saturate(@bgc,100%); //飽和度提高百分之一百
}
.box-2
{
    width: 100px;
    height: 100px;
    background: desaturate(@bgc,100%);//飽和度減少百分之一百
}

percentage 轉(zhuǎn)換百分比
unit 單位聯(lián)合
ceil 向上取整
floor 向下取整
round 四舍五入
abs 絕對(duì)值

@h:100px;
.box{
    width: percentage(.1); 
    height: round(4.5);
    padding: ceil(4.1);
    border-width: abs(-100);
    margin: floor(4.9);
    font-size: unit(100,px);
    line-height: unit(@h);
}
//css
.box {
  width: 10%;
  height: 5;
  padding: 5;
  border-width: 100;
  margin: 4;
  font-size: 100px;
  line-height: 100;
}

總結(jié)

??less的基本知識(shí)都大概介紹了，第一次寫這樣的博文感覺有點(diǎn)吃力，感覺全程在貼代碼，不奢求有人看了，主要記錄下知識(shí)點(diǎn)以便自己回頭查閱，漫漫前端路繼續(xù)加油。

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

less入門

less入門

前言

css的不足

預(yù)處理語言

預(yù)處理語言的選擇

正文

變量

混合（mixin）

模塊化

when

loop

匹配模式

雜項(xiàng)目

arguments

避免編譯

！important

函數(shù)

常用的函數(shù)

總結(jié)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

less入門

前言

css的不足

預(yù)處理語言

預(yù)處理語言的選擇

正文

變量

混合（mixin）

模塊化

when

loop

匹配模式

雜項(xiàng)目

arguments

避免編譯

！important

函數(shù)

常用的函數(shù)

總結(jié)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av