scss基础用法 - 技术栈

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

变量（Variables）
- 用于存储常用的值，如颜色、字体大小等。
- 示例：
  复制代码
```
$primary-color: #333;.header {  color: $primary-color;}
```
嵌套（Nesting）
- 允许在一个选择器中嵌套另一个选择器，反映HTML结构。
- 示例：
  复制代码
```
.nav {  a {    color: #000;    &:hover {      color: #f00;    }  }}
```

混合（Mixins）

组合一组CSS声明，带可选参数。

示例：

复制代码

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

继承（Inheritance）
- 使用@extend指令，让一个选择器继承另一个的样式。
- 示例：
  复制代码
```
.btn {  padding: 10px;  font-size: 16px;}.primary-btn @extend .btn;.primary-btn {  background-color: #f00;}
```
运算（Operations）
- 支持在CSS属性中进行基本的数学运算。
- 示例：
  复制代码
```
.container {  width: 100px + 20px;  height: 50px * 2;}
```
响应式设计（Media Queries）
- 使用嵌套的媒体查询，为不同屏幕尺寸定义样式。
- 示例：
  复制代码
```
.layout {  width: 100%;  @media (min-width: 768px) {    width: 80%;  }}
```

模块化（Modules）

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

示例：

复制代码

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

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

函数（Functions）

定义函数，处理复杂的逻辑。

示例：

复制代码

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

条件判断（Control Directives）

根据条件应用不同的样式。

示例：

复制代码

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

循环（Loops）
- 使用@for、@each等循环，生成重复的代码。
- 示例：
  复制代码
```
@for $i from 1 to 3 {  .column-#{$i} {    width: 100px * $i;  }}
```
占位符选择器（Placeholders）
- 定义可重用的样式，但不会生成CSS。
- 示例：
  复制代码
```
%btn {  padding: 10px;}.login-btn {  @extend %btn;  background-color: #f00;}
```

与任务运行工具的集成

使用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作为预处理器的优势。