LESS CSS使用方法 , CSS也能跟JS同樣玩

時間 2019-11-29

標籤 css 使用方法同樣欄目 CSS 简体版

原文原文鏈接

本文轉自 http://blog.csdn.net/xuyonghong1122/article/details/51986472css

在使用CSS的時候,總會有這個想法

這個屬性值總是重複寫好煩

這個屬性值我在前面那個CSS文件中寫過,好想直接拿過來用

CSS能不能像其餘程序性語言同樣用一個變量來代替須要重複利用的內容呢

鑑於以上的想法並不是我一人會想到,只要是作過前端的確定都會思考過這個問題,無奈CSS基本能夠說沒有語法可依循,因而有了LESS框架html

什麼是CSS?

做爲一門標記性語言，CSS 的語法相對簡單，對使用者的要求較低，但同時也帶來一些問題：CSS 須要書寫大量看似沒有邏輯的代碼，不方便維護及擴展，不利於複用，尤爲對於非前端開發工程師來說，每每會由於缺乏 CSS 編寫經驗而很難寫出組織良好且易於維護的 CSS 代碼，形成這些困難的很大緣由源於 CSS 是一門非程序式語言，沒有變量、函數、SCOPE（做用域）等概念前端

什麼是LESS ?

它在 CSS 的語法基礎之上，引入了變量，Mixin（混入），運算以及函數等功能，大大簡化了 CSS 的編寫，而且下降了 CSS 的維護成本，就像它的名稱所說的那樣，LESS 可讓咱們用更少的代碼作更多的事情。node

LESS的原理

本質上，LESS 包含一套自定義的語法及一個解析器，用戶根據這些語法定義本身的樣式規則，這些規則最終會經過解析器，編譯生成對應的 CSS 文件。LESS 並無裁剪 CSS 原有的特性，更不是用來取代 CSS 的，而是在現有 CSS 語法的基礎上，爲 CSS 加入程序式語言的特性。android

環境配置

以webStorm爲例,在開始使用LESS以前你必需要安裝如下環境
node.js
node.js命令行輸入「npm install -g less」安裝less；
打開webstorm，File→Settings→Tools→File Watchers,點擊右側綠色「+」號
固然還有一種辦法使用LESS就是直接使用HBuilder編輯器,自帶LESS插件web

開始使用

本例以HBuilder編寫,在咱們寫LESS文件的時候會自動幫咱們生成CSS文件npm

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <link href="css/index.css" rel="stylesheet" />
    <body>
        <div class="index-home">
            <span>This is index</span>
        </div>
    </body>
</html>

咱們的CSS文件會自動生成,不用作任何修改,咱們只須要修改咱們的LESS文件便可框架

上LESS!!!!

@index-color:red;
.index-home{
    box-sizing: content-box;
    background-color: @index-color;  
}

　　寫完以後咱們去看一下index.css生成的代碼 less

是的背景色變成了紅色,咱們看一下運行效果
webstorm

是的,就是這麼好使,若是你覺得本文結束了,那就錯了,這隻能知足當前頁面引用當前LESS文件中的變量,如何引用其餘變量呢?
LESS文件中是能夠引用其餘LESS文件的,玩過Java的都知道,引用一個類會用到什麼關鍵字,沒錯,import,你們準備上車!!!!

如今我想在index.less文件中去引用一個基類LESS文件,該如何書寫呢
首先寫base-less.less
```
 @base-font-color:white; 
```
　　

在base-less文件中寫一個base-font-color:white來控制文本顏色爲白色
在index.less中引用,以下

很簡單明瞭,引用結束咱們看一下效果是怎麼樣的

看到這裏,有人會問,能不能直接引用LESS文件啊?固然能夠啊

咱們能夠直接在客戶端使用 .less（LESS 源文件），只須要從 http://lesscss.org下載 less.js 文件，而後在咱們須要引入 LESS 源文件的 HTML 中加入以下代碼：

LESS 源文件的引入方式與標準 CSS 文件引入方式同樣：
```
<link rel="stylesheet/less" type="text/css" href="index.less">

<link rel="stylesheet/less" type="text/css" href="index.less">
```
　　其實LESS是有本身的生命週期的,哦,很差意思,是做用域…
簡單的講就是局部變量仍是全局變量的概念，查找變量的順序是先在局部定義中找，若是找不到，則查找上級定義，直至全局。
簡單明瞭,代碼示例:

 @width : 20px; 
 .index{ 
   @width : 30px; 
   .centerDiv{ 
       width : @width;// 此處應該取最近定義的變量 width 的值 30px 
              } 
 } 
 .leftDiv { 
     width : @width; // 此處應該取最上面定義的變量 width 的值 20px 
 }

終於到最後了,最後也是LESS最厲害的做用之一了,你能夠把LESS當成JS來玩

```
@import "base-less.less";
@index-color: red;
.index-home {
    box-sizing: content-box;
    background-color: @index-color;
    color: @base-font-color;
    .marginTop(100px); 
}
.marginTop(@distance) {
    margin-top: @distance; 
}
```
　　

能夠直接調用」函數」來完成一些屬性的賦值,看下效果如何

看到這裏,基本介紹就結束了,LESS確實很方便,另外若是你是一名Android開發者,這我的你必定的關注一下,他的博客都是乾貨———-他就是NoHttp的做者:嚴振杰博客地址