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 ]
Related
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;
}
I am using CSS Less for my project, I have a problem to write the following CSS into Less.
Here color is same for .btn and .header but how can I simplify using Less?
variable
#whiteColor: #fff;
CSS
.btn{
border: none;
color: #ffffff;
}
.header{
color:#fff;
}
I have written in the following way. Is there any way to write it in only one statement?
.btn{
border: none;
color: #whiteColor;
}
.header{
background:#whiteColor;
}
Assuming that the property to which the value needs to be assigned is the same (color), you can do it using a single statement by grouping selectors. Below is a sample snippet:
#whiteColor: #fff;
.btn{
border: none;
}
.btn,
.header{ /* selector grouping */
color: #whiteColor;
}
Note that you don't even need Less for the above if the color is not going to change often. I would assume this is the case because of how closely the variable name is coupled to the color and in that case you can use pure CSS like in the below snippet.
.btn {
border: none;
}
.btn,
.header { /* selector grouping */
color: #fff;
}
/* Just for demo */
body {
background: black;
}
<div class='btn'>Some button</div>
<div class='header'>Some header</div>
If the properties are different (one has white as its color while the other has it as background), then it cannot be simplified into a single line even while using Less.
You can use a parametric mixin and property name interpolation like in the below snippets but these only complicate the situation than simplify it.
/* If color is same but property is different */
#whiteColor: #fff;
.apply-white-color(#property){
&{
#{property}: #whiteColor;
}
}
.btn{
border: none;
.apply-white-color(color); /* the property to which white color should applied is passed as parameter */
}
.header{
.apply-white-color(background);
}
/* If property is same but color is different */
#whiteColor: #fff;
#redColor: #f00;
.apply-color(#value){
&{
color: #value;
}
}
.btn{
border: none;
.apply-color(#whiteColor); /* the color which should applied is passed as parameter */
}
.header{
.apply-color(#redColor);
}
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 have a simple border style say:
.border
{
/*content*/
}
I want several other classes to inherit this border style. Can this be done in CSS only?
Or do I need to specify it in HTML also?
I want:
.actionArea : .border
{
/*content */
}
Or can this only be done in HTML like:
<div class="actionArea border"/>
It would be very annoying if the latter is only possible.
Update
This works good enough, but still is a bit ugly:
.actionArea, .otherArea, .anotherArea
{
/*border specification */
}
.actionArea
{
/*area specification/*
}
.otherArea
{
/*area specification/*
}
(..)
You will need to use a CSS framework such as LESS for such a thing.
You may use sass . Probably it is the nesting feature you want to use http://sass-lang.com/#nesting
table.hl {
margin: 2em 0;
td.ln {
text-align: right;
}
}
li {
font: {
family: serif;
weight: bold;
size: 1.2em;
}
}
Or as Oded said you can use LESS . LESS is having some interesting feature one of them is mixins . This is not exactly inheritance but it gives you has-a relationship in css
Example copied from LESS
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
.bordered;
}
.post a {
color: red;
.bordered;
}