Is there a way to achieve something like below in SASS without indicating .group-left twice?
.wrapper .group-left {
background-color: blue;
}
.wrapper-child:nth-child(2n+2) .group-left {
background: red;
}
I was trying to put ampersand after .group-left, but doesn't work. So, I have to re-select .group-left. Below is my current code.
.wrapper {
&:nth-child(2n+2) .group-left {
background-color: red;
}
.group-left {
background-color: blue;
}
}
Please advise. Thank you.
You could use parent selector and invert your nesting in sass
.group-left {
.wrapper & {
background-color: blue;
}
.wrapper-child:nth-child(2n+2) & {
background: red;
}
}
Try this.
.wrapper {
.group-left {
background-color: blue;
}
}
.wrapper-child {
&:nth-child(2n+2) {
.group-left {
background: red;
}
}
}
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 not to repeat the clip-item class when using nth-child in a nested SCSS? The output should be in the CSS below.
CSS
.clip-item .group-left {
padding: 0;
}
.clip-item .group-left:nth-child(2n+1) {
background: blue;
}
.clip-item .group-left:nth-child(2n+2) {
background: gray;
}
.clip-item .group-right {
padding: 0;
}
.clip-item .group-right:nth-child(2n+1) {
background: blue;
}
.clip-item .group-right:nth-child(2n+2) {
background: gray;
}
I was trying to do it like below. Even though t's working, I don't think it's the right way / clean way.
SCSS
.group-left {
.clip-item & {
padding: 0;
}
.clip-item:nth-child(2n+1) & {
background: blue;
}
.clip-item:nth-child(2n+2) & {
background: gray;
}
}
.group-right {
.clip-item & {
padding: 0;
}
.clip-item:nth-child(2n+1) & {
background: blue;
}
.clip-item:nth-child(2n+2) & {
background: gray;
}
}
I'm also using the .group-left and .group-right classes in some content, that's why I used it as a parent selector.
EDIT:-
Each group wrappers are wrapped in a clip-item div. Below is my markup:-
<div class="clip-item">
<div class="group-left">
<div class="group-right">
</div>
<div class="clip-item">
<div class="group-left">
<div class="group-right">
</div>
If you need to group the selectors in this way - I recommend using the #at-root directive.
The #at-root directive causes one or more rules to be emitted at the
root of the document, rather than being nested beneath their parent
selectors.
.group-left {
.clip-item & {
padding: 0;
}
#at-root .clip-item &:nth-child(2n+1) {
background: blue;
}
#at-root .clip-item &:nth-child(2n+2) {
background: gray;
}
}
.group-right {
.clip-item & {
padding: 0;
}
#at-root .clip-item &:nth-child(2n+1) {
background: blue;
}
#at-root .clip-item &:nth-child(2n+2) {
background: gray;
}
}
Codepen demo (View compiled CSS)
Also, this CSS-tricks post may help:
The & doesn't allow you to selectively traverse up your nested
selector tree to a certain place and only use a small portion of the
compiled parent selector that you want to use.
By the way:
Even though it's working, I don't think it's the right way
Well actually, your SCSS is not currently producing the requested CSS.
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;
}
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.