使用 Gulp、Sass 定制 Material Design Lite 主题答案

【问题标题】：Customized Variation on Material Design Lite Theme with Gulp, Sass使用 Gulp、Sass 定制 Material Design Lite 主题
【发布时间】：2016-04-27 20:55:20
【问题描述】：

我想使用 Material Design Lite“主题”的“定制版本”。

MDL 基本上是 Material Design 的 CSS 和 JS 元素提取出来用于 Web 应用程序。 MDL 有一个 Web 界面，通过该界面可以使用他们的自定义主题颜色变体之一生成 CSS 文件，但我们想使用我们自己的颜色。

我已经使用Bower 安装了 MDL，并且正在使用 SASS 编译 components。

除了更改 MDL 文件本身之外，如何/在哪里可以覆盖以下变量：

$color-primary: $palette-red-500 !default;
$color-primary-dark: $palette-red-700 !default;
$color-accent: $palette-pink-A200 !default;

// Our primary is dark, so use $color-dark-contrast for overlaid text.
$color-primary-contrast: $palette-green-700 !default;
// Our accent is dark, so use $color-dark-contrast for overlaid text.
$color-accent-contrast: $palette-green-700 !default;

更多细节：

在 MDL 代码库中，bower_components/material-design-lite/src/_variables.scss 文件包含“@987654324@”变量（如上所示），我当然可以对其进行更改，但我认为有一种方法可以从组件外部覆盖它们。

我尝试将以下内容添加到我自己的assets/styles/common/_variables.scss 文件中，但我认为在Gulp 到达此文档时，在组件内 声明的变量已经用于创建样式：

@import "../../bower_components/material-design-lite/src/color-definitions";
//@import "functions";

$trim-color-classes: false !default;

// Use color primarily for emphasis. Choose colors that fit with
// your brand and provide good contrast between visual components.
$color-primary: $palette-red-500 !default;
$color-primary-dark: $palette-red-700 !default;
$color-accent: $palette-pink-A200 !default;

// Our primary is dark, so use $color-dark-contrast for overlaid text.
$color-primary-contrast: $palette-green-700 !default;
// Our accent is dark, so use $color-dark-contrast for overlaid text.
$color-accent-contrast: $palette-green-700 !default;

我不确定 bower 引入组件 CSS（作为单个文件）的方式是否需要更改：

"material-design-lite": {
  "main": [
    "./src/material-design-lite.scss",
    "./src/mdlComponentHandler.js"
  ]
}

常见的方法是简单地更改 MDL 源 _variables.scss 文件吗？

如果它对从事自定义 Material Design Color Pallet 的其他人有用：

我使用了angular-md-color.com/#/，它实际上是根据自定义十六进制值生成角码块格式的十六进制值：

angular.module('myApp', ['ngMaterial']).config(function ($mdThemingProvider, palettes) {

        var customPrimary = {
                '50': '#ffffff',
                '100': '#ffffff',
                '200': '#ffffff',
                '300': '#ffffff',
                '400': '#fbfaf8',
                '500': '#f2efe8',
                '600': '#e9e4d8',
                '700': '#e0d8c7',
                '800': '#d6cdb7',
                '900': '#cdc2a7',
                'A100': '#ffffff',
                'A200': '#ffffff',
                'A400': '#ffffff',
                'A700': '#c4b697'
        };
        $mdThemingProvider
                .definePalette('customPrimary', 
                                                customPrimary);

        var customAccent = {
                '50': '#233f95',
                '100': '#2847a9',
                '200': '#2d50be',
                '300': '#355bcf',
                '400': '#4a6bd4',
                '500': '#5e7cd9',
                '600': '#889ee3',
                '700': '#9cafe8',
                '800': '#b1bfed',
                '900': '#c6d0f1',
                'A100': '#889ee3',
                'A200': '#738dde',
                'A400': '#5e7cd9',
                'A700': '#dae1f6'
        };
        $mdThemingProvider
                .definePalette('customAccent', 
                                                customAccent);

        var customWarn = {
                '50': '#ffb280',
                '100': '#ffa266',
                '200': '#ff934d',
                '300': '#ff8333',
                '400': '#ff741a',
                '500': '#ff6400',
                '600': '#e65a00',
                '700': '#cc5000',
                '800': '#b34600',
                '900': '#993c00',
                'A100': '#ffc199',
                'A200': '#ffd1b3',
                'A400': '#ffe0cc',
                'A700': '#803200'
        };
        $mdThemingProvider
                .definePalette('customWarn', 
                                                customWarn);

        var customBackground = {
                '50': '#989794',
                '100': '#8c8a87',
                '200': '#7f7d7b',
                '300': '#72716e',
                '400': '#656462',
                '500': '#585755',
                '600': '#4b4a48',
                '700': '#3e3d3c',
                '800': '#31312f',
                '900': '#242423',
                'A100': '#a5a4a1',
                'A200': '#b1b0ae',
                'A400': '#bebdbb',
                'A700': '#171716'
        };
        $mdThemingProvider
                .definePalette('customBackground', 
                                                customBackground);

     $mdThemingProvider.theme('default')
             .primaryPalette('customPrimary')
             .accentPalette('customAccent')
             .warnPalette('customWarn')
             .backgroundPalette('customBackground')
});

根据您最终想要的格式，您可以使用HSL Color Picker 之类的工具来获取相应的值（rgb、hsl）。

我将覆盖 Material Design Gray 以匹配客户要求的 Benjamin Moore Paint 值：

$palette-grey:
"152, 151, 148"
"140, 138, 135"
"127, 125, 123"
"114, 113, 110"
"101, 100, 98"
"88, 87, 85"
"75, 74, 72"
"62, 61, 60"
"49, 49, 47"
"36, 36, 35"
"165, 164, 161"
"177, 176, 174"
"190, 189, 187"
"23, 23, 22";

$palette-grey-50: nth($palette-grey, 1);
$palette-grey-100: nth($palette-grey, 2);
$palette-grey-200: nth($palette-grey, 3);
$palette-grey-300: nth($palette-grey, 4);
$palette-grey-400: nth($palette-grey, 5);
$palette-grey-500: nth($palette-grey, 6);
$palette-grey-600: nth($palette-grey, 7);
$palette-grey-700: nth($palette-grey, 8);
$palette-grey-800: nth($palette-grey, 9);
$palette-grey-900: nth($palette-grey, 10);
$palette-grey-A100: nth($palette-grey, 11);
$palette-grey-A200: nth($palette-grey, 12);
$palette-grey-A400: nth($palette-grey, 13);
$palette-grey-A700: nth($palette-grey, 14);

    // Grey

    .mdl-color-text--grey {
        color: unquote("rgb(#{$palette-grey-500})") !important;
    }

    .mdl-color--grey {
        background-color: unquote("rgb(#{$palette-grey-500})") !important;
    }

    .mdl-color-text--grey-50 {
        color: unquote("rgb(#{$palette-grey-50})") !important;
    }

    .mdl-color--grey-50 {
        background-color: unquote("rgb(#{$palette-grey-50})") !important;
    }

    .mdl-color-text--grey-100 {
        color: unquote("rgb(#{$palette-grey-100})") !important;
    }

    .mdl-color--grey-100 {
        background-color: unquote("rgb(#{$palette-grey-100})") !important;
    }

    .mdl-color-text--grey-200 {
        color: unquote("rgb(#{$palette-grey-200})") !important;
    }

    .mdl-color--grey-200 {
        background-color: unquote("rgb(#{$palette-grey-200})") !important;
    }

    .mdl-color-text--grey-300 {
        color: unquote("rgb(#{$palette-grey-300})") !important;
    }

    .mdl-color--grey-300 {
        background-color: unquote("rgb(#{$palette-grey-300})") !important;
    }

    .mdl-color-text--grey-400 {
        color: unquote("rgb(#{$palette-grey-400})") !important;
    }

    .mdl-color--grey-400 {
        background-color: unquote("rgb(#{$palette-grey-400})") !important;
    }

    .mdl-color-text--grey-500 {
        color: unquote("rgb(#{$palette-grey-500})") !important;
    }

    .mdl-color--grey-500 {
        background-color: unquote("rgb(#{$palette-grey-500})") !important;
    }

    .mdl-color-text--grey-600 {
        color: unquote("rgb(#{$palette-grey-600})") !important;
    }

    .mdl-color--grey-600 {
        background-color: unquote("rgb(#{$palette-grey-600})") !important;
    }

    .mdl-color-text--grey-700 {
        color: unquote("rgb(#{$palette-grey-700})") !important;
    }

    .mdl-color--grey-700 {
        background-color: unquote("rgb(#{$palette-grey-700})") !important;
    }

    .mdl-color-text--grey-800 {
        color: unquote("rgb(#{$palette-grey-800})") !important;
    }

    .mdl-color--grey-800 {
        background-color: unquote("rgb(#{$palette-grey-800})") !important;
    }

    .mdl-color-text--grey-900 {
        color: unquote("rgb(#{$palette-grey-900})") !important;
    }

    .mdl-color--grey-900 {
        background-color: unquote("rgb(#{$palette-grey-900})") !important;
    }

    .mdl-color--grey-A100 {
        background-color: unquote("rgb(#{$palette-grey-A100})") !important;
    }

    .mdl-color--grey-A200 {
        background-color: unquote("rgb(#{$palette-grey-A200})") !important;
    }

    .mdl-color--grey-A400 {
        background-color: unquote("rgb(#{$palette-grey-A400})") !important;
    }

    .mdl-color--grey-A700 {
        background-color: unquote("rgb(#{$palette-grey-A700})") !important;
    }

现在我可以这样做了：

<header class="mdl-layout__header mdl-color--grey-800 mdl-color-text--grey-100">

并获得自定义颜色。

【问题讨论】：

标签： css angularjs material-design

【解决方案1】：

事实证明，according to the MDL docs 您必须“在导入默认变量之前定义变量。”

所以我的_variables.scss如上：

@import "../../bower_components/material-design-lite/src/color-definitions";
//@import "functions";

$trim-color-classes: false !default;

// Use color primarily for emphasis. Choose colors that fit with
// your brand and provide good contrast between visual components.
$color-primary: $palette-grey-500 !default;
$color-primary-dark: $palette-grey-700 !default;
$color-accent: $palette-indigo-A200 !default;

// Our primary is dark, so use $color-dark-contrast for overlaid text.
$color-primary-contrast: $palette-yellow-500 !default;
// Our accent is dark, so use $color-dark-contrast for overlaid text.
$color-accent-contrast: $palette-yellow-500 !default;

并且该文件需要在之前调用 Bower 将材料设计组件导入添加到我的main.scss 文件中：

@import "common/_variables";

// Automatically injected Bower dependencies via wiredep (never manually edit this block)
// bower:scss
@import "../../bower_components/material-design-lite/src/material-design-lite.scss";
// endbower

// more import statements here

为了查看我的自定义颜色，我将它放在一个页面中：

<div class="content-grid mdl-grid" style="height:300px">
    <div class="mdl-cell mdl-cell--1-col mdl-color--grey-50">
      50
    </div>
    <div class="mdl-cell mdl-cell--1-col mdl-color--grey-100">
      100
    </div>
    <div class="mdl-cell mdl-cell--1-col mdl-color--grey-200">
      200
    </div>
    <div class="mdl-cell mdl-cell--1-col mdl-color--grey-300">
      300
    </div>
    <div class="mdl-cell mdl-cell--1-col mdl-color--grey-400">
      400
    </div>
    <div class="mdl-cell mdl-cell--1-col mdl-color--grey-500">
      500
    </div>
    <div class="mdl-cell mdl-cell--1-col mdl-color--grey-600">
      600
    </div>
    <div class="mdl-cell mdl-cell--1-col mdl-color--grey-700">
      700
    </div><div class="mdl-cell mdl-cell--1-col mdl-color--grey-A100">
      A100
    </div>
    <div class="mdl-cell mdl-cell--1-col mdl-color--grey-A200">
      A200
    </div>
    <div class="mdl-cell mdl-cell--1-col mdl-color--grey-A400">
      A400
    </div>
    <div class="mdl-cell mdl-cell--1-col mdl-color--grey-A700">
      A700
    </div>
</div>

【讨论】：