SCSS @for loop: Get the length from data attribute

2019-08-29 01:07发布

问题:

Is there a way to get the length of the loop from the data attribute of an element in scss @for loop?

So let's say the element .fesa-info has [data-fesa-num="8"] as an attribute. Can I use the 8 in place of 10 in the code below, and if so how?

@for $i from 1 through 10 {
    .box:nth-of-type(#{$i}) {
        background-color: darken(cornflowerblue, 0% + $i);
    }
}

回答1:

Create a data attribute in the body tag and assign it a value:

<body data-fesa-num="8">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</body>

Store the value of the data attribute in a variable and replace 10 with the the variable name:

body {
    $no: attr('data-fesa-num');

    .box {
        height: 100px;
        width: 100px;
        margin-bottom: 10px;
    }
    @for $i from 1 through $no {
            .box:nth-of-type(#{$i}) {
                    background-color: darken(cornflowerblue, 0% + $i);
            }
    }
}

You can also declare the variable in a separate block of the body tag:

body {
    $no: attr('data-fesa-num') !global;
}

.box {
    height: 100px;
    width: 100px;
    margin-bottom: 10px;
}

@for $i from 1 through $no {
    .box:nth-of-type(#{$i}) {
        background-color: darken(cornflowerblue, 0% + $i);
    }
}