Less和Sass的区别

前端知识 专栏收录该内容
15 篇文章 0 订阅

Less和Sass的区别

Less和Sass都属于CSS预处理器,那什么是 CSS 预处理器呢?
CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行CSS的编码工作。

一、Less和Sass分别是什么:

  1. Less(Leaner Style Sheets) :
    是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。
    链接: Less官网.

  2. Sass(Syntactically Awesome StyleSheets):
    Sass 是一款强化 CSS 的辅助工具,它在 CSS语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更高效地开发项目。
    链接: Sass中文网.

二、Less和Sass相同:

  1. 混入(Mixins)——class中的class;
  2. 参数混入——可以传递参数的class,就像函数一样;
  3. 嵌套规则——Class中嵌套class,从而减少重复的代码;
  4. 运算——CSS中用上数学;
  5. 颜色功能——可以编辑颜色;
  6. 名字空间(namespace)——分组样式,从而可以被调用;
  7. 作用域——局部修改样式;
  8. JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

三、Less和Sass的不同:

  1. Less是基于JavaScript,是在客户端处理的。
    Sass是基于Ruby的,是在服务器端处理的。

  2. 关于变量在Less和Sass中的唯一区别就是:
    Less用@,
    Sass用$。

  3. 输出设置:
    Less没有输出设置
    Sass提供4中输出选项:nested, compact, compressed 和 expanded

  4. 条件语句:
    Less不支持条件语句。
    Sass支持条件语句,可以使用 if{} ,else{}, for{} 循环等等。

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值