zoukankan      html  css  js  c++  java
  • SCSS & SASS Color 颜色函数用法

    最近做一个没有设计师参与的项目,发现 scss 内置的颜色函数还挺好用。记录分享下

    rgba() 

    能省掉手工转换 hex 到 rgb 格式的工作,如以下 SCSS 代码

    $linkColor: #20a0ff;
    
    .box{
      box-shadow: 0 2px 6px 0 rgba($linkColor, 0.3);
      background-color: $linkColor;
    }

    生成的 CSS 代码

    .box{
      box-shadow:0 2px 6px 0 rgba(32,160,255,.3);
      background-color:#20a0ff;
    }

    还可以通过 opacify 增加,通过 transparentize 来减少透明度值,如:

    >> opacify(rgba(125,125,125, 0.6), 0.2)
    rgba(125,125,125, 0.8)
    
    >> transparentize(green, 0.5)
    rgba(0, 255, 0, 0.5)

    lighten / darken / saturate / desaturate 

    lighten / darken 是基于 HSL 明度变换,这个比较适合 button 按钮的 normal 态和 hover 态变换,

    saturate / desaturate 是基于 HSL 饱和度 变换,

    效果可以参考这个在线工具 http://scg.ar-ch.org/

    然而生成的颜色很丑,不实用。

    tint / shade

    阿里的 Ant Design 早期版本使用了 tint / shade 色彩算法,通过增加 白色(tint) 和 黑色(shade) 的占比来生成系列色。

    .demo{
      tint( $base-color, 10% )
      shade( $base-color, 10% )
    }

    这个在项目中会更加实用,不过要注意新生成的颜色与文本对比度需满足 WCAG 2.0 对比度要求。

    在线 checker:http://webaim.org/resources/contrastchecker/

    complement 补色

    在色彩理论中,如果一种颜色与另一种颜色混合后,呈现中性的灰黑色,那么这两种颜色就互为补色。

    好莱坞电影比较常用补色后期手法,强烈的互补色对比,能渲染出比较冲击的视觉系氛围。如下图《天使爱美丽》海报的红绿互补。

    不过现在还没用到这个函数,怕有点 hold 不住:)

  • 相关阅读:
    Spring Boot 自定义 Banner 教程
    Spring Boot 操作 Excel
    Spring Boot 文件上传简易教程
    SpringMVC 处理请求的整个流程?入口?
    实现单例模式的9个方法
    Mybatis Generator最完整配置详解
    接口限流
    添加jar包到本地Maven仓库
    Java ConcurrentModificationException异常原因和解决方法
    RESTful API 设计指南[转]
  • 原文地址:https://www.cnblogs.com/kaiye/p/7553041.html
Copyright © 2011-2022 走看看