SCSS 常用语法规则详解

1. 变量 (Variables)

// 定义变量
$primary-color: #3498db;
$font-size: 16px;
$font-family: 'Arial', sans-serif;
// 使用变量
body {
color: $primary-color;
font-size: $font-size;
font-family: $font-family;
}

解释：变量用于存储可重用的值，如颜色、字体、尺寸等，便于统一管理和维护。

编译后的 CSS：

body {
  color: #3498db;
  font-size: 16px;
  font-family: 'Arial', sans-serif;
}

2. 嵌套 (Nesting)

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
li {
  display: inline-block;

  a {
    text-decoration: none;
    padding: 5px 10px;

    &:hover {
      color: red;
    }
  }
}
}
}

解释：嵌套允许将相关的选择器组织在一起，使代码结构更清晰，减少重复书写父选择器。

编译后的 CSS：

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  text-decoration: none;
  padding: 5px 10px;
}
nav ul li a:hover {
  color: red;
}

3. 父选择器 (&)

.btn {
  background: blue;
  color: white;
&:hover {
background: darkblue;
}
&.disabled {
opacity: 0.5;
}
&-large {
font-size: 20px;
padding: 15px 30px;
}
}

解释：& 符号代表父选择器，用于生成更具体的选择器，如伪类、状态类或 BEM 命名。

编译后的 CSS：

.btn {
  background: blue;
  color: white;
}
.btn:hover {
  background: darkblue;
}
.btn.disabled {
  opacity: 0.5;
}
.btn-large {
  font-size: 20px;
  padding: 15px 30px;
}

4. 混合器 (Mixins)

// 定义混合器
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
@mixin border-radius($radius: 5px) {
border-radius: $radius;
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
}
// 使用混合器
.container {
@include flex-center;
@include border-radius(10px);
}

解释：混合器用于定义可重用的样式块，可以带参数和默认值，提高代码复用性。

编译后的 CSS：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

5. 继承 (Extend)

// 基础样式
.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
// 继承
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
}

解释：继承让一个选择器继承另一个选择器的所有样式，编译后会合并选择器，减少重复代码。

编译后的 CSS：

.message, .success, .error {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.success {
  border-color: green;
}
.error {
  border-color: red;
}

6. 运算 (Operations)

.container {
  width: 100% - 20px;
  font-size: 12px + 2px;
  padding: 10px * 2;
  margin: (14px / 2);
  line-height: 1.5 * 1.2;
}

解释：SCSS 支持数学运算，包括加减乘除，可以处理带单位的值和无单位的数值。

编译后的 CSS：

.container {
  width: 80%;
  font-size: 14px;
  padding: 20px;
  margin: 7px;
  line-height: 1.8;
}

7. 函数 (Functions)

// 颜色函数
$base-color: #036;
.header {
background-color: lighten($base-color, 20%);
color: darken($base-color, 10%);
border: 1px solid rgba($base-color, 0.5);
}
// 数学函数
.sidebar {
width: percentage(1/3);
height: max(100px, 50vh);
}

解释：SCSS 提供了丰富的内置函数，用于处理颜色、数值、字符串等，也可以自定义函数。

编译后的 CSS：

.header {
  background-color: #0066cc;
  color: #003366;
  border: 1px solid rgba(0, 51, 102, 0.5);
}
.sidebar {
width: 33.33333%;
height: 100px;
}

8. 控制指令

@if, @else if, @else

@mixin theme($mode) {
  @if $mode == 'dark' {
    background: #000;
    color: #fff;
  } @else if $mode == 'light' {
    background: #fff;
    color: #000;
  } @else {
    background: gray;
    color: #333;
  }
}
.theme-dark {
@include theme(‘dark’);
}

解释：条件语句根据不同的条件应用不同的样式，常用于主题切换或响应式设计。

编译后的 CSS：

.theme-dark {
  background: #000;
  color: #fff;
}

@for 循环

@for $i from 1 through 4 {
  .col-#{$i} {
    width: 25% * $i;
  }
}

解释：for 循环用于生成一系列相似的样式规则，减少重复代码。

编译后的 CSS：

.col-1 {
  width: 25%;
}
.col-2 {
  width: 50%;
}
.col-3 {
  width: 75%;
}
.col-4 {
  width: 100%;
}

@each 循环

$colors: red, green, blue, yellow;
@each $color in $colors {
.text-#{$color} {
color: $color;
}
}

解释：each 循环遍历列表或映射中的每个值，为每个值生成相应的样式。

编译后的 CSS：

.text-red {
  color: red;
}
.text-green {
  color: green;
}
.text-blue {
  color: blue;
}
.text-yellow {
  color: yellow;
}

@while 循环

$i: 1;
@while $i <= 3 {
  .item-#{$i} {
    width: 100px * $i;
  }
  $i: $i + 1;
}

解释：while 循环在满足条件时重复生成样式，比 for 循环更灵活。

编译后的 CSS：

.item-1 {
  width: 100px;
}
.item-2 {
  width: 200px;
}
.item-3 {
  width: 300px;
}

9. 导入 (Import)

// 导入其他 SCSS 文件
@import 'variables';
@import 'mixins';
@import 'components/button';

解释：import 用于将多个 SCSS 文件合并为一个，便于模块化管理和组织代码。

编译后的 CSS：

/* 所有导入文件的内容会被合并到这个位置 */

10. 注释

// 单行注释（不会编译到 CSS）
/*
多行注释
会编译到 CSS
*/
/// 文档注释（用于文档生成工具）
/// @param {Color} $color - 颜色值
/// @return {Color} - 处理后的颜色

解释：SCSS 支持多种注释方式，单行注释不会出现在编译后的 CSS 中，多行注释会保留。

编译后的 CSS：

/* 
  多行注释
  会编译到 CSS
*/

11. 占位符选择器 (%)

%button-base {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}
.primary-btn {
@extend %button-base;
background: blue;
color: white;
}
.secondary-btn {
@extend %button-base;
background: gray;
color: black;
}

解释：占位符选择器以 % 开头，本身不会被编译，只有被 @extend 引用时才会生成对应的 CSS。

编译后的 CSS：

.primary-btn, .secondary-btn {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}
.primary-btn {
background: blue;
color: white;
}
.secondary-btn {
background: gray;
color: black;
}

12. 插值 (#{})

$property: margin;
$direction: top;
.#{$property}-#{$direction} {
#{$property}-#{$direction}: 10px;
}

解释：插值 #{} 允许在选择器名、属性名、属性值中使用变量，实现动态生成。

编译后的 CSS：

.margin-top {
  margin-top: 10px;
}

这些 SCSS 语法规则大大提升了 CSS 的开发效率和维护性，使样式代码更加模块化、可复用和易于管理。