相关文章推荐
眼睛小的西装  ·  海南大学差旅费管理办法-财务处·  1 年前    · 
逼格高的领结  ·  跳楼自杀的人是以为什么原因? - 知乎·  1 年前    · 
英勇无比的野马  ·  旅行车还得看奥迪,A6 Avant ...·  1 年前    · 
另类的毛衣  ·  一口气看完签到盲盒称霸修仙界 - 抖音·  1 年前    · 
温文尔雅的镜子  ·  “逍遥游”着的使徒子:以漫画为起点,不断创新 ...·  1 年前    · 
Code  ›  scss这样写,你学会了吗?开发者社区
写代码 scss
https://cloud.tencent.com/developer/article/2314017
面冷心慈的保温杯
1 年前
Maic

scss这样写,你学会了吗?

前往小程序,Get 更优 阅读体验!
立即前往
腾讯云
开发者社区
文档 建议反馈 控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
首页
学习
活动
专区
工具
TVP 最新优惠活动
返回腾讯云官网
Maic
首页
学习
活动
专区
工具
TVP 最新优惠活动
返回腾讯云官网
社区首页 > 专栏 > scss这样写,你学会了吗?

scss这样写,你学会了吗?

作者头像
Maic
发布 于 2023-08-18 18:38:31
287 0
发布 于 2023-08-18 18:38:31
举报
文章被收录于专栏: Web技术学苑 Web技术学苑

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

主要会从 scss 下面几点来讲

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

正文开始...

@extend

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

代码语言: javascript
复制

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 类
代码语言: javascript
复制

$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 的样式
代码语言: javascript
复制

$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 的子级我们是直接这样写的

代码语言: javascript
复制

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

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

代码语言: javascript
复制

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

@mixin与@include

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

代码语言: javascript
复制

$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" 函数
代码语言: javascript
复制

@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 可以使用可以减少你使用

代码语言: javascript
复制

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

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

代码语言: javascript
复制

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

@if 条件

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

代码语言: javascript
复制

@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 中也可以使用函数方式

代码语言: javascript
复制

$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");
 
推荐文章
眼睛小的西装  ·  海南大学差旅费管理办法-财务处
1 年前
逼格高的领结  ·  跳楼自杀的人是以为什么原因? - 知乎
1 年前
英勇无比的野马  ·  旅行车还得看奥迪,A6 Avant e-tron即将亮相国内|新车|概念车|电动车|月销量_网易订阅
1 年前
另类的毛衣  ·  一口气看完签到盲盒称霸修仙界 - 抖音
1 年前
温文尔雅的镜子  ·  “逍遥游”着的使徒子:以漫画为起点,不断创新着国漫|一条狗_网易订阅
1 年前
今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
Code - 代码工具平台
© 2024 ~ 沪ICP备11025650号