使用Gulp，Sass

时间：2016-04-27 20:55:21

标签： css angularjs material-design

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

MDL基本上是在Web应用程序中使用的Material Design的CSS和JS元素。 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文件包含“theme declaration”变量（如上所示），我当然可以更改，但我认为有一种方法可以从组件外部覆盖它们。

我尝试将以下内容添加到我自己的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;

我不确定凉亭的方式是否会引入组件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 Grey以匹配客户要求的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">

并获得自定义颜色。

1 个答案:

答案 0 :(得分：1)

事实证明，according to the MDL docs你需要在>导入默认变量之前定义变量。＆＃34;

所以MY _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>

Custom MDL Color Pallet Display

相关问题
最新问题