對Css、Less、Sass區別及特性的理解

  序言：最近在自己玩玩引一些好看的字體樣式的時候，偶然看見有 .less的樣式文件，又偶然想起還有.scss格式的樣式文件，這些雖然有印象，還是想寫篇博文加深一下理解，就跑來記錄一下，作為小白理解的可能會淺顯，文章末尾附有借鑒文檔。

  Ps：有關Vue項目引入Sass、Less，會在下篇博文講述：https://www.cnblogs.com/yanyuyinmo/p/15573559.html

1、Css

      概念：前端恰飯的三件套之一（Html + Js + Css），層疊樣式表，是一種用來表現HTML或XML等文件樣式的計算機語言，它是用來優化網頁的結構和內容的（就是控制頁面的文字、顏色、背景圖片等等影響外觀的東西，通俗點就是，人靠衣裝，馬靠鞍，Css就是制造衣服的縫紉機，制造馬鞍的制革台）。

      使用：Html元素的Css樣式是寫在 <style></style>里面

<div class="fontStyle">這是藍色的</div>

<style>
/* Css樣式*/
.testCss {
  flex: 1;
  padding: 8px;
}
.fontStyle {
  height: 100px;
  border: 1px solid #ccc;
  color: blue;
  text-align: center;
}
</style>

效果：

---

2、Sass

      概念：Sass是一種對css的一種擴展提升，和Less一樣都擴展了Css，而且Less（2009）的產生也受Sass（2007）的影響很大，Sass增加了變量、計算、嵌套、繼承、函數、注釋等等特性。它可以理解為使用 JavaScript 的方式書寫，最后編譯成Css來控制網頁樣式。Sass是 Ruby 語言寫的，但是兩者的語法沒有關系，不懂 Ruby 也能使用。Sass文件就是普通的文本文件，里面可以直接使用CSS語法，文件后綴名是.scss（詳見阮大大的博客，我會在下面列出）。

      說到 注釋 特性：

                   1、標准的CSS注釋 /* comment */ ，會保留到編譯后的文件。

                   2、單行注釋 // comment，只保留在SASS源文件中，編譯后被省略。

                   3、在/*后面加一個感嘆號，表示這是"重要注釋"。即使是壓縮模式編譯，也會保留這行注釋，通常可以用於聲明版權信息。

/*!
  這里是重要注釋
*/

 

      有意思的是：在日常開發中，我們也有見到 .scss 文件，又是什么呢？它是Sass么，我來補充一下：

             Sass 和 Scss有什么區別？

                     · 文件擴展名不同，文件后綴分別是“.scss”和“.sass”

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

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

點擊查看代碼

/* ----------------- 使用Sass時，直接在Test.Vue里面寫 -------------------- */
/* Test.vue */
<div class="useSass">Sass冒號后面必須有空格</div>

<style lang="sass">
@import url("../../less/test.css")
.testLess
  .useSass
    color: red   //冒號后面必須有空格
    font-weight: 600
    font-size: 22px
    background: #FFFFFF
</style>



/*------------------ 引入局部scss文件時 ----------------------*/
/* Test.vue */
<div class="testSass">
  <div class="useSass">測試 Sass</div>
  <p>哈哈哈</p>
</div>

<style lang="scss">
@import url("../../assets/sass/test.scss");
.Test {
  p {
    color: blueviolet;
  }
}
</style>



/* test.scss */
//顏色
$blue : #7d7e80;//變量
$width: 200;
.font_style {
  font-weight: 600;
  font-size: 22px;
}
//混合
@mixin font_color {
 color: lighten(rgb(238, 103, 13), 10%) // 顏色函數
}

.testSass {
  color: $blue;
  flex: 1;
  padding: 8px;
  // 嵌套
  .useSass {
    @extend .font_style; //繼承 .font-style類
    min-width: $width * 0.5; //計算特性
    background: #FFFFFF;
    @include font_color; //使用混合
    border: 1px black dashed;
  }
}

    效果：

---

3、Less

      概念：Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增加了變量、計算、嵌套、混合、函數等特性，使 CSS 更易維護和擴展。Less 可以運行在 Node 或瀏覽器端（無論如何，Less最終都是編譯成Css來對頁面樣式進行渲染）。

      簡單使用：

點擊查看代碼

/* 在使用Less時，我是 樣式寫在vue模板里 和  引入less文件 結合使用了!!!*/

<!-- Test.vue -->
<div class="testLess">
  <div class="header-center">測試 Less</div>
   <a>我使用了混合特性</a>
</div>

/* common.less */
// 寬高 
@width: 400px;
@height: 500px;

// 文本區背景
@text_backgound_color: #f7f7f7;

// 邊框
@border: 1px solid #56db3a;
@border_green: 1px solid green;

// 字體顏色
@text_color_333: #333;
@text_color_666: #666;
@text_color_999: #999;
@commonColor: #3b3834;

// 字體大小
@text_size_14: 14px;
@text_size_18: 18px;

/* 綠色邊框 */
.borderGreen {
  border: @border_green;
}

/* 頭部樣式 */
.header-center {
  min-width: @width / 2; //寬運算
  min-height: @height / 4; //高運算
  font-size: @text_size_14;
  text-align: center;
  color: @commonColor + #333; //顏色運算（rgb()形式也可行），例如：#112233 + #111 ---> @223344
  background: saturate(hsl(224, 12%, 82%), 20%); // saturate函數
  /*
     @width:0.5;
     width: percentage(@width); // percentage 函數將 0.5 轉換為 50%
  */
  .borderGreen(); //Less的混合特性
}

 效果：

如上我們可以看到：

Less比較於Css的區別（優點）：1、Less允許單獨定義一系列通用的變量，然后在需要的時候去進行調用， 方便更改，提高了代碼的復用。

                                                     2、Less可以使用一個選擇器嵌套另外一個選擇器，減少代碼量。

                                                     3、Less中提供了加，減，乘，除運算，以及屬性值和顏色的運算，以便實現屬性值之間的關系。

---

4、完整代碼（Vue2.6 + vue/cli4.5.4）

    Vue模板：

     注： test.scss 文件和 test.less 上面已經全部列出，這里就不貼代碼了。

點擊查看代碼

/* Test.vue */
<template>
  <div class="Test">
    <!-- 測試 Css -->
    <div class="testCss">
      <div class="fontStyle">測試 Css</div>
    </div>
    <!-- 測試 Less -->
    <div class="testLess">
      <div class="header-center">測試 Less</div>
      <a>我使用了混合特性</a>
    </div>

    <!-- 測試 Sass -->
    <div class="testSass">
      <div class="useSass">測試 Sass</div>
      <p>哈哈哈</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "Test",
  data() {
    //這里存放數據
    return {};
  }
};
</script>
<style>
/* Css樣式*/
.testCss {
  flex: 1;
  padding: 8px;
}
.fontStyle {
  height: 100px;
  border: 1px solid #ccc;
  color: blue;
  text-align: center;
}
</style>
<style lang="less">
//@import url(); 引入公共css類
@import "../../assets/less/test.less";
.Test {
  height: 100%;
  width: 100%;
  display: flex;
  padding: 8%;
  .testLess {
    flex: 1;
    padding: 8px;
    a {
      margin-top: 5px;
      .borderGreen();
    }
  }
  //可以修改它的屬性
  .header-center {
    font-size: @text_size_18;
  }
}
</style>

<style lang="scss">
@import url("../../assets/sass/test.scss");
.Test {
  p {
    color: blueviolet;
  }
}
</style>

---

 5、總結：

         1、Sass和Less都是Css的預處理語言，拓展了Css，傳統的Css可以直接被Html引用，但是 Sass 和 Less 由於使用了類似JavaScript的方式去書寫，所以必須要經過編譯生成Css。

         2、Sass增加了變量、計算、嵌套、繼承、函數、注釋等等特性，Sass文件對代碼的排版有着非常嚴格的要求，而且沒有大括號，沒有分號。

         3、Less相對於Css增加了變量、混合、嵌套、運算、嵌套等特性。詳見官方文檔：https://less.bootcss.com/

 

   附一下gitHub地址吧：https://github.com/fei2020last/TestPro

   參考博客：   

          阮大大的SASS用法指南：https://www.ruanyifeng.com/blog/2012/06/sass.html（重要！！！）

          Less官方中文文檔：https://less.bootcss.com/（重要！！！）

          IT界新人的十分鍾看懂Css、less和Sass（SCSS）的區別：https://www.cnblogs.com/a1231230/p/12107592.html     

          關於css樣式文件和less的文件的比較說明：https://blog.csdn.net/qq_45670012/article/details/102516142