SCSS（Sassy CSS）是CSS的一个扩展语法，提供了更多的功能来增强CSS的编写效率。SCSS 语法基本上与 CSS 非常相似，唯一的区别是它支持嵌套规则、变量、混入（mixins）、继承、运算等特性。下面是一些SCSS的基本语法：

1. 变量

SCSS 允许定义变量，用来存储颜色、字体大小、间距等值，方便重复使用。

scssCopy Code$primary-color: #3498db;$font-size: 16px;body {  color: $primary-color;  font-size: $font-size;
}

2. 嵌套

SCSS 允许在规则中嵌套其他规则，使得代码更清晰和层次分明。

scssCopy Codenav {  background-color: #333;  
  ul {    list-style-type: none;    
    li {      display: inline-block;      
      a {        color: white;        text-decoration: none;
      }
    }
  }
}

3. 混入（Mixins）

混入（mixins）可以定义一组样式，然后通过@include指令来使用。它支持参数传递，使得复用变得更加灵活。

scssCopy Code@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;  border-radius: $radius;
}.box {  @include border-radius(10px);
}

4. 继承（Inheritance）

SCSS 支持继承一个选择器的样式，这样可以避免重复编写相同的样式。

scssCopy Code%button-base {  padding: 10px;  border: 1px solid #ccc;  border-radius: 5px;
}.button {  @extend %button-base;  background-color: #3498db;
}.button-secondary {  @extend %button-base;  background-color: #2ecc71;
}

5. 运算

SCSS 支持在样式中进行基本的运算，如加法、减法、乘法和除法。

scssCopy Code$width: 100px;$padding: 20px;.container {  width: $width + $padding;  // 120px
  padding: $padding / 2;      // 10px}

6. 条件语句

SCSS 还可以使用条件语句来控制样式的生成。

scssCopy Code$theme: dark;.button {  @if $theme == light {    background-color: #fff;    color: #000;
  } @else {    background-color: #333;    color: #fff;
  }
}

7. 循环

SCSS 允许使用循环来生成一系列样式。

scssCopy Code@for $i from 1 through 5 {  .col-#{$i} {    width: 20% * $i;
  }
}

8. 导入（@import）

SCSS 支持导入其他文件，使得样式表的管理更加灵活。

scssCopy Code@import 'variables'@import 'mixins'.button {  @include border-radius(5px);
}

总结

SCSS 提供了比传统 CSS 更强大的功能，帮助我们更高效地编写样式。通过使用 SCSS，开发者可以更方便地进行样式的组织和维护。

本文标签： 样式 SCSS css