当前位置: 首页 > news >正文

【SCSS变量】$ | | var | @for | @include | @function | @each 等常用方法使用

SCSS优点:编写清晰、无冗余、语义化的CSS,减少不必要的重复工作

  • 1、变量声明(`$`)和使用
  • 2、使用 `&` 代替父元素
  • 3、在HTML中使用 `:style={'--name': 动态值}`自定义属性,在SCSS中用`var(--name)`函数绑定动态变量值,
  • 4、混合器(`@mixin`)和使用(`@include`)
  • 5、给混合器(`@mixin`)定义参数,并使用(`@include`)传参
  • 6、使用 (`@extend`)继承 公共类(元素名、.class)
  • 7、使用 `@function` 和 `@for` 循环语句
  • 8、使用 `@each` 循环

1、变量声明($)和使用

// 用`$`声明变量
$color: red;
// 直接使用变量
span{ color: $color; }
p{ background: $color; }

2、使用 & 代替父元素

a{color: red;&:hover{color: green;}
}

3、在HTML中使用 :style={'--name': 动态值}自定义属性,在SCSS中用var(--name)函数绑定动态变量值,

<p v-for="(item, index) in dataList" :key="index" :style="{'--color': item.color}" >{{item.name}}</p>
p{color: var(--color);
}
data() {return {dataList: [{name: '红色', color: 'red'},{name: '蓝色', color: 'blue'},{name: '绿色', color: 'green'}]}
}

在这里插入图片描述

4、混合器(@mixin)和使用(@include

// @mixin声明混合器: 圆角边框@mixin round-radius{border-radius: 10px;background: red;
}
// 使用@include 混入一段重用样式的代码p{ width: 200px;height: 100px;@include round-radius;  // @include 使用变量
}

5、给混合器(@mixin)定义参数,并使用(@include)传参

// @mixin声明混合器: a不同状态的颜色参数@mixin link-colors($normal, $hover, $visited) {color: $normal;&:hover { color: $hover; }&:visited { color: $visited; }
}
// @include 使用变量,并传入实际参数a {@include link-colors(blue, red, green);
}
//Sass编译后最终生成的是:a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

6、使用 (@extend)继承 公共类(元素名、.class)

//通过选择器继承继承样式
.error {border: 1px solid red;background-color: #fdd;
}.seriousError {@extend .error; // 继承border-width: 3px;
}

7、使用 @function@for 循环语句

@for 指令可在限制的范围内重复输出格式,每次按要求(变量的值)对输出结果做出变动。
包含两种格式:
@for $var from <start> through <end>  代表 [ start, end ]
@for $var from <start> to <end>  代表 [ start, end },不包含end
另外,$var 可以是任何变量,如 $i;<start><end> 必须是整数值。

用法一:

@for $i from 1 through 3 {.item-#{$i} { width: 2em * $i; }
}
// 编译为:
.item-1 { width: 2em; }
.item-2 { width: 4em; }
.item-3 { width: 6em; }

用法二:

// 使用scss随机添加 box-shadow,参数 n = 个数,range = 范围@function multiple-box-shadow($n, $range) {$value: '#{random($range)}px #{random($range)}px #FFF';@for $i from 1 through $n {$value: '#{$value} , #{random($range)}px #{random($range)}px #FFF';}@return unquote($value); // 去掉''引号
}
#stars {width: 1px;height: 1px;box-shadow: multiple-box-shadow(700, 2000);
}

利用box-shadow随机画出小方块组成星空
在这里插入图片描述

8、使用 @each 循环

@each $color in red, blue, green{.#{$color}-icon {background-image: url('/images/#{$color}.png');}
}
// 编译为:
.red-icon {background-image: url('/images/red.png'); 
}
.blue-icon {background-image: url('/images/blue.png'); 
}
.green-icon {background-image: url('/images/green.png'); 
}

相关文章:

【SCSS变量】$ | | var | @for | @include | @function | @each 等常用方法使用

SCSS优点&#xff1a;编写清晰、无冗余、语义化的CSS&#xff0c;减少不必要的重复工作 1、变量声明&#xff08;$&#xff09;和使用2、使用 & 代替父元素3、在HTML中使用 :style{--name: 动态值}自定义属性&#xff0c;在SCSS中用var(--name)函数绑定动态变量值&#xff…...

iOS 17 及 Xcode 15.0 Beta7 问题记录

1、iOS 17 真机调试问题 iOS 17之后&#xff0c;真机调试Beta版本必须使用Beta版本的Xcode来调试&#xff0c;用以前复制DeviceSupport 方式无法调试&#xff0c;新的Beta版本Xcode中&#xff0c;已经不包含 iOS 17目录。如下图&#xff1a; 解决方案&#xff1a; 1&#x…...

docker-maven-plugin直接把镜像推到私有仓库

接着上篇 推送到本地docker 我们已经把服务做成镜像推到docker&#xff0c;也可以通过docker login 私有地址&#xff0c;去push。麻烦 直接上代码 1、pom改动 <properties><docker.registry>eco-registry.XXX.com</docker.repostory><docker.registry…...

2023年机器学习项目—布匹缺陷检测

2023年机器学习项目———布匹缺陷检测 测试环境: CPU : 12th Gen Intel Core™ i7-12700H 2.70 GHz GPU : NVIDIA RTX3070Ti RAM : 32GB Matlab R2020a (Deep Learning Tools) 注 :Data文件过大 未上传 一.神经网络概述 1. 卷积神经网络概念 人工神经网络(Artific…...

RabbitMQ---订阅模型分类

订阅模型分类 在之前的模式中&#xff0c;我们创建了一个工作队列。 工作队列背后的假设是&#xff1a;每个任务只被传递给一个工作人员。 在这一部分&#xff0c;我们将做一些完全不同的事情 - 我们将会传递一个信息给多个消费者。 这种模式被称为“发布/订阅”。 订阅模型示意…...

pycharm添加虚拟环境以及虚拟环境安装pytorch

file、settings、interpreter、add interpreter、add local interpreter 记住不要勾选inherit&#xff0c;不然会把主环境的东西继承到虚拟环境。 创建前可以先点existing看看有没有已经建好的虚拟环境 有的时候pycharm有问题&#xff0c;创建了虚拟环境没有显示。找一个.py文…...

Git企业开发控制理论和实操-从入门到深入(三)|分支管理

前言 那么这里博主先安利一些干货满满的专栏了&#xff01; 首先是博主的高质量博客的汇总&#xff0c;这个专栏里面的博客&#xff0c;都是博主最最用心写的一部分&#xff0c;干货满满&#xff0c;希望对大家有帮助。 高质量博客汇总 然后就是博主最近最花时间的一个专栏…...

【VsCode】SSH远程连接Linux服务器开发,搭配cpolar内网穿透实现公网访问(1)

文章目录 前言1、安装OpenSSH2、vscode配置ssh3. 局域网测试连接远程服务器4. 公网远程连接4.1 ubuntu安装cpolar内网穿透4.2 创建隧道映射4.3 测试公网远程连接 5. 配置固定TCP端口地址5.1 保留一个固定TCP端口地址5.2 配置固定TCP端口地址5.3 测试固定公网地址远程 前言 远程…...

LC-1267. 统计参与通信的服务器(枚举 + 计数)

1267. 统计参与通信的服务器 中等 这里有一幅服务器分布图&#xff0c;服务器的位置标识在 m * n 的整数矩阵网格 grid 中&#xff0c;1 表示单元格上有服务器&#xff0c;0 表示没有。 如果两台服务器位于同一行或者同一列&#xff0c;我们就认为它们之间可以进行通信。 请…...

Linux TCP协议——三次握手,四次挥手

一、TCP协议介绍 TCP协议是可靠的、面向连接的、基于字节流的传输层通信协议。 TCP的头部结构&#xff1a; 源/目的端口号: 表示数据是从哪个进程来, 到哪个进程去;&#xff08;tcp是传输层的协议&#xff0c;端与端之间的数据传输&#xff0c;在TCP和UDP协议当中不会体现出I…...

人机对抗智能-部分可观测异步智能体协同(POAC)

环境链接&#xff1a;数据中心-人机对抗智能 (ia.ac.cn)http://turingai.ia.ac.cn/data_center/show/10 1.环境配置 Ubuntu 20.04 Anaconda python版本3.6 1.1 安装torch0.4.1失败 参考文章&#xff1a; 安装torch0.4.1的神坑_torch0.4.1_DEMO_Tian的博客-CSDN博客 co…...

数学——七桥问题——图论

当涉及数学&#xff0c;有很多不同的话题可以讨论。你是否有特定的数学领域、概念或问题想要了解更多&#xff1f;以下是一些常见的数学领域和主题&#xff0c;你可以选择一个或者告诉我你感兴趣的具体内容&#xff0c;我将很乐意为你提供更多信息&#xff1a; 代数学&#xff…...

python 模块lxml 处理 XML 和 HTML 数据

xpath&#xff1a;https://blog.csdn.net/randy521520/article/details/132432903 一、安装 XPath (XML Path Language) 是一门在 HTML\XML 文档中查找信息的语言&#xff0c;可用来在 HTML\XML 文档中对元素和属性进行遍历。 pip install lxml二、使用案例 from lxml impo…...

SpringBoot 统⼀功能处理

统⼀功能处理 1. 拦截器2. 统⼀异常处理3. 统⼀数据返回格式 1. 拦截器 Spring 中提供了具体的实现拦截器&#xff1a;HandlerInterceptor&#xff0c;拦截器的实现分为以下两个步骤&#xff1a; 创建⾃定义拦截器&#xff0c;实现 HandlerInterceptor 接⼝的 preHandle&…...

hadoop 报错 java.io.IOException: Inconsistent checkpoint fields

背景: 使用了格式化,导致首重了新的集群ID org.apache.hadoop.hdfs.server.common.InconsistentFSStateException: Directory /work1/home/hadoop/dfs/data/current/BP-1873526852-172.16.21.30-1692769875005 is in an inconsistent state: namespaceID is incompatible with …...

workbench连接MySQL8.0错误 bad conversion 外部组件 异常

阿里云搭建MySQL实用的版本是8.0 本地安装的版本是: workbench 6.3 需要升级到&#xff1a; workbench 8.0 https://dev.mysql.com/downloads/workbench/...

Qt Scroll Area控件设置,解决无法显示全部内容,且无法滚动显示问题。

前言&#xff0c;因为要显示很多条目的内容&#xff0c;原来是用Vertical Layout控件里面嵌套Horizontal layout显示了很多行控件&#xff0c;发现最简单的方法就是使用滚动条控件&#xff0c;但是无论如何调整需要滚动的控件高度&#xff0c;始终无法滚动显示内容。也就是说添…...

【Java架构-包管理工具】-Maven私服搭建-Nexus(三)

本文摘要 Maven作为Java后端使用频率非常高的一款依赖管理工具&#xff0c;在此咱们由浅入深&#xff0c;分三篇文章&#xff08;Maven基础、Maven进阶、私服搭建&#xff09;来深入学习Maven&#xff0c;此篇为开篇主要介绍Maven私服搭建-Nexus 文章目录 本文摘要1. Nexus安装…...

守护进程(精灵进程)

目录 前言 1.如何理解前台进程和后台进程 2.守护进程的概念 3.为什么会存在守护进程 4.如何实现守护进程 5.测试 总结 前言 今天我们要介绍的是关于守护进程如何实现&#xff0c;可能有小伙伴第一次听到守护进程这个概念&#xff0c;感觉很懵&#xff0c;知道进程的概念&…...

csdn冷知识:如何在csdn里输入公式或矩阵

目录 1 输入公式 2 输入矩阵 3 如何输入复杂公式 4 如何修改&#xff0c;已经生成的公式 1 输入公式 进入编辑模式点击右边的菜单&#xff1a;公式然后进入公式编辑器&#xff0c;选择右边的 ... 可以选择大括号等&#xff0c;右边还有矩阵符号选择后你需要创建几行几列的…...

React Native 导航系统实战(React Navigation)

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

是否存在路径(FIFOBB算法)

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

AI+无人机如何守护濒危物种?YOLOv8实现95%精准识别

【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而&#xff0c;传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案&#xff0c;能够实现大范围覆盖并远程采集数据。尽管具备这些优势&#xf…...

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人&#xff0c;点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置&#xff0c;详见说明文档 成功后&#xff0c;记录Webhook 2 API文档说明 点击设置说明 查看自…...

LOOI机器人的技术实现解析:从手势识别到边缘检测

LOOI机器人作为一款创新的AI硬件产品&#xff0c;通过将智能手机转变为具有情感交互能力的桌面机器人&#xff0c;展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家&#xff0c;我将全面解析LOOI的技术实现架构&#xff0c;特别是其手势识别、物体识别和环境…...

Leetcode33( 搜索旋转排序数组)

题目表述 整数数组 nums 按升序排列&#xff0c;数组中的值 互不相同 。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&#xff09;上进行了 旋转&#xff0c;使数组变为 [nums[k], nums[k1], …, nums[n-1], nums[0], nu…...