激情五月天婷婷,亚洲愉拍一区二区三区,日韩视频一区,a√天堂中文官网8

<ul id="buwfs"><strike id="buwfs"><strong id="buwfs"></strong></strike></ul>
    <output id="buwfs"></output>
  • <dfn id="buwfs"><source id="buwfs"></source></dfn>
      <dfn id="buwfs"><td id="buwfs"></td></dfn>
      <div id="buwfs"><small id="buwfs"></small></div>
      <dfn id="buwfs"><source id="buwfs"></source></dfn>
      1. <dfn id="buwfs"><td id="buwfs"></td></dfn>
        始創(chuàng)于2000年 股票代碼:831685
        咨詢熱線:0371-60135900 注冊有禮 登錄
        • 掛牌上市企業(yè)
        • 60秒人工響應(yīng)
        • 99.99%連通率
        • 7*24h人工
        • 故障100倍補(bǔ)償
        全部產(chǎn)品
        您的位置: 網(wǎng)站首頁 > 幫助中心>文章內(nèi)容

        LESS介紹及其與Sass的差異

        發(fā)布時間:  2012/8/20 17:45:41

        自從一個月前我偶然發(fā)現(xiàn)LESS之后我就開始堅定的使用它了。CSS本身對我來說從來不是問題,但是我很好奇使用變量來沿著一個調(diào)色盤為我的網(wǎng)站或模板創(chuàng)建一些東西的想法。擁有一個提供固定數(shù)量選項(xiàng)可選的色盤可以讓我避免顏色太跳躍以至于從一個已定的風(fēng)格中脫離。

        LESS介紹及其與Sass的差異

        事實(shí)證明,LESS——以及Sass——功能比這個要多太多。LESS和Sass在語法上有些共性,比如下面這些:

        ● 混入(Mixins)——class中的class;

        ● 參數(shù)混入——可以傳遞參數(shù)的class,就像函數(shù)一樣;

        ● 嵌套規(guī)則——Class中嵌套class,從而減少重復(fù)的代碼;

        ● 運(yùn)算——CSS中用上數(shù)學(xué);

        ● 顏色功能——可以編輯顏色;

        ● 名字空間(namespace)——分組樣式,從而可以被調(diào)用;

        ● 作用域——局部修改樣式;

        ● JavaScript 賦值——在CSS中使用JavaScript表達(dá)式賦值。

        LESS和Sass的主要不同就是他們的實(shí)現(xiàn)方式,LESSS是基于JavaScript,所以,是在客戶端處理的。

        另一方面,Sass是基于Ruby的,然后是在服務(wù)器端處理的。很多開發(fā)者不會選擇LESS因?yàn)镴avaScript引擎需要額外的時間來處理代碼然后輸出修改過的CSS到瀏覽器。關(guān)于這個有很多種方式,我選擇的是只在開發(fā)環(huán)節(jié)使用LESS。一旦我完成了開發(fā),我就復(fù)制然后粘貼LESS輸出的到一個壓縮器,然后到一個單獨(dú)的CSS文件來替代LESS文件。另一個選擇是使用LESS.app來編譯和壓縮你的LESS文件。兩個選擇都將最小化你的樣式輸出,從而避免由于用戶的瀏覽器不支持JavaScript而可能引起的任何問題。盡管這不大可能,但終歸是有可能的。

        LESS Is More

        介紹

        在你的項(xiàng)目中引入LESS很簡單:

        1.下載less.js;

        2.創(chuàng)建一個文件來放你的樣式,比如style.less;

        3.添加以下代碼到你的HTML的<head>中:

        1. <link rel="stylesheet/less" type="text/css" href="styles.less"> 
        2. <script src="less.js" type="text/javascript"></script> 

        請注意link的rel屬性。你需要在屬性值的最后面使用/less以使LESS起作用。然后在link后面引入scirpt也是必須的。如果你在用HTML5語法——為什么不用呢?——你可以省去type=”text/css”和type=”text/javascript”。

        其實(shí)也有一個服務(wù)器端的LESS版本。在服務(wù)器上安裝LESS的最簡單的辦法就是使用Node Package Manager (NPM,一看就知道是基于Node.js的)。

        變量

        如果你是個開發(fā)者,變量應(yīng)該是你最好的朋友。如果你要重復(fù)的使用一個信息(本例中就是color),將它設(shè)置為一個變量就可以。這樣,你就可以保證自己的一致性并可能減少滾動代碼來查找顏色值、復(fù)制、粘貼等繁瑣的工作了。你甚至可以加或者減一些你需要渲染的HEX值到這些顏色上面。看下例子:

        1. @blue: #00c;  
        2. @light_blue: @blue + #333;  
        3. @dark_blue: @blue - #333; 

        如果我們將這些樣式應(yīng)用到3個div上面,我們就可以看到由加上和減掉的HEX值形成的漸變的效果:

        LESS介紹及其與Sass的差異

        從@light_blue到@blue到@dark_blue的漸變效果

        關(guān)于變量在LESS和Sass中的唯一區(qū)別就是,LESS用@,Sass用$。同時還有一些作用域上的差別,我后面會提到。

        混入(mixin)

        偶爾,我們會創(chuàng)建一些會在樣式表中重復(fù)使用的樣式規(guī)則。沒有人會阻止你在一個HTML的元素中使用多個class,但是你可以用LESS,在樣式表中完成。為了描述這一點(diǎn),我寫了一點(diǎn)兒例子:

        1. .border {  
        2.     border-top1px dotted #333;  
        3. }  
        4. article.post {  
        5.     background#eee;  
        6.     .border;  
        7. }  
        8. ul.menu {  
        9.     background#ccc;  
        10.     .border;  

        這可以給到你與你在兩個元素中分別添加.bordered class同樣的效果——而且僅僅在樣式表中就完成了。而且它工作的很好:

        LESS介紹及其與Sass的差異
        文字和無序列表都被用上了邊框樣式

        在Sass中,你要在樣式規(guī)則前面添加@mixin聲明,規(guī)定它是個嵌套。然后,通過@include來調(diào)用它:

        1. @mixin border {  
        2.     border-top1px dotted #333;  
        3. }  
        4. article.post {  
        5.     background#eee;  
        6.     @include border;  
        7. }  
        8. ul.menu {  
        9.     background#ccc;  
        10.     @include border;  

        參數(shù)混入

        就像在CSS中有函數(shù)功能一樣,這些對于那些在現(xiàn)在的CSS工作中多余的工作非常有用。最好和最有用的例子就是我們正在經(jīng)歷的從CSS2到CSS3過渡過程中的很多瀏覽器私有前綴。Nettuts+有一篇Jeffrey Way寫的很贊的視頻和文章,內(nèi)容是包含著由有用的參數(shù)組成的文件,他們涵蓋了大部分使用各個瀏覽器私有前綴的CSS3屬性。例如,在他們的格式中,一個簡單的處理圓角的mixin是這樣的:

        1. .border-radius( @radius: 3px ) {  
        2. -webkit-border-radius: @radius;  
        3. -moz-border-radius: @radius;  
        4. border-radius: @radius;  

        在這個例子中,.border-radius有個默認(rèn)的3px的圓角,但是你可以使用你需要的任何值。.border-radius(10px)將會生成半徑為10px的圓角。

        Sass中的語法很像LESS,只是使用$聲明變量,然后使用前面提到的@mixin和@include來調(diào)用。

        選擇器繼承

        這個東西LESS并沒有提供。通過這個功能,你可以將一個選擇器附加到已經(jīng)預(yù)先定義的選擇器上,而無需再使用逗號將兩者分開的寫法了:

        1. .menu {  
        2.     border1px solid #ddd;  
        3. }  
        4. .footer {  
        5.     @extend .menu;  
        6. }  
        7.    
        8. /* 上面的寫法規(guī)則和下面的效果是一樣的: */ 
        9. .menu, .footer {  
        10.     border1px solid #ddd;  

        嵌套規(guī)則

        在css中嵌套class和ID是避免你的樣式干擾或者被別的樣式干擾的唯一方法了。但是這可能會很凌亂。使用一個類似于#site-body .post .post-header h2 的選擇器毫無吸引力而且會占用大量不必要的空格。使用LESS,你可以嵌套id、class以及標(biāo)簽。對于前面提到的例子,你可以這樣寫:

        1. #site-body { …  
        2.     .post { …  
        3.         .post-header { …  
        4.             h2 { … }  
        5.             a { …  
        6.                 &amp;:visited { … }  
        7.                 &amp;:hover { … }  
        8.             }  
        9.         }  
        10.     }  

        上面的代碼最終和上面的例子(那一長串的選擇器)的效果一樣,但是要更容易閱讀和理解的多,而且它占用很少的空間。你也可以通過&來引用元素樣式到他們的偽元素上,該功能類似于JavaScript中的this。

        運(yùn)算

        這可能是你所期望的:使用數(shù)字或者變量在你的樣式表中實(shí)現(xiàn)數(shù)學(xué)運(yùn)算!

        1. @base_margin: 10px;  
        2. @double_margin: @base_margin * 2;  
        3. @full_page: 960px;  
        4. @half_page: @full_page / 2;  
        5. @quarter_page: (@full_page / 2) / 2

        聲明下,我也意識到我可以除以4來獲得@quarter_page變量,但是這里我只是想要演示下圓括號組成“運(yùn)算順序”在這里也是可以用的。在使用簡寫的規(guī)則中,小括號也是必須的,比如 border: (@width / 2) solid #000。

        Sass在數(shù)字上比LESS更專業(yè)。它已經(jīng)可以換算單位了。Sass可以處理無法識別的度量單位并將其輸出。這個特性很明顯是一個對未來的嘗試——證明W3C作出的一些改變。

        1. /* Sass */  
        2. 2in + 3cm + 2pc = 3.514in  
        3.    
        4. /* LESS */  
        5. 2in + 3cm + 2pc = Error 

        Color函數(shù)

        在文章開頭,我提到了LESS如何幫我在編碼過程中處理圍繞著一個調(diào)色板。對此貢獻(xiàn)最大的一部分就是顏色函數(shù)。加入你用一個標(biāo)準(zhǔn)的藍(lán)色貫穿到你的樣式中,然后你想要在表單中用這個藍(lán)色來做一個漸變的按鈕。你可以打開Photoshop或者其它的編輯器來獲取一個比藍(lán)色較淺的或者較暗的HEX色值來作為漸變色;蛘,你可以只是使用LESS中的顏色函數(shù)。

        1. @blue: #369;  
        2. .submit {  
        3.     padding5px 10px;  
        4.     border1px solid @blue;  
        5.     background: -moz-linear-gradient(top, lighten(@blue10%), @blue 100%); /*Moz*/ 
        6.     background: -webkit-gradient(linear, center topcenter bottom, from(lighten(@blue10%)), color-stop(100%, @blue)); /*Webkit*/ 
        7.     background: -o-linear-gradient(top, lighten(@blue10%0%, @blue 100%); /*Opera*/ 
        8.     background: -ms-linear-gradient(top, lighten(@blue10%0%, @blue 100%); /*IE 10+*/ 
        9.     background: linear-gradient(top, lighten(@blue10%0%, @blue 100%); /*W3C*/ 
        10.     color#fff;  
        11.     text-shadow0 -1px 1px rgba(0,0,0,0.4);  

        lighten函數(shù)很明顯就是用百分比值來減輕顏色,在這個例子中,它將減輕這個基礎(chǔ)的藍(lán)色的10%。這種方法可以讓我們變化的元素或者其它任何元素的顏色值——只是簡單的改變基礎(chǔ)顏色而已。這對于主題(模板)來說非常有用。而且,如果你使用參數(shù)功能,像上面提到的,你還可以更簡單的應(yīng)用到一些瀏覽器私有前綴的聲明中,比如:.linear-gradient(lighten(@blue), @blue, 100%);。

        嗯,最終的效果的確很贊:

        LESS介紹及其與Sass的差異

        很贊的漸變的、基于變量的”Submit”按鈕

        還有很多其它的色彩函數(shù),比如變暗或者調(diào)整顏色的飽和度,甚至你可以旋轉(zhuǎn)色盤來使用其它顏色。我建議親自嘗試下你能想出的(用法)。

        Sass貌似有更多的選項(xiàng)——但我并不需要這么多。我個人最常用的還是lighten和darken。如果你想了解更多,可以看一下這篇很詳細(xì)的介紹。

        條件語句與控制

        這是一個的確很贊的東東,也是另一個LESS不支持的功能。使用 Sass,你可以使用if { } else { } 條件語句,以及for { }循環(huán)。它甚至支持 and、 or和 not,以及 <、 >、 <=、 >= 和 == 等操作符。

        1. /* Sample Sass "if" statement */ 
        2. @if lightness($color) &gt; 30% {  
        3.     background-color#000;  
        4. } @else {  
        5.     background-color#fff;  
        6. }  
        7.    
        8. /* Sample Sass "for" loop */ 
        9. @for $i from 1px to 10px {  
        10.     .border-#{i} {  
        11.     border: $i solid blue;  
        12.     }  

        名字空間(Namespaces)

        名字空間可以用于組織我們的CSS到另一個檔次,我們可以將一些公用的樣式分組,然后在用的時候直接使用。例如,如果我們創(chuàng)建了一個名為default的樣式分組,我們就可以在用到的時候直接從該組中調(diào)用。

        1. #defaults {  
        2.     .nav_list () {  
        3.         list-stylenone;  
        4.         margin0padding0;  
        5.     }  
        6.     .button () { … }  
        7.     .quote () { … }  

        然后,在我們的代碼中,如果我們正好在一個nav元素中使用了ul元素,我們就會想到我們需要default樣式。那么我們就可以簡單的調(diào)用它,它也會被直接應(yīng)用。

        1. nav ul {  
        2.     #defaults &gt; .nav_list;  

        作用域

        作用域是編程中的標(biāo)配,LESS中也是。如果你在你樣式表的root級聲明一個變量,它在整個文檔中都是可以用的。然而,如果你在一個選擇器,比如id或者class中,重新定義了這個變量,那么,它就只能在這個選擇器中可用了——當(dāng)然是重新定義后的新值。

        1. @color#00c/* 藍(lán)色 */ 
        2. #header {  
        3.     @color#c00/* red */ 
        4.     border1px solid @color; /* 紅色邊框 */ 
        5. }  
        6. #footer {  
        7.     border1px solid @color; /* 藍(lán)色邊框 */ 

        因?yàn)槲覀冊?header中重新定義了color變量,變量的值將會是不同的而且只會在該選擇器中有效。它之前或者之后的所有地方,如果沒有被重新定義,都會保持那個原始的值。

        作用域在Sass中稍有不同。在上面的代碼中,當(dāng)@color變量變?yōu)榧t色后,代碼中,此處之后的該變量的值,將會被重寫(成為紅色)。

        注釋

        這一部分比較基礎(chǔ)。LESS中允許兩種注釋寫法。標(biāo)準(zhǔn)的CSS注釋,/* comment */,是有效的,而且能夠通過處理并正確輸出。當(dāng)行注釋,// comment,同樣可以用但是不能夠通過處理也不能被輸出,然后,結(jié)果是,“無聲的”。

        導(dǎo)入

        導(dǎo)入也相當(dāng)符合標(biāo)準(zhǔn)。標(biāo)準(zhǔn)的 @import: ‘classes.less’; 處理的很好。然而,如果你想要導(dǎo)入其它的LESS文件,那么文件的擴(kuò)展名是可選的,所以 @import ‘classes’; 也是可行的。如果你想要導(dǎo)入一些無需LESS處理的內(nèi)容,你可以使用 .css 擴(kuò)展 (比如, @import: ‘reset.css’;)。

        字符串插入

        字符串也是可以用于變量中的,然后通過@{name}來調(diào)用。

        1. @base_url : 'http://www.qianduan.net';  
        2. background-imageurl("@{base_url}/images/background.png"); 

        轉(zhuǎn)義(Escaping)

        可能偶爾會需要引入一個CSS中非法或者LESS無法識別的值。通常是一些IE的hack。要避免拋出異常并破壞LESS,你將需要避開它們。

        1. .class {  
        2.     filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=20)";  
        3. }  
        4.    
        5. /*實(shí)際上將會輸出下面的代碼: */ 
        6. .class {  
        7.     filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);  

        JavaScript 賦值

        這是LESS中我最中意的部分:在樣式表中使用Javascript——相當(dāng)精彩。你可以使用表達(dá)式,也可以參考環(huán)境方向來使用反單引號。

        1. @string: `'howdy'.toUpperCase()`; /* @string 變成 'HOWDY' */ 
        2.    
        3. /* 你也可以使用前面提到的插值: */ 
        4. @string: 'howdy';  
        5. @var: ~`'@{string}'.topUpperCase()`; /* 變?yōu)?nbsp;'HOWDY' */ 
        6.    
        7. /* 獲取文檔的信息 */ 
        8. @height = `document.body.clientHeight`; 

        輸出格式

        然而LESS并沒有輸出設(shè)置,而Sass提供4中輸出選項(xiàng):nested, compact, compressed 和 expanded。

        結(jié)語

        這兩個方法有很多共同點(diǎn)。對寫代碼的設(shè)計師來說它們都是很玄的工具,它們也可以幫助開發(fā)者更有效和快速的工作。如果你是Ruby或HAML的粉絲,那么Sass會是你的好助手。對我來說,一個PHP 和JavaScript極客,我傾向于LESS,因?yàn)樗阌谝牒湍軌蚴褂肑avaScript的表達(dá)式以及文檔屬性。我懷疑我甚至接近真正理解在樣式表中編程的可能行了,但是我仍堅持嘗試。如果你在工作中有用到它們中的一個,或者兩個都用,我很樂意聽到關(guān)于它的更多內(nèi)容,并看到你的成果。當(dāng)然,技巧、訣竅、更正一直是很歡迎的。


        本文出自:億恩科技【mszdt.com】

        服務(wù)器租用/服務(wù)器托管中國五強(qiáng)!虛擬主機(jī)域名注冊頂級提供商!15年品質(zhì)保障!--億恩科技[ENKJ.COM]

      2. 您可能在找
      3. 億恩北京公司:
      4. 經(jīng)營性ICP/ISP證:京B2-20150015
      5. 億恩鄭州公司:
      6. 經(jīng)營性ICP/ISP/IDC證:豫B1.B2-20060070
      7. 億恩南昌公司:
      8. 經(jīng)營性ICP/ISP證:贛B2-20080012
      9. 服務(wù)器/云主機(jī) 24小時售后服務(wù)電話:0371-60135900
      10. 虛擬主機(jī)/智能建站 24小時售后服務(wù)電話:0371-60135900
      11. 專注服務(wù)器托管17年
        掃掃關(guān)注-微信公眾號
        0371-60135900
        Copyright© 1999-2019 ENKJ All Rights Reserved 億恩科技 版權(quán)所有  地址:鄭州市高新區(qū)翠竹街1號總部企業(yè)基地億恩大廈  法律顧問:河南亞太人律師事務(wù)所郝建鋒、杜慧月律師   京公網(wǎng)安備41019702002023號
          0
         
         
         
         

        0371-60135900
        7*24小時客服服務(wù)熱線