是否可以让本地 class 继承从文件导入的所有 classes?
Is it possible to have a local class inherit all classes imported from a file?
假设我有一个 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,您可以像这样使用另一个 class 的属性:
.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;
}
是否可以让 class 从给定目标继承 所有 样式,以便您可以编写类似(伪代码)的内容:
.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; } }
是的,这是可能的。你可以通过使用 SASS 来实现这一点,就像你有 css.
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
border-width: 3px;
}
你可以像
一样使用它
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
@extend 指令通过告诉 Sass 一个选择器应该继承另一个选择器的样式来避免这些问题。
详情请参考SASS documentation
假设我有一个 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,您可以像这样使用另一个 class 的属性:
.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;
}
是否可以让 class 从给定目标继承 所有 样式,以便您可以编写类似(伪代码)的内容:
.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; } }
是的,这是可能的。你可以通过使用 SASS 来实现这一点,就像你有 css.
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
border-width: 3px;
}
你可以像
一样使用它.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
@extend 指令通过告诉 Sass 一个选择器应该继承另一个选择器的样式来避免这些问题。
详情请参考SASS documentation