CSS預處理器 Less

時間 2019-12-07

標籤 css 預處理欄目 CSS 简体版

原文原文鏈接

引言

CSS困境：常常看到一個標籤上存在不少樣式類名，在這種模式中咱們要時常關注CSS的優先級，避免樣式的重疊覆蓋。
預編譯器讓 CSS 變成一門可使用變量、循環、繼承、自定義方法等多種特性的標記語言，邏輯性得以大大加強

具備表明性的：Sass、Less 、Styluscss

Sass 誕生於 2007 年，Ruby 編寫，其語法功能都十分全面，能夠說它徹底把 CSS 變成了一門編程語言。另外在國內外都很受歡迎，而且它的項目團隊非常強大，是一款十分優秀的預處理語言。ajax

Stylus 誕生於 2010 年，來自 Node.js 社區，語法功能也和 Sass 不相伯仲，是一門十分獨特的創新型語言。npm

Less 誕生於 2009 年，受Sass的影響建立的一個開源項目。它擴充了 CSS 語言，增長了諸如變量、混合（mixin）、函數等功能，讓 CSS 更易維護、方便製做主題、擴充（引用於官網）。編程

Sass 與 Stylus 相比於 Less 功能更爲豐富，但對於學習成本以及適應時間，Less 稍勝一籌。bash
Less 沒有去掉任何 CSS 的功能，而是在現有的語法上，增添了許多額外的功能特性，因此學習 Less 是一件很是舒服的事情。less

Less中文官網編程語言

開始使用

使用Less有兩種方式ide

在頁面中引入 Less.js

可在官網下載
或使用CDN

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
複製代碼

注意：link 標籤必定要在 Less.js 以前引入，而且 link 標籤的rel 屬性要設置爲stylesheet/less。

<link rel="stylesheet/less" href="style.less">
<script src="less.min.js"></script>
複製代碼

在命令行使用npm安裝

npm install -g less
複製代碼

具體使用命令

$ lessc styles.less > styles.css
複製代碼

less語法

註釋

以//開頭的註釋，不會被編譯到css文件中
以/**/包裹的註釋會被編譯到css文件中

變量

同一個值重複屢次時函數

屬性值變量：以@開頭定義變量，使用時直接鍵入@名稱。

/* Less */
@color: #999;
@bgColor: skyblue;//不要添加引號
@width: 50%;
#wrap {
  color: @color;
  background: @bgColor;
  width: @width;
}

/* 生成後的 CSS */
#wrap {
  color: #999;
  background: skyblue;
  width: 50%;
}
複製代碼

選擇器/屬性名/URL變量：以@開頭定義變量，使用時@{名稱}

/* Less */
//->LESS代碼
    .@{selector} {
        width: 100px;
        height: 100px;
        @{property}: #000; //大括號包裹
        background: url("@{bgImg}/test.png");
    }
    @selector: box;
    @bgImg: "../img";
    @property: color;
複製代碼

變量的延遲加載：塊做用域、就近原則

嵌套

基本嵌套規則
&的使用：&表明的上一層選擇器的名字

/* Less */
#header{
  &:after{
    content:"Less is more!";
  }
  .title{
    font-weight:bold;
  }
  &_content{//理解方式：直接把 & 替換成 #header
    margin:20px;
  }
}
/* 生成的 CSS */
#header::after{ //&嵌套
  content:"Less is more!";
}
#header .title{ // 基本嵌套
  font-weight:bold;
}
#header_content{//沒有嵌套！
    margin:20px;
}
複製代碼

混合（Mixins）

Less 容許咱們將已有的 class 和 id 的樣式應用到另外一個不一樣的選擇器上學習

普通混合

//LESS代碼
.public {
    width: 100px;
    height: 100px;
}
nav ul {
    .public;
    list-style: none;
}
//編譯爲CSS的結果
.public {
    width: 100px;
    height: 100px;
}
nav ul {
    width: 100px;
    height: 100px;
    list-style: none;
}
複製代碼

不帶輸出的混合

//LESS代碼
//在選擇器後面加上()就能夠不編譯這個樣式了
.public() {
    width: 100px;
    height: 100px;
}
nav ul {
    .public;//若是public有子孫元素的樣式，一樣也會被複制過來
    list-style: none;
}
//編譯爲CSS的結果
//此處沒有.public啦
nav ul {
    width: 100px;
    height: 100px;
    list-style: none;
}
複製代碼

帶默認參數的混合

/*Less*/
#circle(@size: 25px){
     background-color: #4CAF50;
     border-radius: 100%;

     width: @size;
     height: @size;
}

#small-circle{
     #circle
}

#big-circle{
     #circle(100px)
}
/* 生成的 CSS */
#small-circle {
    background-color: #4CAF50;
     border-radius: 100%;
      width: 25px;
      height: 25px;
}
#big-circle {
    background-color: #4CAF50;
     border-radius: 100%;
     width: 100px;
     height: 100px;
}
複製代碼

匹配模式

按照模式進行匹配，要會找到方法中匹配程度最高的，進行樣式覆蓋替換。
全部模式共用的樣式，用@_。

/* Less */
.triangle(top,@width:20px,@color:#000){
    border-color:transparent  transparent @color transparent ;
}
.triangle(right,@width:20px,@color:#000){
    border-color:transparent @color transparent  transparent ;
}

.triangle(bottom,@width:20px,@color:#000){
    border-color:@color transparent  transparent  transparent ;
}
.triangle(left,@width:20px,@color:#000){
    border-color:transparent  transparent  transparent @color;
}
.triangle(@_,@width:20px,@color:#000){
    border-style: solid;
    border-width: @width;
}
#main{
    .triangle(left, 50px, #999)
}
/* 生成的 CSS */
#main{
 border-color:transparent  transparent  transparent #999;
 border-style: solid;
 border-width: 50px;
}
複製代碼

arguments變量

/* Less */
.border(@a:10px,@b:50px,@c:30px,@color:#000){
     border:solid 1px @color;
     box-shadow: @arguments;//指代的是 所有參數
}
#main{
     .border(0px,5px,30px,red);//必須帶着單位
}
/* 生成的 CSS */
#main{
     border:solid 1px red;
     box-shadow:0px,5px,30px,red;
}
複製代碼

運算

在Less中能夠進行加減乘除的運算，咱們能夠作屬性值和顏色的運算，這樣就能夠實現屬性值之間的複雜關係。

加減法時以第一個數據的單位爲基準
乘除法時注意單位必定要統一

/* Less */
@width:300px;
@color:#222;
#wrap{
  width:@width-20;
  height:@width-20*5;
  margin:(@width-20)*5;
  color:@color*2;
  background-color:@color + #111;
}

/* 生成的 CSS */
#wrap{
  width:280px;
  height:200px;
  margin:1400px;
  color:#444;
  background-color:#333;
}
複製代碼

LESS 提供了一系列的顏色運算函數：顏色會先被轉化成 HSL 色彩空間, 而後在通道級別操做

lighten(@color, 10%);     // return a color which is 10% *lighter* than @color
darken(@color, 10%);      // return a color which is 10% *darker* than @color
複製代碼

LESS提供了一組方便的數學函數

round(1.67); // returns `2`
ceil(2.4);   // returns `3`
floor(2.6);  // returns `2`
複製代碼

繼承

extend 關鍵字的使用

/* Less */
.animation{
    transition: all .3s ease-out;
    .hide{
      transform:scale(0);
    }
}
#main{
    &:extend(.animation);
}
#con{
    &:extend(.animation .hide);
}

/* 生成後的 CSS */
.animation,#main{
  transition: all .3s ease-out;
}
.animation .hide , #con{
    transform:scale(0);
}
複製代碼

all全局搜索替換

//使用選擇器匹配到的 所有聲明。
/* Less */
#main{
  width: 200px;
}
#main {
  &:after {
    content:"Less is good!";
  }
}
#wrap:extend(#main all) {}

/* 生成的 CSS */
#main,#wrap{
  width: 200px;
}
#main:after, #wrap:after {
    content: "Less is good!";
}
複製代碼

extend 與方法的差異

extend 是同個選擇器共用同一個聲明
方法是使用本身的聲明，增長了代碼的重複性

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。