目录

SASS循环

html 复制代码
<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>
css 复制代码
@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%);
      }
    }
  }
 
本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
乆夨(jiuze)20 分钟前
简述下npm,cnpm,yarn和pnpm的区别,以及跟在后面的-g,--save, --save-dev代表着什么
前端·npm·node.js
好_快1 小时前
Lodash源码阅读-baseFindIndex
前端·javascript·源码阅读
好_快1 小时前
Lodash源码阅读-strictIndexOf
前端·javascript·源码阅读
liangshanbo12151 小时前
下载 CSS 文件阻塞,会阻塞构建 DOM 树吗?会阻塞页面的显示吗?
前端·css
Student_Zhang1 小时前
推荐一个数据加密的框架GMObjc(iOS)
前端·算法·github
还是鼠鼠2 小时前
Node.js 模块化概念详细介绍
前端·javascript·vscode·node.js·web
TE-茶叶蛋2 小时前
前端npm包- CropperJS
前端·npm·node.js
正小安2 小时前
前端高阶面试题·每日一题
前端·javascript·面试题
胡桃夹夹子3 小时前
vue 仿deepseek前端开发一个对话界面
前端·javascript·vue.js
returnShitBoy6 小时前
前端面试:如何实现预览 PDF 文件?
前端·pdf