对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>