Is it possible to have a local class inherit all classes imported from a file?

Question

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

/* 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:

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

I don't use bundlers or plugins often but are you talking about something like this? https://stackoverflow.com/questions/11787330/is-it-possible-in-sass-to-inherit-from-a-class-in-another-file — TylerH, Sep 12 '18 at 19:14

score 4 · Accepted Answer · answered Sep 12 '18 at 19:35

4

This is possible using 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; } }

answered Sep 12 '18 at 19:35

vicbyte

3,690
1
11
20

I meant to include a “no sass” note but didn’t, so I’m going to mark your answer as accepted. Thank you for your answer! – Brandon Durham Sep 18 '18 at 15:23

score 3 · Answer 2 · edited Sep 18 '18 at 09:40

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

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

Please refer to the SASS documentation for more details.

Is it possible to have a local class inherit all classes imported from a file?

2 Answers2