Can I use? http://caniuse.com/ Less http://lesscss.org Cool Libraries Bootstrap from Twitter Jetstrap
这是一个创建于 231 天前的主题，其中的信息可能已经有所发展或是发生改变。
我有个组件的 html 定义如下：
<!-- 默认卡片 --> <div class="card"> <div class="card__title"> <slot name="title"/> </div> <div class="card__content"> <slot name="content"/> </div> </div> <!-- 警告卡片样式 --> <div class="card card--warning"> <div class="card__title"> <slot name="title"/> </div> <div class="card__content"> <slot name="content"/> </div> </div> <!-- 成功卡片样式 --> <div class="card card--successful"> <div class="card__title"> <slot name="title"/> </div> <div class="card__content"> <slot name="content"/> </div> </div> 关于 SCSS 我的想法是：
// 这里定义了普通卡片样的样式 .card { &__title { color: gray; } &__content { color: lightgray; } // 定义警告卡片的样式 &--warning { &__title { color: yellow; } &__content { color: lightyello; } } // 定义成功卡片的样式 &--successful { &__title { color: green; } &__content { color: lightgreen; } } } 但是警告卡片和成功卡片的 css 会被解析为：
.card--warning__title {} .card--warning__content {} .card--successful__title {} .card--successful__content {} 也就是我实际使用的时候如果要使用警告卡片，实际上 html 应该写成：
<div class="card card--warning"> <div class="card--warning__title"><!-- 而不是 <div class="card__title"> --> <slot name="title"/> </div> <div class="card-warning__content"><!-- 而不是 <div class="card__content"> --> <slot name="content"/> </div> </div> 请问各位老哥，SCSS 应该怎么来定义样式啊？
 | 1 Perry 231 天前 via iPhone 这种问题直接问 LLM 就能有答案 |
 | 2 P233 231 天前  1 & 在 scss 里是 parent reference 的意思，全部平级就好了 |
 | 4 zhuoyan 231 天前 // 这里定义了普通卡片样的样式 .card { &__title { color: gray; } &__content { color: lightgray; } // 定义告卡片的样式 &--warning { .card { &__title { color: yellow; } &__content { color: lightyello; } } } // 定义成功卡片的样式 &--successful { .card { &__title { color: green; } &__content { color: lightgreen; } } } } |
 | 5 dallaslu 231 天前 & 是指 parent ，根据层级来的。你需要的是固定前缀 |
 | 6 17681880207 OP @Perry 可能我问的方式有问题，尝试了几次，给不出我满意的回答。DeepSeek r1 甚至还会陷入死循环。 |
| 7 Perry 227 天前 via iPhone @17681880207 这种简单的可能不需要用 R1 ，Sonnet 3.5 试试看 |
Select Language