序言：最近在自己玩玩引一些好看的字体样式的时候，偶然看见有 .less的样式文件，虽然一直在用，但不知道这样命名的作用，跑来记录一下，有时候说的多了，就显得啰嗦、偏离主题，各位莫怪！！！
1、Css
概念：前端恰饭的三件套之一（Html + Js + Css），层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言，它是用来优化网页的结构和内容的（就是控制页面的文字、颜色、背景图片等等影响外观的东西，通俗点就是，人靠衣装，马靠鞍，Css就是制造衣服的缝纫机，制造马鞍的制革台）。
使用：Html元素的Css样式是写在 <style></style>里面
<div class="fontStyle">这是蓝色的</div>.fontStyle {
width: 200px;
height: 100px;
border: 1px solid #ccc;
color: blue;
text-align: center;
}效果：
2、Sass
概念：Sass是一种对css的一种扩展提升，和Less一样都扩展了Css，而且Less（2009）也受Sass（2007）的影响很大，增加了规则、变量、混入、选择器、继承等等特性。可以理解为用js的方式去书写，然后编译成Css。SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。.sass文件对代码的排版有着非常严格的要求，而且没有大括号，没有分号。（详见阮大大的博客，我会在下面列出）
使用：
<div class="useSass">Sass冒号后面必须有空格</div>
<style lang="sass">
.testLess
.useSass
color: red //冒号后面必须有空格
font-weight: 600
font-size: 22px
background: #FFFFFF
</style>效果：
3、Less
概念：Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端（无论如何，Less最终都是编译成Css来对页面样式进行渲染）。
简单使用：
/* common.less */
//宽高
@my-width: 2000px;
// 文本区背景
@text_backgound_color: #f7f7f7;
// 字体颜色
@text_color_333: #333;
@text_color_666: #666;
@text_color_999: #999;
@commonColor: #cdac79;
// 字体大小
@text_size_14: 14px;
@text_size_18: 18px;
//集成个类再去调用
.header-center {
width: @my-width/2; //宽运算
height: @my-width / 4; //高运算
font-size: @text_size_14;
text-align: center;
color: @commonColor;
// background-color: @text_backgound_color;
background: saturate(hsl(224, 12%, 82%), 20%);
}
/* 使用： */
<div class="header-center">哈哈哈</div>
@import "../../assets/less/common.less";
.header-center {
font-size: @text_size_18;//单独使用变量的属性
}效果：
如上我们可以看到：
Less比较于Css的区别（优点）：1、Less允许单独定义一系列通用的变量，然后在需要的时候去进行调用， 方便更改，提高了代码的复用。
2、Less可以使用一个选择器嵌套另外一个选择器，减少代码量。
3、Less中提供了加，减，乘，除运算，以及属性值和颜色的运算，以便实现属性值之间的关系。
4、完整代码（Vue2.6 + vue/cli4.5.4）
Vue模板：
点击查看代码
<!-- 测试 Less、Sass -->
<template>
<div class="testLess">
<div class="fontStyle">这是蓝色的</div>
<div class="header-center">哈哈哈</div>
<div class="useSass">Sass冒号后面必须有空格</div>
</div>
</template>
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
name: "testLess",
props: {},
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {},
//生命周期 - 创建完成（可以访问当前this实例）
created() {},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style>
.fontStyle {
width: 200px;
height: 100px;
border: 1px solid #ccc;
color: blue;
text-align: center;
}
</style>
<style lang="less">
//@import url(); 引入公共css类
@import "../../assets/less/common.less";
.testLess {
height: 100%;
width: 100%;
.header-center {
font-size: @text_size_18;
}
}
</style>
<style lang="sass">
.testLess
.useSass
color: red //冒号后面必须有空格
font-weight: 600
font-size: 22px
background: #FFFFFF
</style>
Common.less
点击查看代码
//宽高
@my-width: 2000px;
// 文本区背景
@text_backgound_color: #f7f7f7;
// 字体颜色
@text_color_333: #333;
@text_color_666: #666;
@text_color_999: #999;
@commonColor: #cdac79;
// 字体大小
@text_size_14: 14px;
@text_size_18: 18px;
//测试一下
.header-center {
width: @my-width/2; //宽运算
height: @my-width / 4; //高运算
font-size: @text_size_14;
text-align: center;
color: @commonColor;
// background-color: @text_backgound_color;
background: saturate(hsl(224, 12%, 82%), 20%);
}5、总结：
1、Sass和Less都是Css的预处理语言，拓展了Css，传统的Css可以直接被Html引用，但是Sass和Less由于使用了类似JavaScript的方式去书写，所以必须要经过编译生成Css。
2、Sass增加了规则、变量、混入、选择器、继承等等特性，Sass文件对代码的排版有着非常严格的要求，而且没有大括号，没有分号。
3、Less相对于Css增加了变量、嵌套、运算等特性。
参考博客：
阮大大的SASS用法指南：https://www.ruanyifeng.com/blog/2012/06/sass.html
IT界新人的十分钟看懂Css、less和Sass（SCSS）的区别：https://www.cnblogs.com/a1231230/p/12107592.html
关于css样式文件和less的文件的比较说明：https://blog.****.net/qq_45670012/article/details/102516142