Compass: Compass 是一个样式表分发框架。它是用 Ruby 编写的,主要是为了解决 CSS 中普遍存在的缺点而开发的。 Compass 带有一个强大的创作环境,这意味着我们开发的代码是自动监控的,然后被编译为纯 CSS 形式使用。指南针使用 SASS。
指南针的特点:
- CSS 规则启用的 SASS 样式嵌套。
- 用于使用图像、颜色、字体和表达式的内置函数。
- 有助于创造美丽的排版节奏。
- 帮助以更简单的方式下载和创建扩展。
例子:
@import"compass/utilities/color/contrast";
@mixin bordered($color, $width) {
border: $width solid $color;
}
.myBook {
@include bordered(blue, 2px);
}
.myStudy {
@include bordered(red, 3px);
}
输出:
SASS: SASS 代表 Syntactically Awesome Style Sheets。它只是 CSS 的扩展,使我们能够使用变量、内联导入、嵌套循环等等。 SASS 通常被解释为级联样式表。 SASS 使用两种语法:
- 预期的语法
- 时髦的 CSS
SASS的特点:
- SASS 允许在其中定义变量。
- SASS 支持插值,即您可以在变量中定义一个元素,然后在 SASS 代码中对其进行插值。
- SASS 拥有几个内置函数。呈现功能与颜色、字体和表达有关。
- SASS 兼容所有版本的 CSS。
例子:
$bgcolor: blue;
$primary-color: #212;
body {
background-color: $bgcolor
color: $primary-color;
}
输出:
尽管 Compass 和 SASS 听起来很相似。两者之间存在显着差异。这些都是:
S.No | Compass | SASS |
---|---|---|
Definition | Compass is an SASS library holding the raw code with additional inbuilt functions. | SASS is merely and extension of CSS3 which includes variables, loops, selector inheritance and many more. |
Need | No vendor prefix in CSS. | Presence of variables is stated as the key factor. |
Simplicity | Compass mixing make CSS3 quite easy without much complexity. | SASS provides a well formatted CSS. This makes it easier to organised and maintain. |
Approval | Compass has comparatively less approval in companies than SASS. | SASS has more approvals with about 2098 company stacks. |
Usage | Companies such as Weebly and Movielala use Compass. | Pandora, Square and Airbnb use SASS. |