我用离子中的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";
}//
第一种方式是我在课外有颜色,第二种方式是颜色在课堂内,两种方式都有效。我想到如果我们至少有三个主题会发生什么?
答案 0 :(得分:0)
让我们定义一系列主题:
$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);
}
}
答案 1 :(得分:0)
感谢您打开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);
}
}