官方文檔: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,
);