scss 通过方法和地图管理颜色。

Posted 2021-05-18

// Palettes color map
$palettes: (
  mapPrimary: (
    xlight: material-color('indigo', '200'), // #9FA8DA
    light: material-color('indigo', '500'), // #3F51B5
    base: material-color('indigo', '700'), // #303F9F
    dark: material-color('indigo', '900') // #1A237E
  ),
  mapAccent: (
    light: material-color('cyan', '100'), // #B2EBF2
    base: material-color('cyan', '500'), // #00BCD4
    dark: material-color('cyan', '700') // #0097A7
  ),
  mapWarn: (
    light: material-color('red', '100'), // #FFCDD2
    base: material-color('red', 'a400'), // #FF1744
    dark: material-color('red', '700') // #D32F2F
  ),
  mapWhite: (
    base: #fff,
    dark: material-color('grey', '200') // #EEEEEE
  ),
  mapBlack: (
    base: #000
  ),
  mapGray: (
    xlight: material-color('grey', '100'), // #F5F5F5
    light: material-color('grey', '300'), // #E0E0E0
    base: material-color('grey', '500'), // #9E9E9E
    dark: material-color('grey', '800'), // #424242
    xdark: material-color('grey', '900') // #212121
  ),
  mapGreen: (
    base: material-color('green', '500') // #4CAF50
  )
);

// Allow access via function
@function palette($palette, $tone: 'base') {
  @return map-get(map-get($palettes, $palette), $tone);
}

// Use a color
.foo {
  border-bottom: 2px solid palette(mapGray, light);
}