zoukankan      html  css  js  c++  java
  • [SCSS] Access Theme Color Values With Sass

    Manage the color palette used in your stylesheets by creating a map of variables and a function to access the values by key. This allows you to update the colors in one location to re-theme your application and eliminate manual find and replace.

    $color-primary: indigo;
    $color-secondary: blue;
    $color-support: deeppink;
    
    $theme-colors: (
      primary: $color-primary,
      secondary: $color-secondary,
      support: $color-support
    );
    
    @function theme-color($key) {
      @return map-get($theme-colors, $key);
    }
    
    
    h1 {
      color: theme-color(primary);
    }
    
    a {
      background-color: theme-color(support);
      color: #fff;
      border-radius: 8px;
      text-decoration: none;
      padding: 0.25em 0.75em;
    
      &:hover {
        background-color: scale-color(theme-color(support), $lightness: -30%);
      }
    }
  • 相关阅读:
    中国式沟通
    10 表连接优化
    09 优化数据访问
    07 SQL优化技术
    06 执行计划
    04 系统和对象统计信息
    03 找出性能问题
    02 key concept
    Xpert 调优
    JavaWeb_常用功能_01_文件上传
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12914353.html
Copyright © 2011-2022 走看看