来源 | https://www.geeksforgeeks.org/what-is-the-difference-between-css-and-scss/?ref=leftbar-rightbar
翻译 | web前端开发(ID:web_qdkf)
介绍:
CSS:级联样式表基本上是脚本语言。CSS用于设计网页。
CSS是与HTML和JavaScript一起广泛使用的最重要的Web技术。CSS的文件扩展名为.css。 SCSS:语法很棒的样式表是CSS的超集。SCSS是CSS的更高级版本。SCSS由Hampton Catlin设计,由Chris Eppstein和Natalie Weizenbaum开发。由于其先进的功能,它通常被称为Sassy CSS。SCSS的文件扩展名为.scss。 差异: SCSS包含CSS的所有功能,并且包含CSS中不存在的更多功能,这使其成为开发人员使用它的不错选择。 SCSS充满了高级功能。 SCSS提供变量,您可以使用变量来缩短代码。与传统的CSS相比,这是一个很大的优势。 在CSS中代码如下:
例:
例:
CSS是与HTML和JavaScript一起广泛使用的最重要的Web技术。CSS的文件扩展名为.css。 SCSS:语法很棒的样式表是CSS的超集。SCSS是CSS的更高级版本。SCSS由Hampton Catlin设计,由Chris Eppstein和Natalie Weizenbaum开发。由于其先进的功能,它通常被称为Sassy CSS。SCSS的文件扩展名为.scss。 差异: SCSS包含CSS的所有功能,并且包含CSS中不存在的更多功能,这使其成为开发人员使用它的不错选择。 SCSS充满了高级功能。 SCSS提供变量,您可以使用变量来缩短代码。与传统的CSS相比,这是一个很大的优势。 在CSS中代码如下:
body{
color: #ffffff;
font: $ubuntu-font: 'Ubuntu', 'Arial', 'Helvetica', sans-serif;
font-size: xx-large;
padding: 2rem;
}
输出结果如下:
在SCSS中代码如下:
$white: #ffffff;
$ubuntu-font: $ubuntu-font: 'Ubuntu', 'Arial', 'Helvetica', sans-serif;
body{
color: $white;
font: $ubuntu-font;
font-size: xx-large;
padding: 2rem;
}
输出结果如下:
了解SCSS可帮助您自定义Bootstrap 4。
SASS添加了@import的功能,可让您导入自定义的SCSS文件。例:
@import "my theme";
@import "framework/bootstrap";
SASS允许我们使用嵌套语法。假设如果您必须在“页脚”的“ div”中为特定的“段落”设置样式,则绝对可以通过SASS来实现。例:
footer {
div {
p {
margin: 2rem;
color: #2f2f2f;
}
}
}
最后,使SASS成为一个不错的选择的原因是它有据可查。