css - 是否可以让本地类继承从文件导入的所有类?
问题描述
假设我有一个看起来像这样的 css 文件:
/* Base styles */
.content {
background-color: var(--background);
color: var(--text);
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 16px;
line-height: 1.5;
text-rendering: optimizeLegibility;
}
@media (min-width: 500px) {
.content {
font-size: 22px;
}
}
/* Headers */
h2 {
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 24px;
font-weight: 700;
}
/* Classes */
.small-caps {
font-feature-settings: "tnum";
letter-spacing: 0.05em;
}
使用 PostCSS,您可以像这样使用另一个类的属性:
.another-class {
composes: content from "other-file.css";
}
...将被编译为:
.another-class {
background-color: var(--background);
color: var(--text);
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 16px;
line-height: 1.5;
text-rendering: optimizeLegibility;
}
是否可以让一个类从给定目标继承所有样式,以便您可以编写类似(伪代码)的内容:
.another-class {
composes: * from "other-file.css";
}
……渲染出来的效果是这样的?
/* Base styles */
.another-class .content {
background-color: var(--background);
color: var(--text);
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 16px;
line-height: 1.5;
text-rendering: optimizeLegibility;
}
@media (min-width: 500px) {
.another-class .content {
font-size: 22px;
}
}
/* Headers */
.another-class h2 {
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 24px;
font-weight: 700;
}
/* Classes */
.another-class .small-caps {
font-feature-settings: "tnum";
letter-spacing: 0.05em;
}
解决方案
这可以使用 Sass (Scss)。
例子:
test1.scss
.elem {
background: red;
@import 'test2';
}
test2.scss
.inner {
background: blue;
}
.outer {
background: green;
}
@media (max-width: 500px){
.something {
color: black;
}
}
输出:
.elem {
background: red; }
.elem .inner {
background: blue; }
.elem .outer {
background: green; }
@media (max-width: 500px) {
.elem .something {
color: black; } }
推荐阅读
- javascript - nextjs:序列化从“/prints/[name]”中的“getStaticProps”返回的“.product”时出错
- python - Pandas - 合并常用列的合并操作
- php - 在没有插件的永久链接 woocommerce 中删除 /shop/ 或 /product/
- c++ - 什么系列的内在函数将完成这个 paeth 预测代码?
- visual-studio-code - Windows 中的 Visual Studio Code 管理员权限
- flutter - 如何在颤振中创建垂直虚线?
- python - 我随机收到一个新的 500 未知错误超时
- javascript - 为什么我总是抛出这个错误?节点:内部 /modules /cjs/ loader 944 Throw Err ^(找不到模块)
- react-native - 基于来自 MQTT 的订阅编写文本
- javascript - 如何从 SvelteKit 应用程序发送安全的 API 请求,而不在客户端显示 API 密钥?