How to scope to a class instead of a style - css

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

Related

How to add a tag in front of a sass rule?

I have this scss:
.nav {
&__item {
color: black;
}
}
This compiles to:
.nav__item
Is it possible to modify the above sccs so that it compiles with a tag in front of it, like the following?
a.nav__item
OR
li.nav_item

Here is one way using #at-root. This way avoids having to declare &__item twice.
.nav {
&__item {
color: black;
#at-root {
ul#{&} {
display: block;
}
}
}
}
Complies to
.nav__item {
color: black;
}
ul.nav__item {
display: block;
}

Try this:
.nav {
a#{&}__item {
color: black;
}
}
Output
.nav a.nav__item {
color: black;
}

Even though this is possible using
.nav {
a#{&}__item {
color: black;
}
}
I would highly encourage you to write it like this
a,
li {
&.nav {
&__item {
color: black;
}
}
}

Less inheritance doesn't work

Hi can you check please following code? I want define some styles for class, and next apply same styles for another class. I've used inheritance for that but styles from parent aren't used:
.parent-item {
&:not(:last-child) {
margin-right: 20px;
}
}
.child-item {
&:extend(.parent-item);
//...
}

just add the word all next to the name of the class
.child-item {
&:extend(.parent-item all);
//...
}
for example
.parent-item {
color: green;
background: red;
&:not(:last-child) {
margin-right: 20px;
}
&:last-child {
color: red;
}
&:hover {
color: red;
}
}
.child-item {
&:extend(.parent-item all);
//...
}
result will be
.parent-item,
.child-item {
color: green;
background: red;
}
.parent-item:not(:last-child),
.child-item:not(:last-child) {
margin-right: 20px;
}
.parent-item:last-child,
.child-item:last-child {
color: red;
}
.parent-item:hover,
.child-item:hover {
color: red;
}

How to add a "modified" class for an element in SCSS

Given this scss
.root {
color: red;
&-child {
color: blue;
small & {
font-size: 80%;
}
}
}
This is the CSS I get:
.root {
color: red;
}
.root-child {
color: blue;
}
small .root-child {
font-size: 80%;
}
I want to style .root-child on small differently so the rule I need is:
small.root-child {
font-size: 80%;
}
(Notice no whitespace after small)
How can I do that?

You need to use #at-root and that will remove the white space in your selector, as well as it will be a valid syntax so no issues while you try to compile.
.root {
color: red;
&-child {
color: blue;
#at-root small#{&} {
font-size: 80%;
}
}
}

You can use #at-root like this:
SCSS
.root {
color: red;
&-child {
color: blue;
#at-root {
small#{&} {
font-size: 80%;
}
}
}
}
Compiled:
.root {
color: red;
}
.root-child {
color: blue;
}
small.root-child {
font-size: 80%;
}

:extend() in nested block

This code:
.first {
margin: 19px;
.nested {
color: white;
}
}
.second:extend(.first) {
}
outputs:
.first,
.second {
margin: 19px;
}
.first .nested {
color: white;
}
But if you wrap it in another block:
div {
.first {
margin: 19px;
.nested {
color: white;
}
}
.second:extend(.first) {
}
}
Outputs:
div .first {
margin: 19px;
}
div .first .nested {
color: white;
}
disregards extend? Is this a bug?

From the comment above by #seven-phases-max
No, it's not a bug. :extend is not relative to the selector it's used with; it always requires a complete ("absolute") selector "path". I.e. it should be .second:extend(div .first) no matter where the .second itself is located.
div {
.first {
margin: 19px;
.nested {
color: white;
}
}
.second:extend(div .first) {}
}

its possible css selector inside another selector

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.

Resources