【化繁為簡】非前端開發人員的福音---CSS的預先處理語言 Less&Sass

來源:互聯網
上載者:User

標籤:rom   line   lan   頻繁   描述   html   nes   嵌套   java   

寫在前面:       眾所周知CSS 是一門非程式式語言,沒有變數、函數、SCOPE(範圍),在前期的介面樣式設計時,需要書寫大量看似沒有邏輯的代碼,不方便維護及擴充,也不利於重複調用,尤其對於一些UI設計師等非前端開發工程師來講,往往會因為缺少 CSS 編寫經驗而很難寫出組織良好且易於維護的 CSS 代碼。為了方便前端開發的工作量,sass和less應勢而生。.

LESS的介紹

第一個,less是單獨的一種檔案,可以理解為css的升級版,完全按照css寫也沒問題,不過它提供了很多便利的東 西, 可以省好多代碼量。

第二個,html只認css,所以需要配套一些軟體將less解析成css,引用時候,直接引用css 就好。gulp,koala 都是常用的,Koala好像簡單且方便一點。 多種方式能平滑的將寫好的代碼轉化成標準的CSS代碼。

SASS是什嗎?

Sass(Syntactically Awesome Style Sheets)是一個相對新的程式設計語言,Sass為web前端開發而生,可以用它來定 義一套新的文法規則和函數,以加強和提升CSS。通過這種新的程式設計語言,你可以使用最高效的方式,以少量的代 碼建立複雜的設計。它改進並增強了CSS的能力,增加了變數,局部和函數這些特性。而這隻使Sass一部分利器!

LESS和Sass的主要不同就是他們的實現方式,LESS是基於JavaScript,所以,是在用戶端處理的。

另一方面,Sass是基於Ruby的,然後是在伺服器端處理的。

第一部分:Less

 

 // 這種注釋不會被編譯到CSS檔案中/*這種注釋可以編譯到CSS檔案中*/ 【less的基礎文法】1、 聲明變數:@變數名 : 變數值;使用變數:@變數名;>>>變數使用的原則:設定頻繁出現的值/後期需要進行批量修改的值/牽扯到數字運算的值,推薦進行變數聲明。>>>less中的變數類型:在CSS中出現的屬性值,都可以在less中用作變數名①、數值類:不帶單位的 123 帶單位的 1px②、字串類型: 帶引號的 "hahaha" 不帶引號的 red #ff0000③、顏色類: red #ff0000 RGB(255,255,0)④、值清單類型:多個值用逗號或者空格分開 10px solid red2、混合(Mixins):①、無參混合聲明:.class{}使用:在選取器中,使用.class直接調用②、有參 無預設值 混合聲明:.class(@param){}使用::.class(paramValue)③、有參 有預設值 混合聲明:.class(@param:10px){}使用::.class(paramValue) 或者 .class()>>>如果聲明時沒有給參數賦預設值,那麼調用時必須 賦值,否則報錯!>>>無參混合實際上就是一個普通的class選取器。會被編譯到CSS檔案中。而有參混合,在編譯時間,不會被編譯到CSS檔案中;3、Less中的匹配預設:① 聲明:@pipei(條件一,參數){} @pipei(條件二,參數){} @pipei(@_,參數){}② 調用:@pipei(條件的值,參數的值){}③ 匹配規則:根據調用時輸入的條件值,去尋找與之匹配的混合執行;@_選項不管是否匹配,都會執行。4、 @arguments特殊變數在混合中@arguments表示混合傳入的所有參數。參數中的多個參數之間用空格分隔。.border(@width,@style,@color){border: @arguments; >>border: @width,@style,@color}5、less中的加減乘除運算less中的所有變數和數值,都可以進行+ - * / 運算。需要注意的是,當顏色進行運算時,紅綠藍分為三組進行運算,組內單獨運算,組間互不干涉。6、less中的嵌套:less中允許CSS選取器按照HTML代碼的結構進行嵌套section{>P{}ul{&:hover}}①、 less中的選取器,預設是後代選取器。如果需要子代選擇,則需要在前面加>②、 &符號表示所在的上一層選取器。比如上述中的&,表示 section ul:hover 

第二部分:Sass

 Sass:可以用來開發網頁樣式,但是沒法用它編程。也就是說,CSS基本上是設計師的工具,不是程式員的工具。在程式員眼裡,CSS是一件很麻煩的東西。它沒有變數,也沒有條件陳述式,只是一行行單純的描述,寫起來相當費事。

很自然地,有人就開始為CSS加入編程元素,這被叫做"CSS前置處理器"(css preprocessor)。它的基本思想是,用一種專門的程式設計語言,進行網頁樣式設計,然後再編譯成正常的CSS檔案。一、什麼是SASSSASS是一種CSS的開發工具,提供了許多便利的寫法,大大節省了設計者的時間,使得CSS的開發,變得簡單和可維護。二、 使用SASS檔案就是普通的文字檔,裡面可以直接使用CSS文法。檔案尾碼名是.scss,意思為Sassy CSS。下面的命令,可以在螢幕上顯示.scss檔案轉化的css代碼。(假設檔案名稱為test。)如果要將顯示結果儲存成檔案,後面再跟一個.css檔案名稱。SASS提供四個變異風格的選項: * nested:嵌套縮排的css代碼,它是預設值。 * expanded:沒有縮排的、擴充的css代碼。 * compact:簡潔格式的css代碼。 * compressed:壓縮後的css代碼。生產環境當中,一般使用最後一個選項。  sass --style compressed test.sass test.css上面的操作完全可以藉助考拉軟體來實現。在Sass中://注釋一:編譯時間不會被編譯到CSS檔案中; /*注釋而二:在非compressed壓縮模式下會被編譯到CSS檔案中。 */ /*!注釋三:在/*後面加一個驚嘆號,表示這是"重要注釋"。即使是壓縮模式編譯,也會保留這行注釋,通常可以用於聲明著作權資訊。 */三、基本用法3.1 變數SASS允許使用變數,所有變數以$開頭。如果變數需要鑲嵌在字串之中,就必須需要寫在#{}之中。3.2 計算功能SASS允許在代碼中使用算式:3.3 嵌套SCSS中的嵌套:選取器嵌套 屬性嵌套 偽類嵌套 ① 選取器嵌套:ul{li{}}嵌套預設是後代選取器。如果需要子代選擇,則需要在選取器前面加>;可以在選取器的{}中,使用&表示上一層的選取器 ② 偽類嵌套:li{&:hover{}}在選取器的{}中,使用&配合偽類事件 ③ 屬性嵌套:font:{size:18px;}對於屬性名稱有-分隔為多段的屬性,可以使用屬性嵌套;屬性 名的前半部分必須緊跟:然後用{包裹後半部分}eg:SASS允許選取器嵌套。比如,下面的CSS代碼:可以寫成:屬性也可以嵌套,比如border-color屬性,可以寫成:注意,border後面必須加上冒號。在嵌套的代碼塊內,可以使用&引用父元素。比如a:hover偽類,可以寫成:四、代碼的重用:混合宏、繼承、預留位置:① 混合宏:使用@mixin聲明混合宏,在其他選取器中使用@include調用混合宏eg:@mixin hunhe{} .class{@include hunhe};eg:@mixin hunhe($param){} .class{@include hunhe(value)};eg:@mixin hunhe($param:value){} .class{@include hunhe()}; >>>聲明時可以有參數也可以沒有參數。>>> 調用時可以有賦值也可以沒有賦值。>>> 但是調用時必須符合聲明的要求,與LESS混合相同。優點:可以傳參,不會產生同名的class缺點:調用時會把混合宏中的所有代碼copy到選取器中,產生大量的重複代碼。② 繼承 :聲明一個普通的class,在其他的選取器中使用extend 繼承這個class;eg: .class1{} .class2{@extend.class1}優點:將相同的代碼提取到並集選取器,減少冗餘代碼。缺點:①不能傳參,②會產生一個多餘的class③ 預留位置 :使用%聲明%預留位置,在其他選取器中使用@extend 繼承預留位置;%class{ } .class2{@extend %class1}優點:①將相同的代碼提取到並集選取器,減少冗餘代碼。②不會產生一個多餘的class缺點: 不能傳參eg:4.1 繼承SASS允許一個選取器,繼承另一個選取器。比如,現有class1:  .class1 {    border: 1px solid #ddd;  }class2要繼承class1,就要使用@extend命令:  .class2 {    @extend .class1;    font-size:120%;  }4.2 MixinMixin有點像C語言的宏(macro),是可以重用的代碼塊。使用@mixin命令,定義一個代碼塊。  @mixin left {    float: left;    margin-left: 10px;  }使用@include命令,調用這個mixin。  div {    @include left;  }mixin的強大之處,在於可以指定參數和預設值。  @mixin left($value: 10px) {    float: left;    margin-right: $value;  }使用的時候,根據需要加入參數:  div {    @include left(20px);  }4.3 顏色函數SASS提供了一些內建的顏色函數,以便產生系列顏色。  lighten(#cc3, 10%) // #d6d65c  darken(#cc3, 10%) // #a3a329  grayscale(#cc3) // #808080  complement(#cc3) // #33c4.4 插入檔案@import命令,用來插入外部檔案。  @import "path/filename.scss";如果插入的是.css檔案,則等同於css的import命令。  @import "foo.css"; 五、進階用法5.1 條件陳述式 if條件結構:條件結構需要寫在選取器裡面,條件結構的大括弧直接包裹樣式屬性。@if 條件{}@else{}5.2 迴圈語句SASS支援for迴圈:@for $i from 1 to $color0{} //不包括10@for $i from 1 through $color0{} //包括10 while迴圈:$i:0;@while $i<10{$i:$i+1;}each迴圈遍曆:@each $item in a,b,c,d{//$item 表示a,b,c,d的每一項} 5.3 自訂函數SASS允許使用者編寫自己的函數。 [本文參考阮一峰有關Sass的相關講解] 




【化繁為簡】非前端開發人員的福音---CSS的預先處理語言 Less&Sass

相關文章

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.