对Less、Sass、Css的理解

2021-11-15 19:02:29 阅读：191 来源： 互联网

序言：最近在自己玩玩引一些好看的字体样式的时候，偶然看见有 .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.csdn.net/qq_45670012/article/details/102516142

标签：Sass,Less,color,text,Css,size
来源： https://www.cnblogs.com/yanyuyinmo/p/15557741.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

对Less、Sass、Css的理解

1、Css

2、Sass

3、Less

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

5、总结：