Use Nth-Child Value as a SASS Variable

Use nth-child value as a SASS variable

I don't think there's a way to do exactly that. But you can use @for directive to loop through a known number of elements:

$elements: 15;
@for $i from 0 to $elements {
div:nth-child(#{$i + 1}) {
background: rgb($i, $i, $i);
}
}

Using SASS Variables within nth-child?

You need to use variable interpolation to allow nth-child to be a variable.

$galleryGrid: 5;
li:nth-child(#{$galleryGrid}) { margin-left: 0;}

Generates

li:nth-child(5){margin-left:0}

This markup is fine if you have absolute control over the images and layout to ensure that your elements always wrap in such a way that every 5th one begins a new row. If you cannot make such guarantees, setting negative margins on the parent element is a better way to go.

SCSS nth-child in for loop?

You need to wrap the $i as an integer in the :nth-child() like this:

$show-numbers: true;

@if $show-numbers {
@for $i from 1 through 5 {
&:nth-child(#{$i}) {
&:before {
content: '#{$i}';
}
}
}
}

Renders:

:nth-child(1):before {
content:'1';
}

:nth-child(2):before {
content:'2';
}

:nth-child(3):before {
content:'3';
}

:nth-child(4):before {
content:'4';
}

:nth-child(5):before {
content:'5';
}

Need to provide width to every nth child using sass

You can write the @mixin this way:

@mixin datagrid($childNum, $sizes...) {
@for $i from 1 through $childNum {
&:nth-child(#{$i}) {
width: nth($sizes, $i) + 0%;
}
}
}

.tbl-row-3 {
.item {
@include datagrid(3, 40, 30, 30);
}
}

The three dots notation is an argument list, which means that you can pass any number of arguments to the @mixin. You can then use nth and $i to retrieve the values.


As an alternative, instead of defining the width of each child every time that you want a grid, you could also consider creating predefined classes such as .width-40, .width-30... that would hold the desired styles and then apply them to your elements.

Sass nth-child nesting

I'd be careful about trying to get too clever here. I think it's confusing as it is and using more advanced nth-child parameters will only make it more complicated. As for the background color I'd just set that to a variable.

Here goes what I came up with before I realized trying to be too clever might be a bad thing.

#romtest {
$bg: #e5e5e5;
.detailed {
th {
&:nth-child(-2n+6) {
background-color: $bg;
}
}
td {
&:nth-child(3n), &:nth-child(2), &:nth-child(7) {
background-color: $bg;
}
&.last {
&:nth-child(-2n+4){
background-color: $bg;
}
}
}
}
}

and here is a quick demo: http://codepen.io/anon/pen/BEImD

----EDIT----

Here's another approach to avoid retyping background-color:

#romtest {
%highlight {
background-color: #e5e5e5;
}
.detailed {
th {
&:nth-child(-2n+6) {
@extend %highlight;
}
}

td {
&:nth-child(3n), &:nth-child(2), &:nth-child(7) {
@extend %highlight;
}
&.last {
&:nth-child(-2n+4){
@extend %highlight;
}
}
}
}
}

Is there a way to use the n value in :nth-child(n)?

CSS doesn't have support for variables. You could use Less/SASS loops and define it for n up to some value, but that would output almost the same CSS multiple times. Here is Codepen example.

SCSS code to support up to 10 cards:

$n: 10;

@for $i from 1 through $n {
.card:nth-child(#{$i}) {
position: absolute;
left: 10px * $i;
top: 10px * $i;
}
}

But are you sure your approach is correct? Maybe you want to take a step back and look for a different approach. Because this still doesn't scale dynamically, you'll have to predict or limit n to some value. If you were to pick large n, it would result in a big CSS file, which equals longer load times.

How to pass a CSS variable correctly in nth-child?

The only place where you can use CSS custom properties (which are not "variables"!) is in declarations, after the :. This also means that unfortunately you cannot use these custom properties in selectors, or in media queries.

That is also the reason why people really should stop calling them CSS "variables".

You can, however, manipulate styles using Javascript: