SASS循环

<template><div><button class="btn type-1">默认按钮</button><button class="type-2">主要按钮</button><button class="type-3">成功按钮</button><button class="type-4">信息按钮</button><button class="type-5">警告按钮</button><button class="type-6">危险按钮</button></div>
</template>
<script>
export default {}
</script>
<style lang="scss" scoped>
@import "./sass_style.scss";// $btnColors: #000000, #f4b9d1, #7b5194, #262d3b, #1b4fc0, #ffdab9;
// @mixin type-divs($startcolor) {
//   @for $i from 1 through length($startcolor) {
//     .type-#{$i} {
//       $color: nth($startcolor, $i);
//       background: $color;
//       color: #fff;
//       width: 350px;
//       height: 85px;
//       &:hover {
//         background: lighten($color, 10%);
//       }
//       &:active {
//         background: darken($color, 10%);
//       }
//       &:disabled {
//         background: lighten($color, 20%);
//         color: lighten($color, 40%);
//       }
//     }
//   }
// }// @include type-divs($btnColors);
</style>
@charset "utf-8";
$btnColors: #000000, #f4b9d1, #7b5194, #262d3b, #1b4fc0, #ffdab9;@for $i from 1 through length($btnColors) {.type-#{$i}{$color: nth($btnColors, $i);background: $color;color: #fff;width: 350px;height: 85px;&:hover {background: lighten($color, 10%);}&:active {background: darken($color, 10%);}&:disabled {background: lighten($color, 20%);color: lighten($color, 40%);}}}

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/582652.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

EMQTT消息订阅的几种方式

1、普通订阅 生产者 topic&#xff1a; demo 订阅者topic&#xff1a;demo 一个生产者&#xff0c;多个订阅者&#xff0c;每个消息都会被每个订阅者消费 2、分组订阅 &#xff08;1&#xff09;queue模式&#xff1a;特殊的分组&#xff0c;也就是一个分组&#xff0c;里面是…

安卓逆向笔记之AndroidManifest.xml篇

AndroidManifest.xml篇 AndroidManifest.xml是Android应用程序中最重要的文件之一&#xff0c;它包含了应用程序的基本信息&#xff0c;如应用程序的名称、图标、版本号、权限、组件&#xff08;Activity、Service、BroadcastReceiver、Content Provider&#xff09;等等。在应…

企业数据可视化-亿发数据化管理平台提供商,实现一站式数字化运营

近些年来&#xff0c;国内企业数据化管理升级进程持续加速&#xff0c;以物联网建设、人工智能、大数据和5G网络等新技术的发展&#xff0c;推动了数字经济的蓬勃发展&#xff0c;成为维持经济持续稳定增长的重要引擎。如今许多国内中小型企业纷纷摒弃传统管理模式&#xff0c;…

[卷积神经网络]FCOS--仅使用卷积的Anchor Free目标检测

项目源码&#xff1a; FCOShttps://github.com/tianzhi0549/FCOS/ 一、概述 作为一种Anchor Free的目标检测网络&#xff0c;FCOS并不依赖锚框&#xff0c;这点类似于YOLOx和CenterNet&#xff0c;但CenterNet的思路是寻找目标的中心点&#xff0c;而FCOS则是寻找每个像素点&…

css中sprite(css精灵)是什么,有什么优缺点

概念 将多个小图片拼接到一个图片中 。通过 background-position 和元素尺寸调节需要显示的背景图案。 优点 减少 HTTP 请求数&#xff0c;极大地提高页面加载速度 增加图片信息重复度&#xff0c;提高压缩比&#xff0c;减少图片大小 更换⻛格方便&#xff0c; 只需在一张或…

六、Redis 分布式系统

六、Redis 分布式系统 六、Redis 分布式系统6.1 数据分区算法6.1.1 顺序分区6.1.2 哈希分区 6.2 系统搭建与运行6.2.1 系统搭建6.2.2 系统启动与关闭 6.3 集群操作6.3.1 连接集群6.3.2 写入数据6.3.3 集群查询6.3.4 故障转移6.3.5 集群扩容6.3.6 集群收缩 6.4 分布式系统的限制…

go 语言程序设计第4章--复合数据类型

go 语言程序设计第4章–复合数据类型 书籍源代码链接 四种复合数据类型&#xff0c;分别是数组、slice、map 和结构体。 数组和结构体都是聚和类型&#xff0c;他们的值由内存中的一组变量构成。数组和结构体的长度都是固定的。slice 和 map 都是动态数据结构&#xff0c;他们…

mysql保姆安装教程

一.下载install文件 1.进入Mysql官网&#xff0c;点击下载 2.选择MySQL Installer for Windows 3.推荐选择第二个安装包 4.不登陆&#xff0c;开始下载 5.等待下载完成 二.安装前的配置 通过电脑“设置”&#xff0c;检查电脑是否包含中文名&#xff0c;如果包含请重命名 …

C语言 for 循环的所有应用

当使用for循环时&#xff0c;它提供了一种在特定条件下重复执行代码块的方法。以下是一些详细的示例&#xff1a; 基本用法&#xff1a; // 打印数字1到5 for (int i 1; i < 5; i) {printf("%d ", i); } // 输出结果&#xff1a;1 2 3 4 5遍历数组&#xff1a;…

紫光展锐5G扬帆出海 | 东南亚成为5G新热土

东南亚是一块充满活力和潜力的市场&#xff0c;这里人口基数大、年轻消费群体占比高&#xff0c;电子市场在过去几年显著增长。 增速“狂飙”的东南亚手游 近年来&#xff0c;东南亚手游下载量逐年增长&#xff0c;2023 年第一季度下载量突破 21 亿次&#xff0c;贡献了全球近…

2023年12月27日学习记录_加入噪声

目录 1、今日计划学习内容2、今日学习内容1、add noise to audio clipssignal to noise ratio(SNR)加入 additive white gaussian noise(AWGN)加入 real world noises 2、使用kaggel上的一个小demo&#xff1a;CNN模型运行时出现的问题调整采样率时出现bug 3、明确90dB下能否声…

【SD】IP-Adapter 进阶 - 同款人物【2】

测试模型&#xff1a;###最爱的模型\flat2DAnimerge_v30_2.safetensors [b2c93e7a89] 原图&#xff1a; 加入 control1 [IP-Adapter] 加入 control 2 [OpenPose] 通过openpose骨骼图修改人物动作。 加入 control 3 lineart 加入cotrol3 …

VR室内设计仿真教学情景实训

在传统的室内设计教学中&#xff0c;学生往往只能通过想象和图纸来理解空间布局和设计理念。然而&#xff0c;VR技术的出现&#xff0c;使得这一切变得可能。学生可以通过VR设备&#xff0c;身临其境地感受空间布局&#xff0c;观察光线、色彩、材质等元素如何相互作用&#xf…

Unity中Shader 齐次坐标

文章目录 前言一、什么是齐次坐标二、齐次坐标增加分量 w 的意义1、当 w ≠ \neq  0时&#xff1a;2、当 w 0时&#xff1a;3、用方程组&#xff0c;直观的看一下w的意义 前言 在之前的文章中&#xff0c;我们进行了正交相机视图空间转化到裁剪空间的推导。 Unity中Shade…

确保RPA增效提速,这4大风险需注意

如今&#xff0c;已经有越来越多的企业选择实施RPA&#xff0c;将其看作是业务流程优化的利器。如何顺利实施RPA并获得最佳效果&#xff1f; RPA的应用案例&#xff0c;产品及服务遍布新零售、电商、物流、制造、医疗健康、基层政务、互联网教育、企业服务等行业&#xff0c;以…

三大强势大语言模型怎么选?看这篇文章就够了!

现在的人可以有多懒&#xff1f;啊&#xff0c;不&#xff0c;是多聪明&#xff1f;&#xff08;毕竟人和动物的根本区别在于能否制造和使用工具。&#xff09; 遇到任何事情&#xff0c;可以随时大小问。你甚至都不需要手动输入&#xff0c;因为语言输入已经帮你简化了这个步…

linux调试笔记

文章目录 基本启动调试与附加进程断点程序运行控制tui模式查看堆栈与变量监视变量多线程调试 扩展自定义跳转命令解析自定义类型禁用动态库自动加载设置源码路径断点时执行命令gdbserver远程调试 gdb脚本QtCreator调试Linux下处理编译、运行时的一些问题undefined symbol问题-n…

跨域问题解决方案

何为跨域 跨域&#xff08;Cross-Origin&#xff09;指的是在浏览器中&#xff0c;当一个页面&#xff08;或域&#xff09;的 JavaScript 代码试图访问另一个域的资源时&#xff0c;浏览器会阻止该跨域请求。这是由于浏览器的同源策略&#xff08;Same-Origin Policy&#xf…

LeetCode 2660. 保龄球游戏的获胜者:模拟

【LetMeFly】2660.保龄球游戏的获胜者&#xff1a;模拟 力扣题目链接&#xff1a;https://leetcode.cn/problems/determine-the-winner-of-a-bowling-game/ 给你两个下标从 0 开始的整数数组 player1 和 player2 &#xff0c;分别表示玩家 1 和玩家 2 击中的瓶数。 保龄球比…

c++ - 函数的模板特化

目录 模板特化 全特化 偏特化 模板特化 模板进行特化 即&#xff1a; 在原模板类的基础上 &#xff0c;针对特殊类型所进行特殊化的实现方式 。模板特化中分为函数模板特化 与 类模板特化 。 注意&#xff1a;以下示例均已日期类为例 class Date { public:Date(int year 1900…