CSS-妙用Sass

官方文档： .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, );