指南针和 sass 之间的区别?
SASS 和 Compass、SASS 和 SCSS 有什么区别?我对此感到非常困惑。
What is the difference between SASS and Compass, SASS and SCSS? I'm getting really confused by this.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
冒着过于简单化的风险,Compass 是一个框架,而 Sass 是一种语言抽象。您可以在 Compass 上下文中编写 Sass 代码(并将其编译为标准 CSS)。 SCSS 只是 Sass 语言的最新语法。据我所知,创建它的唯一目的是在语法上更像 CSS。 Sass 的所有语法糖,但对于熟悉 CSS 的前端开发人员来说更熟悉。
At the risk of oversimplification, Compass is a framework while Sass is a language abstraction. You write Sass code (and compile it to standard CSS) within the Compass context. SCSS is simply the most recent syntax of the Sass language. It was created for the sole purpose of being more CSS-like in its syntax, as far as I can tell. All the syntactic sugar of Sass, but more familiar to front end developers comfortable with CSS.
一般来说:“Sass”是 css 预处理器的名称 - 意思是:开发人员编写简短形式的占位符的有用工具,这些占位符会自动编译为正常的 css 代码。 Sass 有两种不同的方式来编写简短的代码:SCSS 和 SASS。 SCSS 和 SASS 之间的区别非常简单:SCSS 是带有附加功能的普通 CSS。每个 CSS 文件都可以重命名为 .scss 并进行验证。 SASS 通过跳过所有大括号来使用更短的书写形式。要将 .css 文件转换为有效的 .sass 文件,您需要更改 css 代码。
Compass 是一个所谓的 css 框架,通过命令行工具进行控制。 Compass通过提供预定义函数、mixin等来支持开发,以加快编码速度并防止编写错误。例如,compass 允许您通过编写“@include box-shadow();”来调用具有所有 polyfill 的 box-shadow。当使用“compasscompile”编译文件时,所有CSS代码都是由compass本身添加的。 Compass 是大型前端开发项目中最常用的工具之一。
In general: "Sass" is the name for a css preprocessor - means: a helpful tool for developers to write short forms of placeholders that are automatically compiled to normal css code. Sass has two different ways of writing short form code: SCSS and SASS. The difference between SCSS and SASS is very simple: SCSS is normal CSS with additional functions. Every CSS file can be renamed as .scss and will validate. SASS uses a shorter form of writing by skipping all curly brackets. To convert a .css file to a valid .sass file, you need to change the css code.
Compass is a so called css framework that is controlled via command line tools. Compass supports the development by giving predefined functions, mixins and so on to speed up coding and prevent writing mistakes. for example compass allows you to call a box-shadow with all polyfills just by writing "@include box-shadow();". all css-code is added by compass itself when compiling the file by the use of "compass compile". Compass is one of the most used tools for working in bigger frontend development projects.
我提供了一个 TLDR 答案:
Compass 本质上是一个 SASS 库。它使用 sass 的原始语言并创建常见的可重用函数。
来自网站:
I've provided a TLDR answer:
Compass is essentially a SASS library. It uses the raw language of sass and creates common reusable functions.
From the website:
Compass 是一个用 Sass 构建的框架。另一个流行的 Sass 框架是 Bourbon 和 苏西。这意味着,所有这些框架都是用 Sass 编写的。它们只是具有预定义的函数和 mixins,您可以使用它们来加快工作流程。
SCSS(Sassy Sass)只是 Sass 的较新语法。它使用 CSS 语法。例如:
另一方面,Sass 使用不太“严格”的语法:
注意,没有使用大括号和分号。另外,您必须使用缩进。
总而言之,您将使用什么框架或哪种 Sass 语法,这是您的选择!
Compass is a framework built with Sass. Another popular Sass frameworks are Bourbon and Susy. That means, all these frameworks are written in Sass. They just have predefined functions and mixins you can use to speed up your workflow.
SCSS (Sassy Sass) is just the newer syntax of Sass. It uses CSS-syntax. For instance:
On the other hand, Sass uses a less "strict" syntax:
Notice, that no braces and no semi-colons are used. Also, you have to use indentation.
To sum up, what framework or which Sass syntax you'll use, it's your choice!