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:
const dynamicStyles = document.getElementById('dynamicStyles');
const n = getComputedStyle(document.documentElement).getPropertyValue('--n');
dynamicStyles.textContent = `
div p:nth-child(${n}) {
background: green;
padding: 10px;
}
`;
:root {
--n: 3;
}
<style id="dynamicStyles"></style>
<div>
<p>a</p>
<p>b</p>
<p>c</p>
</div>
Related Topics
Two CSS Files Defining Same Class
Ml-Auto Is Not Pushing Navbar Links to the Right
Where Do the Lost Pixels Go in a Percent CSS Layout
Import CSS/Scss File into a Class
Using a Custom (Ttf) Font in CSS
Css: Transform: Translate(-50%, -50%) Makes Texts Blurry
How to Style Disabled Textarea in IE8
Chrome:How to Turn Off User Agent Stylesheet Settings
CSS List Item Width/Height Does Not Work
How to Match 3D Perspective of Real Photo and Object in CSS3 3D Transforms
Combining Border-Top,Border-Right,Border-Left,Border-Bottom in CSS
How to Use CSS Position Sticky to Keep a Sidebar Visible with Bootstrap 4
Rotating Table Header Text with CSS Transforms
In What Circumstances Is Flex-Shrink Applied to Flex Elements and How Does It Work