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

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%);}}}

在这里插入图片描述

相关文章:

SASS循环

<template><div><button class"btn type-1">默认按钮</button><button class"type-2">主要按钮</button><button class"type-3">成功按钮</button><button class"type-4">信息…...

Java超高精度无线定位技术--UWB (超宽带)人员定位系统源码

UWB室内定位技术是一种全新的、与传统通信技术有极大差异的通信新技术。它不需要使用传统通信体制中的载波&#xff0c;而是通过发送和接收具有纳秒或纳秒级以下的极窄脉冲来传输数据&#xff0c;从而具有GHz量级的带宽。 UWB&#xff08;超宽带&#xff09;高精度定位系统是一…...

系列十一、解压文件到指定目录

一、解压文件到指定目录 1.1、需求 Linux的/opt目录有一个文件zookeeper-3.4.11.tar.gz&#xff0c;我现在想把该文件解压至/usr/local/目录&#xff0c;那么应该怎么做呢&#xff1f; 语法&#xff1a;tar -zxvf xxx -C /usr/local/ tar -zxvf zookeeper-3.4.11.tar.gz -C /u…...

PHP Swoole Client

PHP常用socket创建TCP连接&#xff0c;使用CURL创建HTTP连接&#xff0c;为了简化操作&#xff0c;Swoole提供了Client类用于实现客户端功能&#xff0c;并增加了异步非阻塞模式&#xff0c;让用户在客户端也能使用事件循环。 作为客户端使用&#xff0c;Swoole Client可以在F…...

《QDebug 2023年12月》

一、Qt Widgets 问题交流 1. 二、Qt Quick 问题交流 1.Q_REVISION 标记的信号槽或者 REVISION 标记的属性&#xff0c;在子类中访问 Q_REVISION 是 Qt 用来做版本控制的一个宏。以 QQuickWindow 为例&#xff0c;继承后去访问 REVISION 标记的 opacity 属性或者 Q_REVISION…...

sklearn 中matplotlib编制图表

代码 # 导入pandas库&#xff0c;并为其设置别名pd import pandas as pd import matplotlib.pyplot as plt# 使用pandas的read_csv函数读取名为iris.csv的文件&#xff0c;将数据存储在iris_data变量中 iris_data pd.read_csv(data/iris.txt,sep\t)# 使用groupby方法按照&quo…...

【Docker-Dev】Mac M2 搭建docker的redis环境

Redis的dev环境docker搭建 1、前言2、官方文档重点信息提取2.1、创建redis实例2.2、使用自己的redis.conf文件。 3、单机版redis搭建4、redis集群版4.1、一些验证4.2、一些问题 结语 1、前言 本文主要针对M2下&#xff0c;相应进行开发环境搭建&#xff0c;然后做一个文档记录…...

docker +gitee+ jenkins +maven项目 (一)

jenkins环境和插件配置 文章目录 jenkins环境和插件配置前言一、环境版本二、jenkins插件三、环境安装总结 前言 现在基本都是走自动化运维&#xff0c;想到用docker 来部署jenkins &#xff0c;然后jenkins来部署java代码&#xff0c;做到了开箱即用&#xff0c;自动发布代码…...

IDEA 开发中常用的快捷键

目录 Ctrl 的快捷键 Alt 的快捷键 Shift 的快捷键 Ctrl Alt 的快捷键 Ctrl Shift 的快捷键 其他的快捷键 Ctrl 的快捷键 Ctrl F 在当前文件进行文本查找 &#xff08;必备&#xff09; Ctrl R 在当前文件进行文本替换 &#xff08;必备&#xff09; Ctrl Z 撤…...

Ubuntu Desktop 死机处理

Ubuntu Desktop 死机处理 当 Ubuntu Desktop 死机时&#xff0c;除了长按电源键重启&#xff0c;还可以使用如下两种方式处理。 方式1&#xff1a;ctrlaltFn 使用 ctrl alt F3~F6: 切换到其他 tty 命令行。 执行 top 命令查看资源占用最多的进程&#xff0c;然后使用 kill…...

Hermite矩阵

Hermite矩阵 文章目录 Hermite矩阵一、正规矩阵【定义】A^H^矩阵【定理】 A^H^的运算性质【定义】正规矩阵、特殊的正规矩阵【定理】与正规矩阵酉相似的矩阵也是正规矩阵【定理】正规的上(下)三角矩阵必为对角矩阵【定义】复向量的内积【定理】Schmitt正交化 二、酉矩阵&#x…...

HTML 实操试题(二)

创建一个简单的HTML文档&#xff1a; 包含<!DOCTYPE html>声明。包含<html>标签&#xff0c;并设置lang属性为英语。包含<head>标签&#xff0c;其中包含<meta charset"UTF-8">和一个自定义的页面标题。包含<body>标签&#xff0c;其…...

MongoDB 面试题

MongoDB 面试题 1. 什么是MongoDB&#xff1f; MongoDB是一种非关系型数据库&#xff0c;被广泛用于大型数据存储和分布式系统的构建。MongoDB支持的数据模型比传统的关系型数据库更加灵活&#xff0c;支持动态查询和索引&#xff0c;也支持BSON格式的数据存储&#xff0c;这…...

LeetCode 1154. 一年中的第几天:2023年最后一道每日一题

【LetMeFly】1154.一年中的第几天&#xff1a;2023年最后一道每日一题 力扣题目链接&#xff1a;https://leetcode.cn/problems/day-of-the-year/ 给你一个字符串 date &#xff0c;按 YYYY-MM-DD 格式表示一个 现行公元纪年法 日期。返回该日期是当年的第几天。 示例 1&…...

《深入理解JAVA虚拟机笔记》OutOfMemoryError 异常

在《Java 虚拟机规范》的规定里&#xff0c;除了程序计数器外&#xff0c;虚拟机内存的其他几个运行时区域都有发生 OutOfMemoryError &#xff08;下文称 OOM&#xff09;异常的可能。 Java堆溢出 Java 堆用于储存对象实例&#xff0c;我们只要不断地创建对象&#xff0c;并…...

R306指纹识别模块指令系统

一&#xff1a;指令集 1. GR_GetImage 指令代码&#xff1a;01H 功能&#xff1a;从传感器上读入图像存于图像缓冲区 2. GR_GenChar 指令代码&#xff1a;02H 功能&#xff1a;根据原始图像生成指纹特征存于 CharBuffer1 或 CharBuffer2 3. GR_Match 指令代码&#xff…...

redis的搭建及应用(三)-Redis主从配置

Redis主从配置 为提升Redis的高可用性&#xff0c;需要搭建多个Redis集群以保证高可用性。常见搭建方式有&#xff1a;主从&#xff0c;哨兵集群等&#xff0c;本节我们搭建一主二从的多Redis架构。 redis主从安装1主2从的方式配置&#xff0c;以端口号为redis的主从文件夹。 主…...

Java学习,一文掌握Java之SpringBoot框架学习文集(1)

&#x1f3c6;作者简介&#xff0c;普修罗双战士&#xff0c;一直追求不断学习和成长&#xff0c;在技术的道路上持续探索和实践。 &#x1f3c6;多年互联网行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f389;欢迎 &#x1f44d;点赞✍评论…...

javaWeb学生信息管理系统2

一、学生信息管理系统SIMS 一款基于纯Servlet技术开发的学生信息管理系统&#xff08;SIMS&#xff09;&#xff0c;在设计中没有采用SpringMVC和Spring Boot等框架。系统完全依赖于Servlet来处理HTTP请求和管理学生信息&#xff0c;实现了信息的有效存储、检索和更新&#xf…...

Linux Shell 019-文本行处理工具sed

Linux Shell 019-文本行处理工具sed 本节关键字&#xff1a;Linux、Bash Shell、文本行处理工具 相关指令&#xff1a;sed、 sed介绍 sed是Stream Editor&#xff08;流编辑器&#xff09;的缩写&#xff0c;简称流编辑器&#xff1b;用来处理文件的。sed是一行一行读取文件…...

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

JavaScript 中的 ES|QL:利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

C++使用 new 来创建动态数组

问题&#xff1a; 不能使用变量定义数组大小 原因&#xff1a; 这是因为数组在内存中是连续存储的&#xff0c;编译器需要在编译阶段就确定数组的大小&#xff0c;以便正确地分配内存空间。如果允许使用变量来定义数组的大小&#xff0c;那么编译器就无法在编译时确定数组的大…...

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持,SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库(解决显示问题) sudo apt install fonts-wqy…...

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...

Python 实现 Web 静态服务器(HTTP 协议)

目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1&#xff09;下载安装包2&#xff09;配置环境变量3&#xff09;安装镜像4&#xff09;node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1&#xff09;使用 http-server2&#xff09;详解 …...

HubSpot推出与ChatGPT的深度集成引发兴奋与担忧

上周三&#xff0c;HubSpot宣布已构建与ChatGPT的深度集成&#xff0c;这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋&#xff0c;但同时也存在一些关于数据安全的担忧。 许多网络声音声称&#xff0c;这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...