CSS - 妙用Sass

官方文档：https://www.sass.hk/docs/

1.例1：

@each $theme in $themeList {$themeKey: map-get($theme, 'key');@media screen and (weex-theme: $themeKey) {.btnText {max-width: 150px;@include font(map-get($theme, 'medFont'),map-get($theme, 'subFontSize'),400);@include ellipsis(2);color: map-get($theme, 'whiteColor');text-align: center;}}
}
/**
@each $theme in $themeList:
这是一个循环语句，遍历$themeList中的每个主题。
$themeList通常是一个包含多个主题的列表，每个主题是一个映射（map）。$themeKey: map-get($theme, 'key'):
从当前主题映射中获取键值为'key'的值，并将其赋值给$themeKey。
map-get是Sass中的一个函数，用于从映射中获取值。@media screen and (weex-theme: $themeKey):
这是一个媒体查询，用于根据不同的主题键值应用不同的样式。
weex-theme是一个自定义的媒体查询特性，用于在Weex中切换主
*/

• 【逐步分析】
  xx组件：

<style lang="scss" scoped>
@import './config.scss';@each $theme in $themeList {$themeKey: map-get($theme, 'key');@media screen and (weex-theme: $themeKey) {.btnText {max-width: 150px;@include font(map-get($theme, 'medFont'),map-get($theme, 'subFontSize'),400);@include ellipsis(2);color: map-get($theme, 'whiteColor');text-align: center;}}
}
</style>

config.scss:

@charset "UTF-8";@import '../../../css/uiStandard/scss/default.scss';
$themeList: $mideaO100, $default;

default.scss：

@charset "UTF-8";
$default:(key: 'default',bigBtnHeight: 92px,
);