Css預編譯(Sass&&Less)

• 2021 年 9 月 29 日
• 筆記
• 前端

Less與Sass是css的預處理技術

而CoffeeScript、TypeScript則是javascript的預處理技術。

一、Less

Less是一種動態樣式語言，是一門css預處理語言，擴展了css語言，增加了變量，運算，嵌套等一系列功能

1.1 變量

語法:@變量名:變量值;

存在作用域:局部作用域>全局作用域

以@開頭，後面輸入變量名.

實例:

@color:red;
@size:18px;
.div{
    background-color:@color;
    font-size:@size;
    ...
}

//翻譯後
.div{
    background-color:red;
    font-size:@size;
    ...
}

1.2 混入

定義一個函數，寫入參數值，可調用

內置變量@arguments代表所有參數(運行時)的值

相當於一個模板，將模板引入，再寫入參數即可使用

如:

.circle(@width:100px,@color:red,@height:100px){
    width:@width;
    color:red;
    height:100px;
    font-size:18px;
}
.c1{
    .circle(); //不帶參數引入
    .circle(200px,blue)//帶兩個參數
    .circle
    ...
}

//翻譯後

.c1{
    width:100px;
    //帶參數為: width:200px;
    color:red;  
    //帶參數為: color:blue;
    height:100px;
    font-size:18px;
}

1.3 嵌套

允許將多個選擇器嵌套在一起,
&表示當前選擇器的父選擇器

例：

.cor{
   color:red;
    .ten{font-size:12px;}
    &#sub{width:100px;}
}

//翻譯後
 .cor{
    color:red;
}
.cor .ten{
    font-size:12px;
}
.cor#sub{
    width:100px;
}

1.4 運算

less擁有強大的運算能力，針對數字，顏色，變量的操作，支持加、減、乘、除或更複雜的綜合運算！

例:

@file:5%;
@base-color:lightblue;
.cor{
    width:@file * 10; //50%
    background-color: @base-color + #111;
}

1.5 繼承

讓一個樣式繼承另一個樣式

例:

.cor{
    width:100px;
    color:red;
}
.cor2{
    &:extend(.cor);
    font-size:15px;
}
.cor3{
    &:extend(.cor);
}

//翻譯後
.cor,
.cor2,
.cor3{
   width:100px;
   color:red;
}
.cor2{
    font-size:15px;
}

1.6 作用域

局部作用域>全局作用域

同一級變量，後者會覆蓋前者
例:

@name:30px;
.cor{
    @name:20px;
    
    font-size:@name;  //20px
    
}
@name:18px
.cor2{
    font-size:@name;  //18px
}

1.7 循環

在Less中，可以調用本身

例:

.cor(@name) when (@name > 0){
    .cor((@name - 1))
    width:(@name * 10px);
}

.ten{
    .cor(3);
}

//翻譯後

.ten{
    width:10px;
    width:20px;
    width:30px;
}

二、Sass

2.1 變量

使用符號:$標識符

<!--定義變量-->
$width:1000px;
$height:500px;

.box{
    width:$width;
    height:$height;
}

2.2 嵌套

略，與less相同

2.3 導入

@import

reset.scss 文件

$width:900px;
$color:blue;
*{
    background-color:$color;
    width:$width;
}

scss代碼

@import "reset"

.box{
    width:200px;
}


<!--翻譯後-->

*{
    background-color:$color;
    width:$width;
}

.box{
    width:200px;
}

2.4 mixin 混入

sass中用mixin定義一些代碼段，可傳參數，
定義時用@mixin
調用時用@include

例:

@mixin cir($size:100px,$color:red,$px:14px){
    width:$size;
    background-color:$color;
    font-size:$px;
}

.cls{
    @include cir();<!--調用-->
    
    @include cir(150px);
    
    @include cir(150px,blue,20px);
}

翻譯後

.cls{
    width:100px;
    background-color:red;
    font-size:14px;
------------------------
    width:150px;
    background-color:red;
    font-size:14px;
------------------------
    width:150px;
    background-color:blue;
    font-size:20px;
}

2.5 繼承/擴展

通過@extend來實現代碼組合

例:

.state{
    background-color:red;
}

.state2{
    @extend .state
    background-color:blue;
    font-size:12px;
}

翻譯後

.state,.state2{
    background-color:red;
}

.state2{
    background-color:blue;
    font-size:12px;
}

2.6 sass運算

sass可以進行複雜的運算

2.7 函數

sass集成了大量的顏色函數,讓變換顏色更加簡單

例:

$pcolor:#999ccc;

.cls:hover{
    darken:黑暗
    background-color:darken($pcolor,15%);
    <!--變暗15%-->
    
    lighten:照亮
    background-color:lighten($pcolor,15%);
    <!--變亮15%-->
}

2.8 流程控制

sass中擁有流程控制語句，如:if,for,while,each等

例:

/*如果i是3的倍數，則下劃線*/
 @if $i%3==0 {
            text-decoration: underline;
        }