Question

我用离子中的scss创建了多个主题。我最终选择了两种方式，但哪种更好，为什么？

第一种方式

 $colors: (
  primary:    #bdc3c7,
  secondary:  #444444,
  danger:     #7f8c8d,
  light:      #34495e,
  dark:       #e74c3c
);
.light-theme {
  // main style for all the commi themes app
  ion-content {
      background-color: color($colors, light);
     }
  @import "main";

}// light-theme

第二种方式

.light-theme {
   $colors: (
  primary:    #bdc3c7,
  secondary:  #444444,
  danger:     #7f8c8d,
  light:      #34495e,
  dark:       #e74c3c
);
  // main style for all the commi themes app
  ion-content {
      background-color: color($colors, light);
     }
  @import "main";

}//

第一种方式是我在课外有颜色，第二种方式是颜色在课堂内，两种方式都有效。我想到如果我们至少有三个主题会发生什么？

Answer 1

只是幻想。 Sassmeister demo。

让我们定义一系列主题：

$themes: (
  default: ( // theme name
    // some colors. colors names are the same for all themes
    primary: red,
    secondary: blue
  ),
  dark: (
    primary: red-dark,
    secondary: blue-dark
  ),
  light: (
    primary: red-light,
    secondary: blue-light
  )
);

然后设置$theme变量。它指的是$themes数组的一个元素。我们将始终从此变量中获取颜色值。

$theme: map-get($themes, default);

无聊的mixin按名称获取颜色值。 $theme在此处使用。

@function color($color-name) {
  @return map-get($theme, $color-name);
}

Mixin stylish重新定义$theme变量的值。我们使用!global标志来使这个变量可以从任何范围访问。此mixin在我们的所有主题选择器之前生成类名.theme-name，但不生成default。

@mixin stylish($theme-name: 'default') {
  $theme: map-get($themes, $theme-name) !global;

  @if ($theme-name == 'default') {
    @content;
  } @else {
    .theme-#{$theme-name} & {
      @content;
    } 
  }
}

现在我们可以编写这样的代码：

.block {
  @include stylish() {
    color: color(primary);
  }

  &__element {
    @include stylish() {
      color: color(primary);
    }

    @include stylish(dark) {
      color: color(primary);
    }

    @include stylish(light) {
      color: color(primary);
    }
  }
}

Css输出：

.block {
  color: red;
}

.block__element {
  color: red;
}

.theme-dark .block__element {
  color: red-dark;
}

.theme-light .block__element {
  color: red-light;
}

这个mixin可以生成所有主题。 Demo

@mixin global-stylish() {
   @include stylish() {
      @content;
    }

    @include stylish(dark) {
      @content;
    }

    @include stylish(light) {
      @content;
    }
}

用法：

&__element {
  @include global-stylish() {
    color: color(secondary);
  }
}

Answer 2

感谢您打开sass方式，这是我的结束代码

    $themes:(
   theme:(
        primary:    #032838,
        secondary:  #868a6f,
        danger:     #ed4039,
        light:      #f3f2f2,
        dark:       #37aad9
    ),
    light:(
        primary:    #34495e,
        secondary:  #e74c3c,
        danger:     #7f8c8d,
        light:      #bdc3c7,
        dark:       #444444
    ),
    dark:(
        primary:    #f3f2f2,
        secondary:  #3D8EB9,
        danger:     #e74c3c,
        light:      #303030,
        dark:       #212121
    ),
    main:(
        black:    #000000,
        white:    #ffffff,
        wisteria:   #8e44ad,
        pomegranate:#c0392b,
        orange:   #f39c12,
        green:    #03A678,
    )
);

$color-key: primary !default;

@function color(
    $theme-name: commi,
    $color-key: $color-key,
    $opacity: 1
){
    $color: null;
    $theme: map-get($themes, $theme-name);

    @if $theme{
        $color: map-get($theme, $color-key );
    } 

    @return $color;
}


@import "light";
@import "dark";

在我的主题中，我称之为

.dark-theme{
  $theme : dark;
  @import "main";
}

scss样式文件中的

 ion-content {
      color: color($theme, light);
      background-color:color($theme, light);
      @if($theme == 'dark'){
        background-color:color($theme, primary);
      }
  }

sass变量正确的方式

2 个答案: