scss和less的区别

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

为什么要使用 CSS 预处理器

原因

  • CSS 仅仅是一个标记语言,不可以自定义变量,不可以引用。
  • 语法不够强大,比如无法嵌套书写,导致模块化开发中需要书写很多重复的选择器。
  • 没有变量和合理的样式复用机制,使得逻辑上相关的属性值必须以字面量的形式重复输出,导致难以维护。

CSS 预处理器的好处

  • 提供 CSS 层缺失的样式层复用机制
  • 减少冗余代码
  • 提高样式代码的可维护性

CSS 预处理器的缺点

  • 开发工作流中多了一个环节,调试也变得更麻烦。
  • 预编译很容易造成后代选择器的滥用

相同之处

  • 都属于 CSS 预处理器
  • 目的是使得 CSS 开发更灵活和更强大
  • 扩展的 CSS 功能特性基本相同

区别之处

  • Sass 是在服务端处理的,以前是 Ruby,现在是 Dart-SassNode-Sass,而 Less 是在客户端处理的,需要引入 less.js 来处理 Less 代码输出 CSS 到浏览器,也可以在开发服务器将 Less 语法编译成 CSS 文件,输出 CSS 文件到生产包目录,有 npm less、Less.app、SimpleLess、CodeKit.app 这样的工具,也有在线编译地址。
  • 变量符不一样,Less 是 @,而 Sass 是 $
  • Sass 的功能比 Less 强大,基本可以说是一种真正的编程语言。Less 只是一套自定义的语法及一个解析器,为 CSS 加入动态语言的特性。
  • Less 相对 Sass 清晰明了,安装便捷,易于上手,对编译环境要求比较宽松,适合小型项目。Sass 更适用于复杂或大型项目。
  • Sass 支持条件语句,可以使用 if...else.../for...while...each循环等,Less 不支持。
  • Less 中的变量运算可以带或不带单位,Sass 需要带单位。

相关推荐

  1. scssless区别

    2024-02-05 14:12:01       26 阅读
  2. SCSS Sass区别

    2024-02-05 14:12:01       8 阅读
  3. Sass(Scss)、Less区别与选择 + 基本使用

    2024-02-05 14:12:01       34 阅读
  4. CSS、lessSassScss、Stylus认识

    2024-02-05 14:12:01       21 阅读
  5. Scssless预处理器使用对比

    2024-02-05 14:12:01       37 阅读
  6. scss css 区别 scss变量css变量区别

    2024-02-05 14:12:01       18 阅读
  7. 探索 CSS、Sass SCSS区别与应用

    2024-02-05 14:12:01       12 阅读
  8. lessscss循环生成marginpadding

    2024-02-05 14:12:01       10 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-02-05 14:12:01       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-02-05 14:12:01       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-02-05 14:12:01       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-02-05 14:12:01       20 阅读

热门阅读

  1. 机器人抓取中的混淆概念

    2024-02-05 14:12:01       30 阅读
  2. Postgresql数据库存储过程中的事务处理

    2024-02-05 14:12:01       25 阅读
  3. 编程思维与生活琐事的内在关联及其应用价值

    2024-02-05 14:12:01       31 阅读
  4. Matlab 移动最小二乘求解仿射变换

    2024-02-05 14:12:01       33 阅读
  5. Rust基础拾遗--看的不多只看一篇--基础

    2024-02-05 14:12:01       32 阅读
  6. 【Golang】自定义logrus日志保存为日志文件

    2024-02-05 14:12:01       29 阅读