SASS 和 SCSS 的区别

原文

Difference Between SASS and SCSS

SASS(Syntactically Awesome Style Sheets)是一种由 Hampton Catlin 设计、Chris Eppstein 和 Natalie Weizenbaum 开发的样式表语言。 它是一种预处理器脚本语言,将被编译或解释为 CSS。 Sass Script 本身就是一种脚本语言。 它的 typing 规则是动态的。

SCSS 通常被称为 Sassy CSS,它是作为 SASS(Syntactically Awesome Style Sheets)的主要语法引入的,它建立在现有的 CSS 语法之上。 它使用分号和括号,如 CSS(级联样式表)。 SCSS 是 CSS 的超集,即所有 CSS 功能都将在 SCSS 中可用,并且包含 SASS(Syntactically Awesome Style Sheets)的一些功能。 SCSS 使任何 CSS 术语都有效。

9 大区别:

区别1

SASS是Syntactically Awesome Style Sheets,是CSS的扩展,提供嵌套规则、继承、Mixins等特性,而SCSS是Sassy Cascaded Style Sheets,与CSS类似,填补了CSS与SASS之间的空白和不兼容。 它是在 MIT 许可下获得许可的。它首次出现在2006年。

区别2

SASS 更易于使用且语法更简单,因此无需使用分号、曲线、大括号等,而 SCSS 与 CSS 完全兼容,文件扩展名为 .scss 类型。

区别3

SASS 具有最好的编码标准和良好的官方文档的特点,而 SCSS 更容易学习开发代码。

区别4

SASS 基于 javascript 并支持不同的语言扩展,拥有自己的语法、开源 CSS 预处理器和高级功能,例如控制和指令及其库。

区别5

SASS 更难通过重写代码与现有 CSS 项目集成,而 SCSS 通过采样添加新代码而不是重写现有代码库更容易与现有代码库集成。

区别6

SASS 更易于使用、阅读和编写,而 SCSS 在实现代码方面更具逻辑性和复杂性。

区别7

SASS 变量将以美元 ($) 符号开头,而 SCSS 具有模块化功能,可以通过使用某种注释以更加模块化的方式组织代码。

区别8

SASS 具有高级语法功能,并且其文件具有 .sass 扩展名,而 SCSS 具有类似每个有效 CSS 文件都是 SCSS 文件的功能。

区别9

SASS 与 Ruby 相似,安装需要使用 Ruby,没有严格的代码缩进,而 SCSS 与 CSS 相似,无需任何额外安装或配置即可轻松使用。

区别10

SASS 具有可在 CSS 文件的不同位置使用的局部和全局变量,而 SCSS 具有不同的变量,例如颜色变量,这些变量可以稍后在样式表中使用。

区别11

SASS 具有嵌套功能,可以将 CSS 选择器嵌套显示在 HTML 中,并且难以维护较长的分层嵌套 CSS,而 SCSS 可以处理多个类和不同的嵌套样式。

区别12

SASS 具有文档样式,它比 CSS 更好,并且具有颜色、属性和参数列表的操作功能,而 SCSS 语法具有边距、列表样式、填充、显示等。

区别13

SASS 具有控制指令、功能指令、Mixins 并具有可扩展的特性,而 SCSS 可以与 SASS 一起使用来表示 CSS 类似的特性。

区别14

在最初的开发之后,SASS 扩展到 SassScript。 它支持跨平台操作系统。 它受到CSS、LESS、YAML等的影响。这个SASS的文件扩展名是.scss和.sass,它的官方实现也是一个使用Ruby开发的开源项目。

结论

SASS 与 SCSS 都是 CSS 预处理器,它们非常有用,可包含在基于 CSS 的 UI(用户界面)或前端框架中以简化开发。 这些 SASS 与 SCSS 框架在以编程方式利用强大的 CSS 功能时在高级别的 CSS 功能方面提供了强大的功能。 SASS 是一种 CSS 扩展,其中大部分功能都将被扩展,而 SCSS 是 CSS 的一种超集,其中 CSS 的所有功能都将在 SCSS 中。 预处理器的选择取决于通过以有效的方式做出权衡选择来使应用程序高效工作所需的功能和特性。

与SCSS相比,SASS更易于使用并且需要更少的语法或配置,推荐用于需要更快开发范围和更容易开发复杂组件的较大应用程序的情况,而SCSS可以用于优化Mixin特性的情况,以及许多其他有效技术。

(0)

相关推荐

  • vue 开发常用工具及配置六:认识各种 loader

    本文大约 2400 字. 目录 Webpack 的工作原理 loader 和 plugin 的区别 webpack 如何处理 css 文件 三种样式 sass/scss 和 less 的区别 另一种定 ...

  • 推荐几个大厂的前端代码规范,学会了你也能写出诗一样的代码

    今天给大家带来的是 几个大厂的前端代码规范. 前端代码规范 代码千万行,安全第一行:前端不规范,同事两行泪. 腾讯 包含内容也挺多的: PC端专题:快速上手.文件目录.页面头部.通用title.通用f ...

  • webpack4.0各个击破(2)—— CSS篇

    webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...

  • 基于综合服务平台浅谈Sass应用

    一.       前言 CSS不是一种编程语言,只是单纯的一行行的描述,没有逻辑没有变量,因此写CSS对于习惯于运用逻辑思维编码的程序员来说是一件很头疼的事.于是勤奋的程序员就开始运转他们敏捷的大脑, ...

  • 自动化构建初体验

    自动化构建 1.自动化构建简介 2.自动化构建初体验 3.常用的自动化构建工具 1.自动化构建简介 重复工作本应自动化.自动化:通过机器代替手工完成一些工作.构建:理解成转换. 源代码----自动化构 ...

  • SCSS基本使用

    Sass就是css的预处理器,Scss是Sass3版本中引入的新语法特性 vue中使用scss,安装: cnpm i -S node-sass sass-loader 使用: <style la ...

  • Iass、Pass、SasS三种云服务区别

    IaaS:Infrastructure-as-a-Service(基础设施即服务) 第一层叫做IaaS 举例:几年前如果你想在办公室或者公司的网站上运行一些企业应用,你需要去买服务器,或者别的高昂的硬 ...

  • 儒、释、道三家文化的七大区别

    闲云谷 峰下闲云云上松,珍兰奇蕙伴节丛:不忍移爱进瓦罐,卷书抱坛迁谷中. 994篇原创内容 公众号 一.文化主旨 儒家文化--积极进取的文化 儒家倡导知识的获取和品德的培养,是一种积极向上的文化. 道 ...

  • 招摇撞骗罪和诈骗罪有什么区别

    招摇撞骗罪和诈骗罪都表现为欺骗行为,招摇撞骗罪也可以像诈骗罪一样骗取财物,两者容易混淆,大家知道招摇撞骗罪和诈骗罪有什么区别吗? 律师解答: 招摇撞骗罪侵犯的客体主要是国家机关的威信及其正常活动,而诈 ...

  • 香港服务器托管和租用有什么区别?

    香港服务器托管和租用有什么区别?托管和租用都是服务器选择使用方式,想要知道香港服务器托管和租用两种方式有什么区别以及哪种方式比较好,就需要深入了解它们,下面我们就聊聊香港服务器托管和租用的区别. 什么 ...

  • “全款”和“贷款”买房有什么区别?内行:10年后,差距一目了然

    因为现在国内的房价总体上呈现出不断上涨的趋势,尤其是在一二线城市靠近市中心的房子更是高到令现在的不少家庭都有着很大的生活重担,对于现在的年轻人来说也很难能够在他们的承受范围之内. 所以,如果高房价持续 ...

  • “普通人vs 女网红的区别...” 哈哈哈哈哈哈哈哈哈过于真实!

    网上冲浪久了 不得不感叹 现在的女网红真的很努力 为了拍出 前凸后翘的照片 不管何时何地 都执着地凹着浮夸的摆拍造型 网友甚至总结出了当网红的精髓 普通人vs 女网红的区别 学废了 离网红就差一个骨盆 ...

  • 木耳秋耳只差一个字,区别大不同!牢记2点,轻松分辨,不被忽悠

    买木耳有技巧,遇见这4种,不管多少钱也不要买,难吃又费钱 各位读者朋友们大家好,感谢阅读我分享的美食文章,经验和大家一起共享,今天我要和大家分享的内容是:『木耳秋耳只差一个字,区别大不同!牢记2点,轻 ...

  • 药品甲类和乙类的区别

    对于药品,我们都很熟悉.不管怎么样,都有用过各类药物.其实,药品的种类多种多样.世界上有多少种疾病,相对应就会有多少种药物.有句话不是说对症下药,说的就是药物和疾病的关系.由于对人的重要性,因此由不得 ...