scss这样写，你学会了吗？

scss [1] 在平常业务中肯定会使用，对于切图 css 写的实在是有点太多，但是在你写 css 的同时，你可以让 css 写得和别人有点不一样，那还是比较有意思的。本文是一篇关于 scss 的使用，希望在你的业务中带来思考和帮助

主要会从 scss 下面几点来讲

• scss 中的变量如何复用
• @extend 复用样式
• 如何动态灵活使用 插值 与 for 循环
• @mixin 与 @include 减少重复样式编写
• 占位符 与 scss函数 的使用

正文开始...

@extend

我们以一组标签为例子，在一组标签中，每一种标签的颜色背景属性不一样，但是 宽度 , 高度 属性是一样的

import React, { useState } from "react";
import style from "./index.module.scss";
interface Props {}
const Index: React.FC<Props> = (props) => {
  const {} = props;
  const [tagData, setTagData] = useState([
      name: "tag1",
      value: "tag1",
      name: "tag2",
      value: "tag2",
      name: "tag3",
      value: "tag3",
  return (
    <div className={style["set-app"]}>
      <h1>tag</h1>
      <div className="tag-wrap">
        {tagData.map((v) => (
          <span className={v.name} key={v.name}>
            {v.name}
          </span>
export default Index;

我们看下 scss 如何编写

• 用scss定义了 width, height变量
• global 作用域下定义一个 .tag-common 的类
• 在 .tag-common 类中既使用了 tailwindcss 也使用了 scss 的变量【会不生效，所以sass与tailwindcss不能混用】
• 在 .tag-wrap 中使用了 @extend 来继承 .tag-common 类

$width: 100px;
$height: 30px;
.set-app {
  :global {
    .tag-common {
      // @apply inline-block;
      display: inline-block;
      width: $width;
      height: $height;
    .tag-wrap {
      span {
        @extend .tag-common;

插值与@each循环

现在我们要设置每一个 tag 的颜色

• 与上面有所不同的是，我们使用 tagWrap: "tag-wrap"，在使用这个变量时，我们使用了scss的插值,.#{
• 我们使用 scss 的 @each 循环依次设置了 tag1 、 tag2 、 tag3 的样式

$width: 100px;
$height: 30px;
$tagWrap: "tag-wrap";
.set-app {
  :global {
    .tag-common {
      display: inline-block;
      width: $width;
      height: $height;
    .#{$tagWrap} {
      span {
        @extend .tag-common;
      @each $tagName, $textColor, $bgColor in ("tag1", red, #bf6b97),
        ("tag2", pink, #3070b4), ("tag3", blue, #f5f5f5)
        .#{$tagName} {
          color: $textColor;
          background-color: $bgColor;

看下最终的样式就是已经ok了

嵌套规则

从以上我们发现在 .tag-wrap 的子级我们是直接这样写的

.tag-wrap {
  span {
    @extend .tag-common;
    &:hover {
       font-size: 20px;

以上等价于下面， & 当前元素

.tag-wrap span {}
.tag-wrap span:hover {}

@mixin与@include

如果我们 tag 在多个地方重用，那么我们可以利用 @mixin 来复用样式 tag 的样式，这样这个 @mixin 定义后，我们通过 @include xxx() 就可以调用了

$width: 100px;
$height: 30px;
$tagWrap: "tag-wrap";
@mixin tagStyle($selector, $textColor, $bgColor) {
  .#{$selector} {
    color: $textColor;
    background-color: $bgColor;
.set-app {
  :global {
    .tag-common {
      display: inline-block;
      width: $width;
      height: $height;
    .#{$tagWrap} {
      span {
        @extend .tag-common;
      @each $tagName, $textColor, $bgColor in ("tag1", red, #bf6b97),
        ("tag2", pink, #3070b4), ("tag3", blue, #f5f5f5)
        @include tagStyle($tagName, $textColor, $bgColor);

预览

运算

如果我想要动态改变 tag 的宽度与高度

• 在 scss 里是可以支持 + 、 - 、 * 、 /
• 使用 math.div($width, 2) 除以2,引入了 @use "sass:math" 函数

@use "sass:math";
$width: 100px;
$height: 30px;
$tagWrap: "tag-wrap";
.set-app {
    :global {
        .tag-common {
          display: inline-block;
          width: math.div($width, 2);
          height: $height + 20px;

%xxx 占位符

通过 %xxx 可以使用可以减少你使用

// color.scss
p%name1 {
  color: red;
p%name2 {
  color: blue;

在 index.module.scss 引入, @extend 引入 %name1

@import "./color.scss";
.set-app { 
  :global {
    .public-name .name1 {
      @extend %name1;
    .public-name .name2 {
      @extend %name2;

@if 条件

在 scss 也是可以用 @if 条件的，比如我想根据条件设置不同按钮的颜色

@mixin setColor($class) {
  @if ($class == "success") {
    color: green;
    border: 1px solid green;
  @if ($class == "error") {
    color: red;
    border: 1px solid red;
  @if ($class == "warn") {
    color: orange;
    border: 1px solid orange;
.set-app {
  :global {
    .tag-common {
      display: inline-block;
      width: math.div($width, 2);
      height: $height + 20px;
    .btn-item {
      width: $width;
      height: $height;
      text-align: center;
    .warn-app {
      display: flex;
        @extend .btn-item;
        &.warn {
          @include setColor("warn");
        &.success {
          @include setColor("success");
        &.error {
          @include setColor("error");

这样我就可以根据传入的条件设置不同按钮的颜色了

@function

我们从以上例子中我们会发现 @mixin 与 @include 是配合使用的， @mixin 可以很好的定义一个工具 mixin 可以减少重复类似样式的使用，但在 scss 中也可以使用函数方式

$width: 100px;
@function setWith($width) {
  @return $width + 30px;
.set-app {
  :global {
    .btn-item {
      width: setWith($width);
      height: $height;
      text-align: center;
    .warn-app {
      display: flex;
        @extend .btn-item;
        &.warn {
          @include setColor("warn");
        &.success {
          @include setColor("success");
        &.error {
          @include setColor("error");