我是前端,scss颜色函数你用过吗?

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meata http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./btn.css" />
    <link refl="stylesheet" href="./index.css" />
  </head>

  <body>
    <button class="btn type-1">按钮</button>
    <button class="btn type-2">按钮</button>
    <button class="btn type-3">按钮</button>
    <button class="btn type-4">按钮</button>
    <button class="btn type-5">按钮</button>
  </body>
</html>

比方说第一个按钮变成禁用的disabaled

disabled 进入状态之后,它的颜色又变了。

普通css写法:

css 复制代码
.btn.type-1 {
	background: #409eff;
	color: #fff;
}
.btn.type-1:hover {
	background: #73b8ff;
}
.btn.type-1:active {
	background: #0d84ff;
}
.btn.type-1:disabled {
	background: #a6d2ff;
	color: white;
}

.btn.type-2 {
	background: #67c23a;
	color: #fff;
}
.btn.type-2:hover {
	background: #85cf60;
}
.btn.type-2:disabled {
	background: #a3db87;
	color: #dff3d5;
}

.btn.type-3 {
	background: #8b590f;
	color: #fff;
}
.btn.type-3:hover {
	background: #b97614;
	color: #fff;
}
.btn.type-3:disabled {
	background: #e6941a;
	color: #f0bf76;
}

.btn.type-4 {
	background: #f54343;
	color: #fff;
}
.btn.type-4:hover {
	background: #f87373;
}
.btn.type-4:active {
	background: #f21313;
}
.btn.type-4:diabled {
	background: #faa4a4;
	color: white;
}

.btn.type-5 {
	background: #6c6d71;
	color: #fff;
}
.btn.typ-5:hover {
	background: #535457;
}
.btn.type-5:disabled {
	background: #9fa0a4;
	color: #d4d4d5;
}

单看一个:

css 复制代码
.btn.type-1 {
	background: #409eff;
	color: #fff;
}
.btn.type-1:hover {
	background: #73b8ff;
}
.btn.type-1:active {
	background: #0d84ff;
}
.btn.type-1:disabled {
	background: #a6d2ff;
	color: white;
}

写成scss

css 复制代码
.btn.type-1 {
	background: #409eff;
	color: #fff;
        .btn.type-1:hover {
                background: #73b8ff;
        }
        .btn.type-1:active {
                background: #0d84ff;
        }
        .btn.type-1:disabled {
                background: #a6d2ff;
                color: white;
        }
}

这样改:

css 复制代码
.btn.type-1 {
	background: #409eff;
	color: #fff;
        &:hover {
                background: #73b8ff;
        }
        &:active {
                background: #0d84ff;
        }
        &:disabled {
                background: #a6d2ff;
                color: white;
        }
}

编译出来的效果完全一样。 scss会被编译成css。

css 复制代码
.btn.type-1 {
	background: #409eff;
	color: #fff;
}
.btn.type-1:hover {
	background: #73b8ff;
}
.btn.type-1:active {
	background: #0d84ff;
}
.btn.type-1:disabled {
	background: #a6d2ff;
	color: white;
}

接下来处理颜色(这些颜色之间存在某种一定的关系,比方说第一个背景颜色,它是一个普通状态下的颜色,那么当鼠标移入,它就相当于普通颜色的变种,所以不要把颜色给它写死了,)。

所以我们就把普通状态下的颜色写成一个变量。

css 复制代码
.btn.type-1 {
    $color: #409eff;   
    background: $color;
    color: #fff;
    &:hover {
        background: #73b8ff;
    }
    &:active {
        background: #0d84ff;
    }
    &:disabled {
        background: #a6d2ff;
        color: white;
    }
}

鼠标移入的时候,我们就基于普通颜色的color进行去改动运算。

重点:SASS中的lighten函数

利用sass里边一个函数叫lighten(意思就是把颜色变淡一些些),俩参数,一个是颜色$color,一个是变淡的百分比$amount

css 复制代码
.btn.type-1 {
    $color: #409eff;   
    background: $color;
    color: #fff;
    &:hover {
        background: lighten($color, 10%);
    }
    &:active {
        background: #0d84ff;
    }
    &:disabled {
        background: #a6d2ff;
        color: white;
    }
}

然后编译后的结果:

css 复制代码
background: lighten($color, 10%);

会编译成

css 复制代码
background: #73b88ff;

解释 10%

颜色有很多表达方式:

比方说HSL色相环表达方式:

其中L的百分比就表示亮度,L表示lighten亮度。百分比越高,就相当于颜料里边加白色。那边这个亮度就会越来越高,那个圈圈就会越往左上边走。到达100%的时候就完全变成白色了。

反之呢,如果说这个百分比越低呢,就相当于是往颜料里边加黑色,那么到达0%的时候呢,就是黑色。

重点:darken就是把颜色变深一点

css 复制代码
.btn.type-1 {
    $color: #409eff;   
    background: $color;
    color: #fff;
    &:hover {
        background: lighten($color, 10%);
    }
    &:active {
        background: darken($color, 10%);
    }
    &:disabled {
        background: #a6d2ff;
        color: white;
    }
}

就是鼠标移上去变淡了,按下去就变深了。

接着改disabled

css 复制代码
.btn.type-1 {
    $color: #409eff;   
    background: $color;
    color: #fff;
    &:hover {
        background: lighten($color, 10%);
    }
    &:active {
        background: darken($color, 10%);
    }
    &:disabled {
        background: lighten($color, 20%);
        color: white;
    }
}

这样就完成了。第一个按钮,就只有一个颜色,叫做基准颜色。基准颜色一变,那么其他的都相应跟着改动。

重点:其他按钮 循环写 用@for

其他按钮也可以按照这个原理去写,但是尽量不要手动一个一个去写,尽量用循环去循。

sass里边就有一个数组功能:

首先先定义一组颜色colors

css 复制代码
$colors: #409eff, #67c23a, #8b590f, #f54343, #6c6d71;

.btn.type-1 {
    $color: #409eff;   
    background: $color;
    color: #fff;
    &:hover {
        background: lighten($color, 10%);
    }
    &:active {
        background: darken($color, 10%);
    }
    &:disabled {
        background: lighten($color, 20%);
        color: white;
    }
}
css 复制代码
$colors: #409eff, #67c23a, #8b590f, #f54343, #6c6d71;

@for $i from 1 through length($colors) {
  .btn.type-#{$i} {
    $color: nth($colors, $i);   
    background: $color;
    color: #fff;
    &:hover {
        background: lighten($color, 10%);
    }
    &:active {
        background: darken($color, 10%);
    }
    &:disabled {
        background: lighten($color, 20%);
        color: white;
    }
  }
}

自动,维护省事,尽量自动不要手动。

写完。

相关推荐
友友马21 小时前
『 QT 』QT控件属性全解析 (一)
开发语言·前端·qt
不想上班只想要钱21 小时前
vue3+vite创建的项目,运行后没有 Network地址
前端·javascript·vue.js
流***陌21 小时前
手办盲盒抽赏小程序前端功能设计:兼顾收藏需求与抽赏乐趣
前端·小程序
岁月宁静1 天前
在富文本编辑器中封装实用的 AI 写作助手功能
前端·vue.js·人工智能
金士顿1 天前
为什么MainWindow.xaml绑定的datacontext,EtherCATSuiteCtrl.xaml直接用了?
前端
533_1 天前
[css] flex布局中的英文字母不换行问题
前端·css
浮游本尊1 天前
React 18.x 学习计划 - 第四天:React Hooks深入
前端·学习·react.js
future_studio1 天前
聊聊 Unity(小白专享、C# 小程序 之 日历、小闹钟)
前端·html
Yeats_Liao1 天前
Go Web 编程快速入门 · 04 - 请求对象 Request:头、体与查询参数
前端·golang·iphone
祈祷苍天赐我java之术1 天前
Redis 数据类型与使用场景
java·开发语言·前端·redis·分布式·spring·bootstrap