On this page

其他

js 使用 css 变量

html

<div class="box" style="--color:red"></div>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: var(--color);
}

.moon::before {
  --diameter: 1.2;
  --color: linear-gradient(#8d6e63, #ffe0b2);
}

.moon::before {
  content: "";
  position: absolute;
  width: calc(var(--diameter) * 1em);
  height: calc(var(--diameter) * 1em);
}
</style>

BEM 命名

BEM的命名规矩很容易记：block-name__element-name--modifier-name，也就是模块名 + 元素名 + 修饰器名。可以很好表明从属关系

html

<view class="u-calendar">
  <view class="u-calendar_header_text">
  <!--  表示状态 红色 -->
	<view class="u-calendar_header_text--red"></view>	
	</view>
</view>