CSS - 妙用Sass

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

1.例1:

bash 复制代码
@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组件:
bash 复制代码
<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:

bash 复制代码
@charset "UTF-8";

@import '../../../css/uiStandard/scss/default.scss';
$themeList: $mideaO100, $default;

default.scss:

bash 复制代码
@charset "UTF-8";
$default:(
  key: 'default',
  bigBtnHeight: 92px,
);
相关推荐
谷歌开发者1 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强1 小时前
Chrome和IE获取本机ip地址
前端
天***88961 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*1 小时前
zabbix安装
linux·运维·前端·网络·zabbix
清羽_ls1 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友2 小时前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全
西陵2 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构
10年前端老司机3 小时前
Promise 常见面试题(持续更新中)
前端·javascript
潘小安3 小时前
跟着 AI 学 (一)- shell 脚本
前端·ci/cd·vibecoding
clownAdam4 小时前
Chrome性能优化秘籍
前端·chrome·性能优化