sorry but it's confusing to me, somebody knows how it's possible or it's not possible..
#divp {
background-color: lightgrey;
.odiv {
background-color: yellow;
.pp { background-color: black; }
a { color:red; }
}
.pp { background-color: lightgreen; }
a { color:blue; }
}
#divw {
background-color: lightblue;
.odiv {
background-color: blue;
.pp { background-color: white; }
a { color:yellow; }
}
.pp { background-color: green; }
a { color:lightblue; }
}
i want create divs with internal css rules and i dont want to write all the time the same..... like
#diw .odiv .pp { background-color: white }
#diw .odiv .a { color: white }
#diw .odiv .other { color: blue }
is it possible?
Nesting selectors is not possible, but you might want to checkout CSS preprocessors, which will let you do this. http://lesscss.org/ for example.
It is not possible in standard CSS. But it is possible in Sass (and other CSS Preprocessors): http://sass-lang.com/guide#3
It works exactly as you posted in your question:
.div1{
background-color: red;
p{ font-size: 18px; }
}
Will output this:
.div1{ background-color: red }
.div1 p{ font-size: 18px; }
Check out http://sassmeister.com/ for a way to play around with Sass.
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;
}
How could I disable background-color in .button.search so it would fallback to $red value? I can't remove it; I can only overwrite it.
I have
.button {
background-color: {$red};
}
and
.button.search {
background-color: #000;
}
Don't need for any additional setting in search.
.button {
background-color: $red;
}
.button.search {
/* no background-color setting would fallback to $red*/
}
I would do it like this so you can extend the style from .search and it will always fallback with whatever you define and incase you want to have new value for the .active class you can just write background-color: green; after #extend .search;
.search {
background-color: red;
&.active {
#extend .search;
// background-color: green;
}
}
result will be like that
.search, .search.active {
background-color: red;
}
and if you will do that
.search {
background-color: red;
&.active {
#extend .search;
background-color: green;
}
}
and result will be like that
.search, .search.active {
background-color: red;
}
.search.active {
background-color: green;
}
I've a LESS code like:
.block__element {
background: red;
&--modifier {
background: yellow;
}
}
I want more specificity to .block__element--modifier such as:
.block__element.block__element--modifier {
background: yellow:
}
So that it can overrides some other styles.
I can achieve it by:
.block__element {
background: red;
&--modifier.block__element {
background: yellow;
}
}
I want to know is there any easy way?
You could achieve it in a more fancy way using variable interpolation, so that every time you need to increase the specificity of a class/modifier you can use it.
It seems weird at first, but when you'll get used to it you will love it and your code will look much more clean and easy to read.
Check the official documentation
.block__element {
#this: block__element;
background: red;
&.#{this}--modifier-primary {
background: yellow;
}
&.#{this}--modifier-secondary {
background: green;
}
&.#{this}--modifier-tertiary {
background: green;
}
}
.block__element {
background: red;
&&--modifier {
background: yellow;
}
}
link
Is there a way to shorten the following code?
.outer-a {
.inner {
background-color: white;
}
}
.outer-b {
.inner {
background-color: white;
}
}
My expected output:
.outer-a .inner {
background-color: white;
}
.outer-b .inner {
background-color: white;
}
I can't find any functionality in Less documentation that provides this.
You can club the parents like
.outer-a,
.outer-b {
.inner {
background-color: white;
}
}
I guess you could try with commas. Something like this:
.outer-a, .outer-b {
.inner {
background-color: white;
}
}
This then compiles into this
.outer-a .inner,
.outer-b .inner {
background-color: white;
}