Embedding CSS styles?

Question

I'm curious as to if there's a way to do something like this:

#sidemenu {
  .unlocked {
    color: blue;
  }

  .locked {
    color: red;
  }
}

instead of having to write it out like:

#sidemenu .unlocked {
    color: blue;
}

#sidemenu .locked {
    color: red;
}

research about SASS SCSS

L777
– L777

2016-04-09 20:25:03 +00:00
Commented Apr 9, 2016 at 20:25 — L777
– L777, Commented Apr 9, 2016 at 20:25
You're in for a magical discovery.

Aziz
– Aziz

2016-04-09 23:54:17 +00:00
Commented Apr 9, 2016 at 23:54 — Aziz
– Aziz, Commented Apr 9, 2016 at 23:54

Scott Marcus · Accepted Answer · 2016-04-09 20:25:14Z

4

You can't have CSS like this natively, but you can write it initially using CSS pre-processors such as LESS and SASS. The code is then compiled down to normal CSS.

answered Apr 9, 2016 at 20:25

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

AndrewL64 · Accepted Answer · 2016-04-09 20:29:14Z

2

Switch from vanilla css to SASS/SCSS or LESS.

Here's a small example between vanilla CSS and SCSS:

Vanilla CSS:

#sidemenu .unlocked {
    color: blue;
}

#sidemenu .locked {
    color:red;
}

SCSS:

#sidemenu
    .unlocked {
        color: blue;
    }

    .locked {
        color:red;
    }
}

As Scott mentioned above, the SASS/SCSS/LESS will be recompiled to Vanilla CSS once it's rendered though.

answered Apr 9, 2016 at 20:29

AndrewL64

16.4k8 gold badges51 silver badges87 bronze badges

Collectives™ on Stack Overflow

Embedding CSS styles?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related