CSS先行編譯語言-LESS

來源:互聯網
上載者:User

標籤:and   pre   ext   下載安裝   gpe   delay   www.   prope   使用   

LESS的作用

CSS層疊樣式表,它是標記語言,不是程式設計語言;所有的先行編譯CSS語言(less/sass…)都是賦予了CSS的物件導向思想

LESS的編譯

LESS叫做先行編譯CSS:寫好的LESS代碼瀏覽器是不能渲染的,需要我們把它編譯成為能渲染的CSS才可以

開發環境

在本地開發中這是開發環境 
生產環境 
本地開發完成了,我們需要把代碼上傳到伺服器上,伺服器上的環境叫做生產環境

在開發環境下,我們一般都通過匯入LESS外掛程式(less-2.5.3.min.js)來隨時編譯LESS代碼

<!--rel的值變為了stylesheet/less--><linL rel=‘stylesheet/less‘ href=‘css/1.less‘><script src=‘js/less-2.5.3.min.js‘></script> <!--由於每一次載入頁面,都需要匯入less.js,並且把less檔案重新編譯為css(很消耗效能,頁面開啟速度肯定會變慢),
所以真實項目中,只有開發環境下我們使用這種模式,生產環境下,我們肯定需要事先把寫好的less編譯為正常的css後,
在上線,以後使用者訪問的都是編譯好的css,而不是拿less現編譯-->

生產環境中,我們需要事先把less編譯成為css:
1、使用node編譯

  1、下載安裝node  2、在node全域環境下使用npm包管理器,安裝一個less模組

    npm install less -g 安裝命令列

  3、在執行的目錄中執行

    lessc xxx.less xxx.css 把less編譯為css

    lessc xxx.less xxx.min.css -x 不僅編譯成css,而且還把css壓縮了

2、使用編譯工具

LESS中的基礎文法

變數

/** 設定變數使用@[變數名]:變數值(傳統css支援的值都可以作為變數值)* 1、變數名中可以出-* 在部分減法數學運算的時候,我們需要明確是運算子還是名字中的-* (@shadow-px)-20* 2、不是所有的情況下都要使用變數,只有:很多樣式都是使用相同的值,而且以後如果改變的話,所有元素的樣式都要跟著改變,此時我們才用變數儲存起來** LESS中可以支援數學運算*/@a:1;@b:30%;@c:1000px;@d:#000;@shadow-px:100;.box{opacity:@a;filter: alpha(opacity=(@a*100));}

函數封裝

/** 在LESS中只要設定了一個樣式類,我們就可以把它稱之為一個方法,其它地方需要用到這些樣式,直接“.[類名]”調用即可(原理:把當前樣式類中的代碼原封不動的copy一份過去)* 不加括弧即是普通樣式類,也是封裝的一個函數,編譯的時候,這個樣式類中的代碼依然跟著編譯* 加括弧僅僅是封裝的函數,編譯的時候是不編譯函數的** 函數* .xxx(@xxx:xxx,@xxx){@arguments}*/ /*1、*/.pub(){width: 100px;height: 100px;background: green;} .box {.pub();background: red;} /*2、*/.transition(@property:all,@duration,@timing:linear,@delay:0s){transition:@arguments;/*transition:@property @duration @timing @delay; */}.box{.transition(all,1s,linear,0s);transition(@timing:ease,@duration:1s);} /*3、*/.sum(@n,@m;0){@result:@[email protected];}.box{.sum(10,20);width:unit(@result,px);/*unit是less提供的方法* unit([value],‘px‘) 給value值設定單位(但是如果之前已經有單位了,此處是把原有單位去掉)*/}

命名空間和範圍

@a:10;.box{width:unit(@a,px);@a:20;.mark{ //=>相當於.box .mark{}width:unit(@a,px);}}//結果:.box{width:20px;}.box .mark{width: 20px;}/*less中也有變數提升,而且less把聲明和定義在私人範圍中事先完成了*/
LESS中的extend繼承
.pub{width: 100px;height: 100px;background: red;}/** LESS中的extend繼承並不是copy代碼,而是讓當前的樣式類和繼承的樣式類公用一套樣式(編譯為群組選取器的方式)*/.box:extend(.pub){background: green;}//或者.box{&:extend(.pub);//=>原理是一樣的,也是把它放在.box的末尾background: green;}//結果.box.pub{width: 100px;height: 100px;background: red;} /*真實項目中,如果想使用extend實現繼承,我們一定都把需要繼承的樣式類寫在最外層(而不是裡層私人範圍),如果想繼承當前私人範圍的某個樣式類,需要把首碼都準備好*/
LESS中的條件和遞迴

條件

常用的條件運算子:>、>=、<、<=、=; 
設定的條件還可以使用IS函數: 
iscolor、isnumber、isstring、iskeyword、isurl、ispixel、ispercentage…

.pub(@x) when(@x<=10){width: 100px;height: 200px;}.pub(@x) when(@X>10){width: 200px;height: 400px;}.box{.pub(20);background: green;}//結果:.box{width: 200px;height: 400px;background: green;}

 

遞迴

.columns(@i) when(@i<=4){[email protected]{i}{width:unit(@i*10,%);}.columns(@i+1);}.columns(1);//結果:.box1{width:10%;}.box2{width:20%;}.box3{width:30%;}.box4{width:40%;}
LESS中的串連符和import
@import "reset.min.css";//=>在自己的less中把reset匯入進來@import (reference) "public";//=>加了reference匯入進來使用,但是不編譯裡面的代碼 .box {  .mark { //=> .box .mark   }  //&:在.box後面緊跟著誰  &.pp { //=>.box.pp    background: red;  }  & > .mm {    background: green;  }  &:hover {    background: orange;  }}

 

讓你快速進行web前端開發的途徑-LESS學習:瞭解LESS和編譯LESS

http://www.zhufengpeixun.com/qianduanjishuziliao/CSS3heHTML5zhuanti/2016-07-22/527.html

通過LESS的基礎文法的學習,提高web前端開發的效果

http://www.zhufengpeixun.com/qianduanjishuziliao/CSS3heHTML5zhuanti/2016-07-22/528.html

CSS先行編譯語言-LESS

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.