为什么我们使用 SASS,即使我们使用 SCSS?
Why we are using SASS, even we are using SCSS?
我已经在我的项目中使用 SCSS,但我仍然感到困惑。
为什么我们使用 SASS 即使我们有 SCSS,我们可以在同一个项目中使用 SASS 和 SCSS,它会在同一个项目中工作吗?
Sass 有两种语法。最常用的语法称为“SCSS”(代表“Sassy CSS”),是 CSS3 语法的超集。这意味着每个有效的 CSS3 样式表也是有效的 SCSS。 SCSS 个文件使用扩展名 .scss。
第二种较旧的语法称为缩进语法(或简称为“.sass”)。受 Haml 简洁的启发,它适用于喜欢简洁而不是相似性的人 CSS。它不使用方括号和分号,而是使用行的缩进来指定块。缩进语法中的文件使用扩展名 .sass.
SCSS
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color: darken($blue, 9%);
}
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}
SASS
$blue: #3bbfce
$margin: 16px
.content-navigation
border-color: $blue
color: darken($blue, 9%)
.border
padding: $margin / 2
margin: $margin / 2
border-color: $blue
CSS
.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}
.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}
我已经在我的项目中使用 SCSS,但我仍然感到困惑。
为什么我们使用 SASS 即使我们有 SCSS,我们可以在同一个项目中使用 SASS 和 SCSS,它会在同一个项目中工作吗?
Sass 有两种语法。最常用的语法称为“SCSS”(代表“Sassy CSS”),是 CSS3 语法的超集。这意味着每个有效的 CSS3 样式表也是有效的 SCSS。 SCSS 个文件使用扩展名 .scss。
第二种较旧的语法称为缩进语法(或简称为“.sass”)。受 Haml 简洁的启发,它适用于喜欢简洁而不是相似性的人 CSS。它不使用方括号和分号,而是使用行的缩进来指定块。缩进语法中的文件使用扩展名 .sass.
SCSS
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color: darken($blue, 9%);
}
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}
SASS
$blue: #3bbfce
$margin: 16px
.content-navigation
border-color: $blue
color: darken($blue, 9%)
.border
padding: $margin / 2
margin: $margin / 2
border-color: $blue
CSS
.content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}
.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}