scss基础用法

SCSS（Sassy CSS）是Sass的增强版本，作为CSS的预处理器，它提供了多种功能来提高代码的可维护性和效率。以下是SCSS的基础用法：

1. 变量（Variables）

   • 用于存储常用的值，如颜色、字体大小等。
   • 示例：

     $primary-color: #333;.header {  color: $primary-color;}
     

2. 嵌套（Nesting）

   • 允许在一个选择器中嵌套另一个选择器，反映HTML结构。
   • 示例：

     .nav {  a {    color: #000;    &:hover {      color: #f00;    }  }}
     

3. 混合（Mixins）

   • 组合一组CSS声明，带可选参数。
   • 示例：

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

4. 继承（Inheritance）

   • 使用@extend指令，让一个选择器继承另一个的样式。
   • 示例：

     .btn {  padding: 10px;  font-size: 16px;}.primary-btn @extend .btn;.primary-btn {  background-color: #f00;}
     

5. 运算（Operations）

   • 支持在CSS属性中进行基本的数学运算。
   • 示例：

     .container {  width: 100px + 20px;  height: 50px * 2;}
     

6. 响应式设计（Media Queries）

   • 使用嵌套的媒体查询，为不同屏幕尺寸定义样式。
   • 示例：

     .layout {  width: 100%;  @media (min-width: 768px) {    width: 80%;  }}
     

7. 模块化（Modules）

   • 将样式分解到不同文件中，通过@import导入。
   • 示例：

     // _variables.scss$primary-color: #333;
     

     // style.scss@import "variables";.header {  color: $primary-color;}
     

8. 函数（Functions）

   • 定义函数，处理复杂的逻辑。
   • 示例：

     @function rpm($value) {  @return $value * 60;}.text {  animation: rotate rpm(3s);}
     

9. 条件判断（Control Directives）

   • 根据条件应用不同的样式。
   • 示例：

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

10. 循环（Loops）

    • 使用@for、@each等循环，生成重复的代码。
    • 示例：

      @for $i from 1 to 3 {  .column-#{$i} {    width: 100px * $i;  }}
      

11. 占位符选择器（Placeholders）

    • 定义可重用的样式，但不会生成CSS。
    • 示例：

      %btn {  padding: 10px;}.login-btn {  @extend %btn;  background-color: #f00;}
      

12. 与任务运行工具的集成

    • 使用Grunt、Gulp、Webpack等工具，自动化编译和优化SCSS文件。
    • 示例（Gulp）：

      const gulp = require('gulp');const sass = require('gulp-sass');gulp.task('scss', function() {  return gulp.src('./scss/**/*.scss')    .pipe(sass().on('error', sass.logError))    .pipe(gulp.dest('./css'));});
      

通过掌握这些基础用法，开发者可以更高效地编写和维护CSS代码，充分发挥SCSS作为预处理器的优势。