本文介绍: Sass(Scss)、Less 都是,他们定义了一种新的语言,其基本思想是,用一种专门的编程语言为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行 CSS 的编码工作。
Sass(Scss)、Less 都是 CSS 预处理器,他们定义了一种新的语言,其基本思想是,用一种专门的编程语言为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行 CSS 的编码工作。
为什么要使用 CSS 预处理器
原因
- CSS 仅仅是一个标记语言,不可以自定义变量,不可以引用。
- 语法不够强大,比如无法嵌套书写,导致模块化开发中需要书写很多重复的选择器。
- 没有变量和合理的样式复用机制,使得逻辑上相关的属性值必须以字面量的形式重复输出,导致难以维护。
CSS 预处理器的好处
- 提供 CSS 层缺失的样式层复用机制
- 减少冗余代码
- 提高样式代码的可维护性
CSS 预处理器的缺点
- 开发工作流中多了一个环节,调试也变得更麻烦。
- 预编译很容易造成后代选择器的滥用
相同之处
- 都属于 CSS 预处理器
- 目的是使得 CSS 开发更灵活和更强大
- 扩展的 CSS 功能特性基本相同
区别之处
- Sass 是在服务端处理的,以前是 Ruby,现在是 Dart-Sass 或 Node-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 需要带单位。
原文地址:https://blog.csdn.net/content6/article/details/136039225
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_67173.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。