SCSS的特點

  • 2019 年 10 月 31 日
  • 筆記

SCSS是一種CSS預處理語言

  定義了一種新的專門的程式語言，編譯後形成正常的css文件，為css增加一些編程特性，無需考慮瀏覽器的兼容性（完全兼容css3），讓css更加簡潔、適應性更強，可讀性更佳，更易於程式碼的維護等諸多好處。

CSS預處理語言有SCSS (SASS) 和LESS、POSTCSS

scss是sass3.0引入的語法，可以理解scss是sass的一個升級版本，

是一種SCSS-like語言，彌補了sass和css之間的鴻溝；

使用scss時候在所在的style樣式標籤上添加lang=」scss」即可應用對應的語法，否則報錯

有哪些特點：

1、@import命令導入外部sass、scss、css文件

<style lang="scss">  @import './test.scss'; //導入外部scss文件  .myText {     border:1px solid red;  }  </style>

2、繼承

繼承 .class 使用 @extend

.container {     color:purple;     border:2px dashed purple;  }  .myText {     @extend .container; //這裡將繼承.container類的所有樣式     font-size: 22px;  }

3、SCSS佔位符 %

使用% 聲明的程式碼塊，如果不被@extend調用的話就不會被編譯。

編譯出來的程式碼會將相同的程式碼合併在一起，程式碼變得十分簡潔。

%m5 { background-color: lightblue;}  .P1 { @extend %m5; }

4、重複程式碼塊，使用混合@mixin命令定義，以及使用@include調用該mixin

@mixin normalStyle {     //使用@mixin命令定義可重複使用的程式碼塊     width:300px;     height:100px;     color:black;     background-color:lightblue;  }  .container {     @include normalStyle;     //使用@include 命令引用@mixin定義的程式碼塊  }

在使用@mixin和@include時，傳入參數和默認值

@mixin normalStyle($width,$height,$color,$defaultValue:orange) {     width:$width;     height:$height;     color:$color;     background-color:$defaultValue;  }  .container {     @include normalStyle(300px,100px,green,lightgray);  }

參考：https://segmentfault.com/a/1190000004688781

Tags:

VirMach 便宜 VPS