举个例子说明scss和css的不同点
时间: 2024-09-26 14:17:51 浏览: 40
SCSS (Sassy CSS) 是一种预处理器语言,它扩展了原始 CSS 的功能,使得编写样式表更加模块化、组织有序并且易于维护。与纯 CSS 相比,SCSS 具有以下几个关键区别:
1. **变量(Variables)**:SCSS 支持变量定义,可以给颜色、尺寸等值赋一个名字,在整个文件中引用这个变量,提高复用性和一致性。例如:
```scss
$primary-color: #007BFF;
body {
color: $primary-color;
}
```
CSS 中则没有内置变量机制,需要使用 JavaScript 库如 `postcss-custom-properties`。
2. **嵌套规则(Nested rules)**:在 SCSS 中,你可以将相关的样式规则组织在一起,形成嵌套结构,这在大型项目中有助于清晰地表达关系。而在 CSS 中,每条规则都是独立的行。
```scss
.container {
width: 80%;
margin: 0 auto;
&__title {
font-size: 24px;
}
}
```
3. **混合(Mixins)**:SCSS 提供混入(mixin),类似于函数,可以封装一段可复用的样式代码,方便在多个地方调用。CSS 没有类似功能。
```scss
@mixin center-text() {
text-align: center;
}
.button {
@include center-text();
}
```
4. **运算和条件控制**:SCSS 支持简单的数学运算和 if 等条件判断,而 CSS 需要通过预处理器(如 PostCSS)来实现类似功能。
阅读全文