是否可以让本地类继承从文件导入的所有类？

Say I have a css file that looks something like this:

假设我有一个看起来像这样的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;
}

With PostCSS you can consume another class’s properties like this:

使用PostCSS,您可以使用另一个类的属性,如下所示:

.another-class {
    composes: content from "other-file.css";
}

… which will be compiled to:

......将编译为:

.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;
}

Is it possible to have a class inherit all styles from a given target so you can write something like (pseudo code):

是否可以让一个类继承给定目标的所有样式,这样你就可以编写类似(伪代码)的东西:

.another-class {
    composes: * from "other-file.css";
}

… that when rendered it comes out like this?

......当渲染出来时,它会像这样出现?

/* 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;
}

2 个解决方案

#1

This is possible using Sass (Scss).

这可以使用Sass(Scss)。

Example:

test1.scss

.elem {
  background: red;
  @import 'test2';
}

test2.scss

.inner {
  background: blue;
}

.outer {
  background: green;
}

@media (max-width: 500px){
  .something {
    color: black;
  }
}

Output:

.elem {
  background: red; }
  .elem .inner {
    background: blue; }
  .elem .outer {
    background: green; }
  @media (max-width: 500px) {
    .elem .something {
      color: black; } }

#2

yes it is possible. you can achieve this by using SASS like you have css.

对的,这是可能的。你可以像使用CSS一样使用SASS实现这一点。

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}

and you can use it like

你可以像使用它一样

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

The @extend directive avoids these problems by telling Sass that one selector should inherit the styles of another selector.

@extend指令通过告诉Sass一个选择器应该继承另一个选择器的样式来避免这些问题。

Please refer to the SASS documentation for more details.

有关更多详细信息,请参阅SASS文档。

#1