在VUE項目中使用SCSS ，對SCSS的理解和使用

首先要了解什麼是CSS 預處理器？ SCSS是一種CSS預處理語言

  定義了一種新的專門的編程語言，編譯後造成正常的css文件，爲css增長一些編程特性，無需考慮瀏覽器的兼容性（徹底兼容css3），讓css更加簡潔、適應性更強，可讀性更佳，更易於代碼的維護等諸多好處。CSS預處理語言有SCSS (SASS) 和LESS、POSTCSS

那麼SCSS和SASS 有什麼區別呢

· 文件擴展名不一樣，文件後綴分別是「.scss」和「.sass」

· sass是以嚴格縮進語法規則來編寫代碼的，不包括大括號和分號，而scss的語法和css書寫語法相似；sass的安裝和使用不細說了；

· scss是sass3.0引入的語法，能夠理解scss是sass的一個升級版本，是一種SCSS-like語言，彌補了sass和css之間的鴻溝；

這篇文章是記錄的在VUE項目中SCSS的使用

vue項目上安裝SCSS和開發入門

① 使用vue-cli模板建立新項目：vue init webpack myvue

② 安裝sass 依賴包 ，在cmd界面輸入：

npm  install sass-loader --save-dev
npm install node-sass --sava-dev

③ 在build文件夾下的webpack.base.conf.js的rules裏面添加配置

{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}

④ 使用scss時候在所在的style樣式標籤上添加lang=」scss」便可應用對應的語法，不然報錯

⑤ scss使用測試：以下測試修改字體顏色

<style lang="scss">
$color:red;
div {color:$color;}
</style>

那麼進一步瞭解SCSS 的使用語法 ??

 

SCSS語法：

·註釋

註釋分爲三種：/* */css中顯示，//css中不顯示，/*重要註釋!*/壓縮不會被刪掉。

 

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

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

·變量

 

聲明變量的語法是：$+變量名+：+變量值；以下

$color:red; //聲明變量 $color

區分默認變量

 

默認變量只須要在變量值後加上 !default , 用來設置默認值 ，對默認變量進行從新聲明能夠實現覆蓋默認值；如

$color:red !default; //聲明默認變量 $color
$color:purple; //根據需求覆蓋默認變量
.father01 {
   color:$color;
}

區分全局變量和局部變量

全局變量是元素外聲明的變量，局部變量是在元素裏聲明的變量，重複聲明時局部變量會覆蓋全局變量；

$height:200px; //全局變量聲明不在大花括號內
$bgcolor:blue;
body {
   .father01 {  //嵌套
      width:$width;
      height:$height;
      $border:1px solid red; //局部變量是聲明在元素內的
      border: $border;
      $bgcolor:purple; //全局變量和局部變量名一致時，調用局部變量進行覆蓋
      background-color: $bgcolor;
   }
}

局部變量值後加上 !global 關鍵詞可使得局部變量變成全局變量；

body {
   .father01 {
      width:200px;
      height:200px;
      $border:1px solid red !global; //使用global關鍵詞將$border變爲了全局變量
      border:$border;
   }
   .father02 {
      width: 300px;
      height:300px;
      border:$border; //使用全局變量
   }
}//blog.csdn.net/zhouzuoluo/article/details/81010331

·變量嵌套引用：即字符串插值，須要使用 #{} 來進行包裹

$left:left;
.father02 {
   width: 300px;
   height:300px;
   border:$border; //使用全局變量
border-#{$left}:2px solid purple; //使用字符串插值以前必須先聲明
}

·變量計算

$left:left;
.father02 {
   width: 300px;
   height:300px;
   border:$border; //使用全局變量
border-#{$left}:2px solid purple; //使用字符串插值以前必須先聲明
}

·嵌套

  選擇器嵌套很少說了

屬性嵌套（有相同屬性前綴）以下

border:{
   color:red;
   width:5px;
   style:solid;
}

在嵌套時候可使用 & 來引用父元素

.container {
   &>p {   //能夠編譯成CSS的 .container>p {} 效果
      color:purple;
   }
}

·繼承

 繼承 .class 使用 @extend

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

·SCSS佔位符 %

 

使用% 聲明的代碼塊，若是不被@extend調用的話就不會被編譯。編譯出來的代碼會將相同的代碼合併在一塊兒，代碼變得十分簡潔。

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

·重複代碼塊，使用混合@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);
}

SCSS使用編程式方法 

·條件語句 

.container {
   p {
      @if 1+1<3 {
         border:1px solid blue;
      } @else {
         border:1ps dashed palevioletred;
      }
   }
}

·SCSS中的三種循環

for循環

在sass中的@for循環有兩種方式：

①@for $i from <start> through <end>

②@for $i from <start> to <end>

其中$i表示變量，start表示開始值，end表示結束值；

through表示包括end這個數值；to表示不包括end這個數值；

 

while循環

只要@while後面的條件爲true就會執行，直到表達式值爲false時中止循環；

 

each  in循環

就是去遍歷一個列表，而後從列表中取出對用值；他的指令形式爲：@each $var in <list>($var爲變量值，list爲sassscript表達式）

//for 循環
@for $i from 1 to 5 {
   .item-#{$i} {
      border:#{$i}px solid;
   }
}
//while 循環
$m:8;
@while $m > 0 {
   .items-#{$m} {
      width:2em*$m;
   }
   $m:$m - 2 ;
}
//這裏能夠對$m進行運算 讓它每次都減去2
//each 語法
@each $item in class01,class02 { //$item就是遍歷了in關鍵詞後面的類名列
   .#{$item} {
      background-color:purple;
   }
}

·使用@function 自定義函數及使用

@function double($sn){ //SCSS容許自定義函數
   @return $sn*2;
}
.myText {
   border:1px solid red;
   width:double(200px); //使用在SCSS中自定義的函數
}

·能夠直接使用SCSS內置的顏色函數，

.myText {
   color:black;
   &:hover{
      //如下的lighten()、darken()等是SCSS內置的顏色函數
      color:lighten(#cc3, 10%); // #d6d65c顏色變淺
      color:darken(#cc3, 10%); // #a3a329顏色加深
      color:grayscale(#cc3); // #d6d65c
      color:complement(#cc3); // #a3a329
   }
}