📜  指南针和SASS有什么区别?

📅  最后修改于: 2021-08-31 07:22:10             🧑  作者: Mango

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.