CSS SCSS 语法
介绍
SCSS(Sassy CSS)是 CSS 预处理器 Sass 的一种语法格式。它完全兼容 CSS 语法,同时提供了许多强大的功能,如变量、嵌套、混合(Mixins)、继承等,帮助开发者编写更简洁、可维护的样式代码。对于初学者来说,SCSS 是一个很好的工具,可以让你在编写 CSS 时更加高效。
SCSS 是 Sass 的一种语法格式,另一种是缩进语法(Sass)。SCSS 使用 .scss
文件扩展名,而 Sass 使用 .sass
扩展名。
SCSS 基础语法
1. 变量
在 SCSS 中,你可以使用变量来存储颜色、字体、尺寸等值。变量以 $
符号开头,后面跟变量名。
$primary-color: #3498db;
$font-stack: Helvetica, sans-serif;
body {
color: $primary-color;
font-family: $font-stack;
}
编译后的 CSS:
body {
color: #3498db;
font-family: Helvetica, sans-serif;
}
使用变量可以让你在项目中轻松地统一管理样式,避免重复代码。
2. 嵌套
SCSS 允许你在选择器内部嵌套其他选择器,这样可以更清晰地组织代码结构。
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
li {
display: inline-block;
a {
text-decoration: none;
}
}
}
}
编译后的 CSS:
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav ul li {
display: inline-block;
}
nav ul li a {
text-decoration: none;
}
虽然嵌套功能非常方便,但过度嵌套会导致生成的 CSS 选择器过于复杂,影响性能。建议嵌套层级不要超过 3 层。
3. 混合(Mixins)
混合(Mixins)是一种可以重复使用的代码块,类似于函数。你可以将一组样式定义为混合,然后在需要的地方调用它。
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.button {
@include border-radius(10px);
}
编译后的 CSS:
.button {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
Mixins 非常适合用于处理浏览器前缀或其他需要重复使用的样式。
4. 继承
SCSS 允许你通过 @extend
指令继承其他选择器的样式。这样可以减少重复代码,提高代码的可维护性。
%message-shared {
padding: 10px;
border: 1px solid #ccc;
color: #333;
}
.message {
@extend %message-shared;
}
.success {
@extend %message-shared;
border-color: green;
}
编译后的 CSS:
.message, .success {
padding: 10px;
border: 1px solid #ccc;
color: #333;
}
.success {
border-color: green;
}
使用 %
定义的选择器称为“占位符选择器”,它们不会直接生成 CSS,只有在被 @extend
时才会生成。
5. 运算
SCSS 支持基本的数学运算,如加、减、乘、除等。你可以在样式中直接使用这些运算。
.container {
width: 100% / 3;
padding: 10px + 5px;
}
编译后的 CSS:
.container {
width: 33.33333%;
padding: 15px;
}
在进行除法运算时,需要使用括号将表达式包裹起来,否则 SCSS 会将其解释为 CSS 的 /
符号。
实际应用场景
1. 主题切换
通过 SCSS 的变量和混合功能,你可以轻松实现主题切换功能。
$light-theme: (
background: #fff,
text: #000,
);
$dark-theme: (
background: #333,
text: #fff,
);
@mixin theme($theme) {
background-color: map-get($theme, background);
color: map-get($theme, text);
}
body {
@include theme($light-theme);
&.dark {
@include theme($dark-theme);
}
}
编译后的 CSS:
body {
background-color: #fff;
color: #000;
}
body.dark {
background-color: #333;
color: #fff;
}
2. 响应式设计
SCSS 的嵌套和混合功能可以帮助你更轻松地编写响应式设计代码。
@mixin respond-to($breakpoint) {
@if $breakpoint == phone {
@media (max-width: 600px) { @content; }
} @else if $breakpoint == tablet {
@media (max-width: 900px) { @content; }
} @else if $breakpoint == desktop {
@media (min-width: 901px) { @content; }
}
}
.container {
width: 100%;
@include respond-to(phone) {
width: 100%;
}
@include respond-to(tablet) {
width: 80%;
}
@include respond-to(desktop) {
width: 60%;
}
}
编译后的 CSS:
.container {
width: 100%;
}
@media (max-width: 600px) {
.container {
width: 100%;
}
}
@media (max-width: 900px) {
.container {
width: 80%;
}
}
@media (min-width: 901px) {
.container {
width: 60%;
}
}
总结
SCSS 是一种强大的 CSS 预处理器,它通过变量、嵌套、混合、继承等功能,极大地提高了 CSS 代码的可维护性和可读性。对于初学者来说,掌握 SCSS 语法是迈向高效前端开发的重要一步。
附加资源与练习
- 练习 1:尝试使用 SCSS 变量和嵌套功能,编写一个简单的导航栏样式。
- 练习 2:创建一个 SCSS 混合,用于处理常见的按钮样式,并在多个按钮中调用它。
- 附加资源:
通过不断练习和探索,你将能够熟练使用 SCSS 编写高效、可维护的样式代码。