CSS預(yù)處理器之Less

什么是預(yù)處理CSS

  • CSS語(yǔ)言的超集，比CSS更豐滿(mǎn)
  • 用專(zhuān)門(mén)的語(yǔ)言編寫(xiě)CSS，但是這種語(yǔ)言支持變量、混合、函數(shù)、嵌套、循環(huán)等特性，然后再編譯成正常的CSS文件
  • 常見(jiàn)的CSS預(yù)處理器語(yǔ)言
    • Sass（SCSS）、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS等

LESS

使用

  • 安裝
    • npm install -g less
  • sublime less高亮插件
    • LESS
    • lessc
  • less compiler
    • 開(kāi)發(fā)階段編譯Less文件輸出CSS內(nèi)容
    • lessc main.less 直接在命令輸出
    • lessc main.less > main.css 輸出到指定文件
  • less.js
    • 網(wǎng)頁(yè)運(yùn)行階段解析Less文件
    • 開(kāi)發(fā)可用，生產(chǎn)環(huán)境由于存在性能問(wèn)題，建議使用編譯后的css文件

項(xiàng)目中引用

  • 引入.less樣式表的鏈接
<link rel="stylesheet/less" type="text/css" href="main.less" />
  • 引入less.js
<script src="less.js" type="text/javascript"></script>
  • tips
    • 在引入less.js之前加載所有的樣式表
    • 使用運(yùn)行時(shí)編譯一定要使用http方式訪(fǎng)問(wèn)
    • 引入less文件rel="stylesheet/less",而引入css文件rel="stylesheet"

語(yǔ)法

注釋

// 模板注釋?zhuān)@里的注釋轉(zhuǎn)換成CSS后將會(huì)刪除
/* CSS 注釋語(yǔ)法 轉(zhuǎn)換為CSS后任然保留 */

定義變量

1、將需要重復(fù)使用或經(jīng)常修改的值定義為變量，需要使用的地方引用
2、變量具有計(jì)算功能
3、定義一個(gè)變量名為變量
4、變量范圍采用就近原則

  • less
// @變量名: 變量值;
@backgroundColor: #f5f5f5;
// 變量計(jì)算
@nice-blue: #5b83ad;
@light-blue: @nice-blue + #666;
// 定義一個(gè)變量名為變量
@fontSize: 30px;
@bottomFontSize: "fontSize";

body {
    // css屬性：@變量名；
    background-color: @backgroundColor;
    color: @light-blue;
    font-size: @@bottomFontSize;
}
  • css
body {
    background-color: #f5f5f5;
    color: #c1e9ff;
    font-size: 30px;
}
  • tips
    • 在Less中變量只能被定義一次，類(lèi)似常量，之后定義的會(huì)覆蓋前面定義的變量

嵌套Nested Rules

如果在CSS中經(jīng)常使用子代選擇器，那么使用Less的嵌套語(yǔ)法會(huì)更方便

  • less
.container {
    width: @containerWidth;
    height: 100px;
    > .row {
        height: 100px;
        width: 100px;
        background-color: @mainColor;
        a {
            color: #f40;
            &:hover {
                color: #f90;
            }
        }
    }

    div {
        .hello {
            background-color: pink;
            height: 30px;
        }
    }
}
  • css
.container {
  width: 1024px;
  height: 100px;
}
.container > .row {
  height: 100px;
  width: 100px;
  background-color: #999;
}
.container > .row a {
  color: #f40;
}
.container > .row a:hover {
  color: #f90;
}
.container div .hello {
  background-color: pink;
  height: 30px;
}
  • tips
    • 在Less中&區(qū)別很大，有&時(shí)解析的是同一個(gè)元素或此元素的偽類(lèi)，沒(méi)有&解析的是后代元素

Mixin

混入也叫”混入?yún)?shù)“，混合其實(shí)就是一種嵌套，允許將一個(gè)類(lèi)嵌入到另一個(gè)類(lèi)中，而被嵌入的類(lèi)稱(chēng)為一個(gè)變量（混合液像一個(gè)帶有參數(shù)的function）

  • less
// 用一個(gè)類(lèi)定義CSS，然后把整個(gè)類(lèi)作為一個(gè)變量來(lái)使用，嵌入到另一個(gè)類(lèi)中當(dāng)屬性
// 不定義任何參數(shù) .roundedCorners() {}
.roundedCorners(@radius: 20px) {
    border-radius: @radius;
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
    background-color: green;
}

@circleR: 80px;
.circle {
    width: @circleR;
    height: @circleR;
    .roundedCorners(@circleR);
}

.circle1 {
    width: @circleR;
    height: @circleR;
    // 無(wú)參數(shù)方式可直接寫(xiě).roundedCorners;
    .roundedCorners();
}
  • css
.circle {
  width: 80px;
  height: 80px;
  border-radius: 80px;
  -moz-border-radius: 80px;
  -webkit-border-radius: 80px;
  background-color: green;
}
.circle1 {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  background-color: green;
}
  • tips
    • 任何CSS的類(lèi)或ID下的樣式都可以當(dāng)做變量，使用混合模式用來(lái)當(dāng)做另一個(gè)元素的屬性值

@arguments 當(dāng)Mixins引入這個(gè)參數(shù)時(shí)，將表示所有的變量，當(dāng)不想處理個(gè)別參數(shù)時(shí)，這個(gè)參數(shù)將很有用

  • less
// @arguments
.boxShadow(@x: 0, @y:0, @blur: 1px, @color: #000) {
    -mox-box-shadow: @arguments;
    -webkit-box-shadow: @arguments;
    box-shadow: @arguments;
}

.bottom {
    .boxShadow(2px, 2px, 3px, red);
}
  • css
.bottom {
  -mox-box-shadow: 2px 2px 3px red;
  -webkit-box-shadow: 2px 2px 3px red;
  box-shadow: 2px 2px 3px red;
}

import

通過(guò)@import將多個(gè)less文件合并

  • less
// main_p.less
.center {
    // @h在main_v.less定義
    height: @h;
    background-color: yellow;
}

@import url('main_v.less');

// main_v.less
@h: 100px;
  • css
.center {
  height: 100px;
  background-color: yellow;
}

Functions & Operations

Operations 可以讓我們對(duì)元素的屬性值、顏色進(jìn)行加減乘除運(yùn)算，主要針對(duì)任何數(shù)字、顏色、變量的操作
Functions 就像JavaScript中的function一樣可以進(jìn)行我們想要的值操作，主要針對(duì)Color functions，Less提供了多種變化顏色的功能

  • less
@header-border: 4px;
@base-color: #111;
@red: #842210;

#header {
    height: 100px;
    color: @base-color * 3;
    border: 5px solid desaturate(@red, 100%);
    border-width: @header-border @header-border * 2 @header-border * 3 @header-border; 
    border-color: desaturate(@red, 100%) @red lighten(@red, 10%) darken(@red, 30%);
}
  • css
#header {
  height: 100px;
  color: #333333;
  border: 5px solid #4a4a4a;
  border-width: 4px 8px 12px 4px;
  border-color: #4a4a4a #842210 #b12e16 #000000;
}
Operation使用
  • less
#nav {
    color: #888 / 4;
    background-color: green;

    // 簡(jiǎn)單四則運(yùn)算 同單位操作
    @base: 5%;
    @filter: @base * 2;
    @other: @base + @filter;
    height: 100% / 2 + @other;

    // 不同單位操作
    @borderW: 1px + 6;
    border: @borderW solid yellow;

    // 使用() 改變運(yùn)算的先后順序
    @width: 20px;
    width: (@width + 5) * 3;
}
  • css
#nav {
  color: #222222;
  background-color: green;
  height: 65%;
  border: 7px solid yellow;
  width: 75px;
}
Color Functions

提供多種變換顏色的函數(shù)，先把顏色轉(zhuǎn)換成HSL色，然后在此基礎(chǔ)上進(jìn)行操作

  • lighten：將一個(gè)顏色變亮
    • lighten(#000, 10%) = #1a1a1a
  • darken：將一個(gè)顏色變暗
    • darken(#000, 10%) // #e6e6e6

命名空間Namespaces

將公共的內(nèi)容封裝起來(lái)，在其他地方調(diào)用，類(lèi)似如下樣式#common > .button

  • less
#common {
    .button {
        display: block;
        border: 1px solid black;
        width: 100px;
        height: 30px;
        background-color: grey;
        &:hover {
            background-color: white;
        }
    }
}
#header {
    .button {
        #common > .button;
    }
}

#nav {
    a {
        #common > .button;
    }
}
  • css
#common .button {
  display: block;
  border: 1px solid black;
  width: 100px;
  height: 30px;
  background-color: grey;
}
#common .button:hover {
  background-color: white;
}
#header .button {
  display: block;
  border: 1px solid black;
  width: 100px;
  height: 30px;
  background-color: grey;
}
#header .button:hover {
  background-color: white;
}
#nav a {
  display: block;
  border: 1px solid black;
  width: 100px;
  height: 30px;
  background-color: grey;
}
#nav a:hover {
  background-color: white;
}

Loops

在Less中，混合可以調(diào)用它自身。所以，Less中的混合遞歸調(diào)用自己，就形成了循環(huán)結(jié)構(gòu)

  • less
@counter: 5;

.loop(@counter) when(@counter > 0) {
  .loop((@counter - 1)); // 遞歸調(diào)用自身
  width: (20px * @counter); // 每次調(diào)用時(shí)產(chǎn)生的樣式代碼
}

div.loop {
  background-color: green;
  height: 50px;
  .loop(5);
}
  • css
div.loop {
  background-color: green;
  height: 50px;
  width: 20px;
  width: 40px;
  width: 60px;
  width: 80px;
  width: 100px;
}

使用遞歸循環(huán)最常見(jiàn)的情況就是生成柵格系統(tǒng)的CSS

  • less
div.row {
  height: 100px;
}
.generate-columns(4);
.generate-columns(@n, @i: 1) when (@i =< @n) {
  .column-@{i} {
    width: (@i * 100% / @n);
    height: 100%;
    float: left;
    background-color: #369 + @i * 15;
  }
  .generate-columns(@n, (@i + 1));
}
  • css
div.row {
  height: 100px;
}
.column-1 {
  width: 25%;
  height: 100%;
  float: left;
  background-color: #4275a8;
}
.column-2 {
  width: 50%;
  height: 100%;
  float: left;
  background-color: #5184b7;
}
.column-3 {
  width: 75%;
  height: 100%;
  float: left;
  background-color: #6093c6;
}
.column-4 {
  width: 100%;
  height: 100%;
  float: left;
  background-color: #6fa2d5;
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

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

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