Less與Sass是css的預處理技術

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

一、Less

Less是一種動態樣式語言，是一門css預處理語言，擴充套件了css語言，增加了變數，運算，巢狀等一系列功能

1.1 變數

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

存在作用域:區域性作用域>全域性作用域

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

例項:

  1. @color:red;
  2. @size:18px;
  3. .div{
  4.     background-color:@color;
  5.     font-size:@size;
  6.     ...
  7. }
  9. //翻譯後
  10. .div{
  11.     background-color:red;
  12.     font-size:@size;
  13.     ...
  14. }

1.2 混入

定義一個函式，寫入引數值，可呼叫

內建變數@arguments代表所有引數(執行時)的值

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

如:

  1. .circle(@width:100px,@color:red,@height:100px){
  2.     width:@width;
  3.     color:red;
  4.     height:100px;
  5.     font-size:18px;
  6. }
  7. .c1{
  8.     .circle(); //不帶引數引入
  9.     .circle(200px,blue)//帶兩個引數
  10.     .circle
  11.     ...
  12. }
  14. //翻譯後
  16. .c1{
  17.     width:100px;
  18.     //帶引數為: width:200px;
  19.     color:red;
  20.     //帶引數為: color:blue;
  21.     height:100px;
  22.     font-size:18px;
  23. }

1.3 巢狀

允許將多個選擇器巢狀在一起,

&表示當前選擇器的父選擇器

例：

  1. .cor{
  2.    color:red;
  3.     .ten{font-size:12px;}
  4.     &#sub{width:100px;}
  5. }
  7. //翻譯後
  8.  .cor{
  9.     color:red;
  10. }
  11. .cor .ten{
  12.     font-size:12px;
  13. }
  14. .cor#sub{
  15.     width:100px;
  16. }

1.4 運算

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

例:

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

1.5 繼承

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

例:

  1. .cor{
  2.     width:100px;
  3.     color:red;
  4. }
  5. .cor2{
  6.     &:extend(.cor);
  7.     font-size:15px;
  8. }
  9. .cor3{
  10.     &:extend(.cor);
  11. }
  13. //翻譯後
  14. .cor,
  15. .cor2,
  16. .cor3{
  17.    width:100px;
  18.    color:red;
  19. }
  20. .cor2{
  21.     font-size:15px;
  22. }

1.6 作用域

區域性作用域>全域性作用域

同一級變數，後者會覆蓋前者

例:

  1. @name:30px;
  2. .cor{
  3.     @name:20px;
  5.     font-size:@name;  //20px
  7. }
  8. @name:18px
  9. .cor2{
  10.     font-size:@name;  //18px
  11. }

1.7 迴圈

在Less中，可以呼叫本身

例:

  1. .cor(@name) when (@name > 0){
  2.     .cor((@name - 1))
  3.     width:(@name * 10px);
  4. }
  6. .ten{
  7.     .cor(3);
  8. }
  10. //翻譯後
  12. .ten{
  13.     width:10px;
  14.     width:20px;
  15.     width:30px;
  16. }

二、Sass

2.1 變數

使用符號:$識別符號

  1. <!--定義變數-->
  2. $width:1000px;
  3. $height:500px;
  5. .box{
  6.     width:$width;
  7.     height:$height;
  8. }

2.2 巢狀

略，與less相同

2.3 匯入

@import

reset.scss 檔案

  1. $width:900px;
  2. $color:blue;
  3. *{
  4.     background-color:$color;
  5.     width:$width;
  6. }

scss程式碼

  1. @import "reset"
  3. .box{
  4.     width:200px;
  5. }
  7. <!--翻譯後-->
  9. *{
  10.     background-color:$color;
  11.     width:$width;
  12. }
  14. .box{
  15.     width:200px;
  16. }

2.4 mixin 混入

sass中用mixin定義一些程式碼段，可傳引數，

定義時用@mixin

呼叫時用@include

例:

  1. @mixin cir($size:100px,$color:red,$px:14px){
  2.     width:$size;
  3.     background-color:$color;
  4.     font-size:$px;
  5. }
  7. .cls{
  8.     @include cir();<!--呼叫-->
  10.     @include cir(150px);
  12.     @include cir(150px,blue,20px);
  13. }
  15. 翻譯後
  17. .cls{
  18.     width:100px;
  19.     background-color:red;
  20.     font-size:14px;
  21. ------------------------
  22.     width:150px;
  23.     background-color:red;
  24.     font-size:14px;
  25. ------------------------
  26.     width:150px;
  27.     background-color:blue;
  28.     font-size:20px;
  29. }

2.5 繼承/擴充套件

通過@extend來實現程式碼組合

例:

  1. .state{
  2.     background-color:red;
  3. }
  5. .state2{
  6.     @extend .state
  7.     background-color:blue;
  8.     font-size:12px;
  9. }
  11. 翻譯後
  13. .state,.state2{
  14.     background-color:red;
  15. }
  17. .state2{
  18.     background-color:blue;
  19.     font-size:12px;
  20. }

2.6 sass運算

sass可以進行復雜的運算

2.7 函式

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

例:

  1. $pcolor:#999ccc;
  3. .cls:hover{
  4.     darken:黑暗
  5.     background-color:darken($pcolor,15%);
  6.     <!--變暗15%-->
  8.     lighten:照亮
  9.     background-color:lighten($pcolor,15%);
  10.     <!--變亮15%-->
  11. }

2.8 流程控制

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

例:

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