SCSS(Sassy CSS)是一种CSS预处理器,它扩展了CSS的功能,并为样式表的编写提供了额外的便利性。以下是两者之间的主要区别:
1. 语法扩展:
CSS标准层叠样式表语言,采用简单、扁平化的键值对形式书写。
SCSS基于CSS语法之上增加了嵌套规则、变量、混入(mixins)、继承等高级特性,代码结构更加类似编程语言。
2. 变量
CSS不支持变量定义和使用。
SCSS支持变量定义,可以声名$variable:value;并在样式中重复引用,方便颜色、尺寸和其他值的统一管理和修改。
3. 嵌套规则
CSS中的选择器是扁平化的,每个选择器独立书写。
SCSS允许选择器嵌套,这样可以更好地反映HTML结构,并减少重复代码;
4.导入(@import)
CSS的@import主要用于合并多个CSS文件。但可能会导致额外的HTTP请求,降低性能。
SCSS的@import不仅能合并文件。而且在编译时会被处理成一个CSS文件。同时支持导入其他SCSS文件并合并其变量、混入等。
5.混合器(@mixin)
CSS不具备此功能。
SCSS提供混合功能,可以创建可重用的样式块。包括带有参数的样式模板,可以在多个地方调用以避免重复代码。
6.运算符和函数
CSS不支持继承。
SCSS允许在样式中执行简单的算术计算。如颜色函数、数值运算等。
7.继承(@extend)
CSS需要通过类名的层叠或使用通用选择器来实现样式继承。
SCSS 提供了明确的@extend指令,可以将样式应用到多个选择器上。
总结来说,SCSS作为一种预处理器,增强了CSS语言的功能性和可编程性。
下面用代码进行详细解释
1、SCSS变量和混合器 (@mixin)
// 定义变量
$button-bg-color: #3498db;
$red-button-bg-color: #e74c3c;
// 使用变量及混合(Mixins)
@mixin button-styles($bg-color) {
background-color: $bg-color;
padding: 10px 20px;
border-radius: 5px;
}
.button {
@include button-styles($button-bg-color);
color: black; // 其他基础样式
}
.red-button {
@include button-styles($red-button-bg-color);
color: white; // 只更改特定的样式属性
}
2、嵌套规则
.navbar {
background-color: #333;
.nav-item {
display: inline-block;
&.active {
font-weight: bold;
}
}
}
3、导入 (@import)
// _variables.scss 文件包含变量声明 @import 'variables'; @import 'mixins'; // 使用导入的变量和混入 .title { color: $primary-color; @include font-size(2em); }
4、混合器 (@mixin)
@mixin font-size($size) { font-size: $size; line-height: 1.5 * $size; }
5、运算符和函数
$width: 100px;
.element-width {
width: $width * 2; // 数值运算
}
.text-shadow {
text-shadow: rgba(0, 0, 0, 0.5) 2px 2px;
// 示例简单样式,SCSS支持更多复杂颜色函数如 darken(), lighten()
}
6. 继承 (@extend)
// 定义一个基础样式类
%base-button {
border: 1px solid #ccc;
padding: 8px 16px;
font-size: 14px;
text-align: center;
}
// 使用继承来创建扩展样式类
.button {
@extend %base-button; // 继承了%base-button的所有样式
background-color: #f0f0f0;
}
.primary-button {
@extend %base-button; // 同样继承了%base-button的所有样式
background-color: #3498db;
color: white;
}
// 编译后生成的CSS:
.base-button,
.button, .primary-button {
border: 1px solid #ccc;
padding: 8px 16px;
font-size: 14px;
text-align: center;
}
.button {
background-color: #f0f0f0;
}
.primary-button {
background-color: #3498db;
color: white;
}
7、条件语句与循环:SCSS支持条件语句@if、@for、@each、@while和@debug。
scss
$font-sizes: (small: 14px, medium: 16px, large: 18px);
@each $size, $value in $font-sizes {
.font-#{$size} {
font-size: $value;
}
}
编译后的CSS
.font-small {
font-size: 14px;
}
.font-medium {
font-size: 16px;
}
.font-large {
font-size: 18px;
}
8、自定义函数:SCSS提供了一系列内置函数,同时也支持自定义函数。例如,自定义颜色反转函数:
SCSS @function color-inverse($color) { @return mix(white, $color, 100%); } body { background-color: color-inverse(black); } 编译后的CSS: body { background-color: white; }