LESS SCSS 預編譯語言

  前  言

JRedu

　LESS  是一門 CSS 預處理語言，它擴展了 CSS 語言，增長了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。

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

 Sass 是一款強化 CSS 的輔助工具，它在 CSS 語法的基礎上增長了變量 (variables)、嵌套 (nested rules)、混合 (mixins)、導入 (inline imports) 等高級功能，這些拓展令 CSS 更增強大與優雅。使用 Sass 以及 Sass 的樣式庫（如 Compass）有助於更好地組織管理樣式文件，以及更高效地開發項目。

 

1  LESS預編譯語言

1.1LESS的基礎語法

一、聲明變量：@變量名：變量值；
 使用變量:@變量名
 >>>變量使用的原則:
 屢次頻繁出現的值，後期須要統一修改的值，或者牽扯到數值運算的值，推薦使用變量
 >>>LESS中的變量類型
 在CSS中出現的屬性值，在less中均可以用做變量名
 ① 數值類：不帶單位的 123 帶單位的 1px
 ② 字符串類型：帶引號的"hahah" 不帶引號的 red #ff000
 ③ 顏色類:red #ff000 rgb(255,255,0)
 ④ 值列表類型：多個值用逗號或空格分隔 10px solid red

@color:#ff0000;
@length:100px;
#div1{
    width: @length;
    height: @length*2;
    background-color: @color;
}

 

 二、混合(Mixins)

 ①、無參混合
 聲明 .class{}
 調用：在選擇器中使用.class 直接調用
 

//無參混合
.borderRadius{
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

//調用

.class{
width: 10px;
height: 10px;
.borderRadius();
}

② 有參無默認值混合
 聲明.class(@param)
 調用：.class(paramValue)//有參無默認值混合

//有參無默認值混合
.borderRadius1(@radius){ border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; }
//調用
.class{

width: 10px;
height: 10px;
.borderRadius1(20px);

}

 

 ③ 有參有默認值混合
 聲明：.class(@param:10px)
 調用：.class(paramValue) 或 .class()

//有參有默認值混合
.borderRadius2(@radius:10px){
    border-radius: @radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
}

.class{
width: 10px;
height: 10px;
.borderRadius2();
}

 

 >>>若是聲明時沒有給參數賦默認值，則調用時必須賦值，不然報錯
 >>>無參混合實際上就是一個普通的class選擇器，會被編譯到css文件中,
 而有參混合在編譯時，不會出如今css文件中

 三、less中的匹配模式:相似於switch 結構
 ① 聲明： @pipei(條件一，參數) {} @pipei(條件二，參數) {} @pipei(@_，參數) {}
 ② 調用：@pipei(條件的值，參數的值){}
 ③ 匹配規則：
 根據調用時輸入的條件值，去尋找與之匹配的混合執行，
 @_無論匹配成功與否，都會執行的選項。

.pipei(lefts,@width:10px){
    margin-left: @width;
}
.pipei(rights,@width:10px){
    margin-right: @width;
}
.pipei(tops,@width:10px){
    margin-top: @width;
}
.pipei(bottoms,@width:10px){
    margin-bottom: @width;
}
.pipei(@_,@width:10px){
    padding: 10px;
}
//@_無論匹配成功與否，都會執行的選項。
@position:leftss;
.class1{
    .pipei(@position,20px);
}

 

四、arguments特殊變量
在混合中，@arguments表示混合傳入的全部參數.@arguments中的全部參數之間,用空格分隔。
 .argu(@width,@style,@color){
border: @arguments;--> border: @width @style @color;
}

.argu(@width,@style,@color){
    //border: @width @style @color;
    border: @arguments;
}
.class2{
    .argu(10px,solid,red);
}

 

五、less中加減乘除運算：
less中的全部變量和數值，能夠進行加減乘除運算
須要注意的是，當顏色值運算時，紅綠藍分三組運算，組內單獨計算，組間互不干涉。
六、less中的嵌套
less容許CSS選擇器按照HTML代碼的結構進行嵌套
section{
>p{}
ul{
&:hover
}
}
① less中的嵌套默認是後代選擇器，若是須要子代選擇器，須要在前面加>
② &符號，表示這個&所在的上一層選擇器，好比上述&表示section ul:hover

 

 

1.2 SCSS預編譯語言

 

3.2.1SCSS基礎語法

 

/註釋一：編譯時不會被編譯到CSS文件中
/*
* 註釋二：在非compressed模式下，會被編譯到CSS文件中。
*
*/
/*!
* 註釋三：重要註釋，在各類壓縮模式下，都會被編譯到CSS文件中。
*/
!scss基礎語法
 一、scss中的變量
 ① 聲明變量 $變量名:變量值;
 scss 中容許將變量嵌套在字符串中，可是變量必須使用井{}包裹
 eg:border-井{$left}:10px solid red;

$width:100px;
$position:left;
#div1{
    width: $width;
    height: $width;
    background-color: red;
    border-#{$position}:10px solid green ;
}

 

 二、scss中的運算:會將單位進行運算。使用時需注意最終的單位是否正確。
 eg:10px*10px=100 px*px

 三、scss中的嵌套:選擇器嵌套 屬性嵌套 僞類嵌套
 ① 選擇器嵌套 ul{li{}}
 嵌套默認表示後代選擇器，若是須要子代選擇器，能夠在選擇器前加>
 能夠在選擇器的{}中，使用&表示上一層的選擇器
 ② 僞類嵌套 ：li{&:hover{}}
 在選擇器的{}中，使用&配合僞類事件，能夠表示當前選擇器的僞類
 ③ 屬性嵌套 font:{size:18px;} -->font-size:18px
 對於屬性名有-分隔爲多段的屬性，可使用屬性嵌套，屬性名的前半部分必須緊跟一個:，才能使用{}包裹屬性的後半部分。

section{
    background-color: #CCCCCC;
    p{
        color: red;
    }
    ul{
        padding: 0px;
        li{
            list-style: none; 
            font:{
                size: 16px;
                weight:bold;
                family:"微軟雅黑";
                style:"italic";
            }
            //& =="section ul li"
        }
    }
}

 

對應的CSS文件：

section {
  background-color: #CCCCCC;
}
section p {
  color: red;
}
section ul {
  padding: 0px;
}
section ul li {
  list-style: none;
  font-size: 16px;
  font-weight: bold;
  font-family: "微軟雅黑";
  font-style: "italic";
}

 

 四、 混合宏 繼承 佔位符
 ① 混合宏 使用@mixin聲明混合宏，在其餘選擇器中使用@include調用混合宏
 eg： @mixin hunhe($param:value){} .class{ @include hunhe(value); }
 @mixin hunhe{$param:value} .class{@include hunhe();}

 >>>聲明時，能夠有參數，也能夠沒有參數。參數能夠有默認值，也能夠沒有默認值。
 可是調用時，必須符合聲明時的要求。與less中 的混合相同
 >>>優勢：① 能夠傳參 ② 不會產生同名的class
 >>>缺點:調用時，會把混合宏中的全部代碼copy到選擇器中，產生大量冗餘代碼

//混合宏
@mixin hunhe($color:red){
    color: $color;
}
.class3{
    @include hunhe;
    background-color: yellow;
}
.class4{
    @include hunhe;
    background-color: blue;
}

 

 ② 繼承：聲明一個普通的class，在其餘選擇器中使用@extend 繼承這個class
 .class1{} .class2{@extend .class1;}
 >>>優勢：將相同的代碼，提取到並集選擇器，減小冗餘代碼
 >>>缺點：①不能傳參；②會生出一個多餘的class

 

//繼承
.class1{
    color: red;
}
.class{
    @extend .class1;
    background-color: yellow;
}

 

 

 

 ③佔位符:使用%聲明佔位符，在其餘選擇器中使用@extend繼承佔位符；
 %class{} .class1{@extend %class;}
 >>>優勢：①將相同代碼，提取到並集選擇器，減小冗餘代碼 ② 不會產生同名的class
 >>>缺點：不能傳參

%class1{
    color: red;
}
.class4{
    @extend %class1;
    background-color: yellow;
}

 

 五、if條件結構
 條件結構須要寫在選擇器裏面，條件結構的{}直接包裹樣式屬性。
 @if 條件{
 @else{}
 }

//scss中的條件語句
.class6{
    width: 100px;
    height: 100px;
    @if 1>2 {
        background-color: yellow;
    }
    @else{
        background-color: green;
    }
}

 

 六、for循環
 @for $i from 1 to 10{} 不包含10
 @for $i from 1 through 10{} 包含10

@for $i from 1 to 10{
    .border-#{$i}{
        border: #{$i}px solid red;
    }
}

 

 七、while循環
 $i:0;
 @while $i<10{
 $i:$i+1;
 }

$i:0; @while $i<10{ .while-#{$i}{ border: #{$i}px solid red; } $i:$i + 1; }

 

 八、 each 循環遍歷
@each $item in a,b,c,d{
 //$item 表示 a,b,c,d中的每一項
 }

//each 循環遍歷
@each $item in c1,c2,c3,c4{
    $i:$i+1;
    .#{$item}{
        border: #{$i}px solid red;
    }
}