標籤: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