常見的CSS預處理器之Less初體驗

時間 2019-12-09

原文原文鏈接

CSS預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，爲CSS增長了一些編程的特性，將CSS做爲目標生成文件，而後開發者就只要使用這種語言進行編碼工做。css

簡單來講，CSS預處理器用一種專門的編程語言，進行Web頁面樣式設計，而後再編譯成正常的CSS文件，以供項目使用。
CSS預處理器的技術如今已經很成熟了，並且也出現了各類不一樣的 CSS 預處理器語言，可是呢不可能一一列出，面面俱到，這篇文章呢，主要是介紹一下比較常見的CSS預處理器語言之一之 Less初體驗。html

Less

Alexis Sellier與2009年設計
LESS的第一個版本是用Ruby編寫的，在後來的版本中，它被JavaScript替代了。
Less是一門CSS預處理語言，擴充了 css語言，增長了諸如變量、混合（mixin）、函數等功能，讓 css 更易於維護，方便製做主題。web

關於Less的基本使用，咱們須要從嵌套、混合、變量、函數以及引入這幾個方面來一一認識。npm

1 Less的安裝使用和編譯：

引用Less，全局安裝編程
```
npm install less -g
```
新建一個index.html文件和main.less，在index.html 中引入main.css，而後輸入下面語句自動編譯成main.css瀏覽器
```
lessc main.less main.css
```

2 Less 的基本語法

嵌套
在 css 中父子元素的寫法一般以下：less
```
.container {
    padding: 0;
}
.container .header {
    background-color: red;
}
```
經過Less 寫法以下，父子嵌套關係一目瞭然。也就是下面的代碼編譯就成了上面的css語法。編程語言
```
.container {
    padding: 0;
    .header {
        background-color: red;
    }
}
```

僞類
僞類的寫法，在 css 中寫法以下：函數

#header :after {
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}

在less 引入能夠用一個符號 & 代替主類 #header；&就表明了上一層的類名。優化

#header {
  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

變量
也就是說定義一個公共的變量不用屢次重複編寫相同的代碼；好比將三個div的背景顏色改爲藍色，咱們只須要以下所示：
```
@background:blue;
```
- less就是js的寫法來寫css
- 使用@符號定義變量
- @變量名當作是一個字符串
- 變量能夠做爲樣式屬性值：background-color：@color；
- 也能夠做爲類名，咱們須要把{ }包起來：以下代碼.@classname 表示的就是 .main。
```
.@{classname}{
    background-color：@color;
}
@classname:main;
@color:red;
```

函數

使用 $ lessc func.less 進行轉譯 func.css 文件

.border-radius(@radius) {
  -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
          border-radius: @radius;
}
#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
}

轉化成了css以下:
#header {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.button {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

函數的參數容許設置默認值

.border-radius(@radius: 10px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}
#header{
    .border-radius();
}
.button{
    .border-radius();
}

編譯css後的代碼爲：
#header {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.button {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

函數有多個參數時用分號隔開，調用時就是經過變量名稱，而不是位置

.mixin(@radius:10px;@color：green;) {
 -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
  color:@color;
}
#header{
    .mixin(@color:green);
}
.button{
    .mixin(@color:green);
}

編譯成css爲：
#header{
    -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
      color:green;
}
.button{
    -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
      color:green;
}

Less 內置函數（本身自己存在的函數）
1 escape
2 percentage（百分比）

.mixin(@radius:10px;@color：green;) {
 -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
  color:@color;
  width:percentage(.5);
}
#header{
 .mixin(@color:green);
}
.button{
 .mixin(@color:green);
}
     編譯成css爲：
     #header{
  -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    color:green;
    width:50%;
     }
     .button{
  -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    color:green;
    width:50%;
     }

3 convert（單位的轉換）

混合

抽取公共類，例以下面的css代碼能夠用less這樣編寫

在css中的代碼：
#header a {
    color: #111;
    border-top: solid 1px #595959;
    border-bottom: solid 2px #595959;
}
#header span {
    height: 16px;
    border-top: solid 1px #595959;
    border-bottom: solid 2px #595959;
}
#header p {
    color: red;
    border-top: solid 1px #595959;
    border-bottom: solid 2px #595959;
}
.borde_style {
    border-top: solid 1px #595959;
    border-bottom: solid 2px #595959;
}

在less中咱們能夠定義一個公共的樣式名border-style，而後編譯出來的css就是上面的css代碼：
.borde_style {
    border-top: solid 1px #595959;
    border-bottom: solid 2px #595959;
}
#header a {
    color: #111;
    .borde_style;
}
#header span {
    height: 16px;
    .borde_style;
}
#header p {
    color: red;
    .borde_style();
}