Let's say I have this class:
.dark-theme {
background-color: black;
}
Can I refer to it within my css file? Something like ...
.some-class {
dark-theme;
padding: 5px;
}
a {
dark-theme;
color: white;
}
I have two solutions to accomplish this.
Solution 1:
Use css variables.
(Not really doing what you asked for but good to know if you're not using any preprocessors)
:root {
--color-bg-dark: black;
}
.some-class {
background-color: var(--color-bg-dark);
}
Solution 2:
Use sass which is a css preprocessor and put your reusable rules in a mixin.
#mixin applyDarkTheme {
background-color: black;
color: white;
// Some other rules
}
.some-class {
#include applyDarkTheme;
}
Related
I've got this Scss:
.top {
background-color: red;
&--checked {
background-color: yellow;
}
&--completed {
background-color: green;
}
}
Which compiles correctly to this:
.top {
background-color: red;
}
.top--checked {
background-color: yellow;
}
.top--completed {
background-color: green;
}
This is probably simple, but I'm trying to add an additional style for elements using both "top--checked" and "top--completed", but nested within top.
Something like this (in CSS):
.top--checked.top--completed {
background-color: blue;
}
I'm just not sure on how to achieve this, as chaining ampersands doesn't seem to produce the desired effect.
I think the best you can do would be something like this:
&--checked#{&}--completed {
background: blue;
}
Is there a way to put made classes inside a class?
e.g.
.my-upper-class{ .hidden-md, .hidden-sm, .hidden-lg}
Not with plain CSS, but with Sass, like so—
.hidden-sm {
background: red;
}
.hidden-md {
color: blue;
}
.hidden-lg {
font-size: 1em;
}
.my-upper-class {
#extend .hidden-sm;
#extend .hidden-md;
#extend .hidden-lg;
}
which outputs the final CSS as below, which is pretty much what you are looking for.
.hidden-sm, .my-upper-class {
background: red;
}
.hidden-md, .my-upper-class {
color: blue;
}
.hidden-lg, .my-upper-class {
font-size: 1em;
}
Can I call a rule in the statement of another rule if CSS?. Something like this:
.myFirstRule
{
color: white;
}
.mySecondRule
{
width: 1000px;
myFirstRule;
}
Thank you.
Sorry about my english
In CSS, no you cannot. You can, however, apply styles to more than one selector at a time, such as:
.myFirstRule, .mySecondRule { color: white; }
Make sure each selector is separated with a comma, and you're good to go.
You can't do this in plain CSS but there are two solutions to your problem:
One: Use multiple selectors
<div class="myFirstRule mySecondRule"></div>
Two: Use SASS (or LESS, I suppose)
.myFirstRule {
color: white;
}
.mySecondRule {
width: 1000px;
.myFirstRule;
}
Alternatively, still with SASS, you could also do this with a mixin:
// Define here
#mixin reusableRule {
color: white;
}
.myFirstRule {
#include reusableRule;
}
.mySecondRule {
width: 1000px;
#include reusableRule;
}
No, you can't do that in pure CSS.. You can use a comma or , to apply a property to multiple selectors
Try this:
.myFirstRule, .mySecondRule {
color:white;
}
.mySecondRule
{
width: 1000px;
}
This is not possible with normal CSS, but you could try using SASS or LESS instead, which both compile to CSS. They allow this behavior through "mixins".
For example in LESS you could do:
.myFirstRule
{
color: white;
}
.mySecondRule
{
width: 1000px;
.myFirstRule;
}
which would generate CSS:
.myFirstRule
{
color: white;
}
.mySecondRule
{
width: 1000px;
color: white;
}
I am trying to learn SASS. I got this snippet working but the generated css is awful in my opinion. I would like all this css to go in te same .container{ }. Not three different as shown below.
SASS:
.container{
#extend %clearfix;
#extend %text-truncate;
#include border-radius(10px);
}
Genereted css:
.container{
...clear fix
}
.container{
...text-truncate
}
.container{
...clear border-radius
}
What I want:
.container{
...clear fix
...text-truncat
...clear border-radius
}
This is the nature of #extend. If you change your extend classes to ordinary classes, the way it works the way it does is revealed.
#mixin my-mixin() {
padding: 1em;
}
.a {
color: red;
}
.b {
border: 1px solid;
}
.foo {
#extend .a;
#extend .b;
#include my-mixin();
}
Compiles to:
.a, .foo {
color: red;
}
.b, .foo {
border: 1px solid;
}
.foo {
padding: 1em;
}
Using an extend only class simply suppresses the name from the output. If your extend classes are not intended for reuse, then they are better suited as a mixin.
See also: https://codereview.stackexchange.com/a/27910/26722
I need to equation without combine multiple scopes, for example with native:
Native CSS:
.test
{
color: black;
}
.demo
{
color: black;
}
And combined version:
.test,
.demo
{
color: black;
}
But i need following:
#.test: .demo; // Something like that equation, all test classes equal demo class
.demo
{
color: black;
}
If it isnt possible with CSS, as a last resort i can use LESS
In LESS, You can use the extend function to achieve this.
.demo
{
color: black;
}
.test:extend(.demo){}; /* extends the properties of the .demo */
/* .test:extend(.demo all){}; /* the all keyword would extend nested sub classes of .demo also */
Demo
in addition to Harrys answer, you can do this with SASS like this:
.demo
{
color: black;
}
.test {
#extend .demo;
}
[ SAMPLE ]