Scss

本文发表于 223 天前，其中的信息可能已经事过境迁

文章摘要 FakeGPT

加载中...|

此内容根据文章生成，并经过人工审核，仅用于文章内容的解释与总结

响应式

当某一个元素需要添加响应式时，可直接在类名样式内添加@media属性

scss

.codeBox {
  display: flex;
  justify-content: center;
  @media screen and (max-width: 576px) {
    scale: 0.5;
  }
}

当需要根据某一个元素进行响应式时，可以生命父级容器并通过 @container 进行响应式

scss

.list {
  // 声明为容器（父级元素）
  container-type: inline-size;
  container-name: product-list;

  .item {
    @container (inline-size > 576px) {
      width: 50%;
    }
    @container (inline-size < 576px) {
      width: 100%;
    }
  }
}

同一元素，样式相同颜色不同

当碰到多个元素样式相同，只是颜色不同时，可通过&.class的方式选中

scss

.bar {
  width: 1em;
  height: 1em;
  border-radius: 1em;
  font-size: 14px;

  &.red {
    background-color: #f75554;
  }

  &.yellow {
    background-color: #f7c54a;
  }

  &.green {
    background-color: #5fcf5f;
  }
}