ToB企服应用市场:ToB评测及商务社交产业平台

标题: CSS - 妙用Sass [打印本页]

---

作者: 南七星之家    时间: 8 小时前
标题: CSS - 妙用Sass
官方文档：https://www.sass.hk/docs/
1.例1：

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

复制代码

• 【逐步分析】
  xx组件：
  

1. <style lang="scss" scoped>
2. @import './config.scss';
4. @each $theme in $themeList {
5.   $themeKey: map-get($theme, 'key');
6.   @media screen and (weex-theme: $themeKey) {
7.     .btnText {
8.       max-width: 150px;
9.       @include font(map-get($theme, 'medFont'),map-get($theme, 'subFontSize'),400);
10.       @include ellipsis(2);
11.       color: map-get($theme, 'whiteColor');
12.       text-align: center;
13.     }
14.   }
15. }
16. </style>

复制代码

config.scss:

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

复制代码

default.scss：

1. @charset "UTF-8";
2. $default:(
3.   key: 'default',
4.   bigBtnHeight: 92px,
5. );

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4