Sass: Change color with @for loop

前端 未结 3 678
独厮守ぢ
独厮守ぢ 2021-01-03 01:49

I try to darken a variable number of divs like that \"enter with following code:



        
相关标签:
3条回答
  • 2021-01-03 02:37

    You can darken the color using $i inside @for and apply respective classes to the divs. Hope this helps.

    SCSS

    @mixin color-divs ($count, $baseName, $startcolor) {
        @for $i from 0 through $count {
            $background-color: darken($startcolor, $i * $i); 
        .colored-div#{$i} {
          background: $background-color;
          height:100px;
          width:200px;
          float: left;
          margin-right: 5px;
        }
       }
    
    }
     @include color-divs(5,'a',#ffd8b1);
    

    HTML

    <div class="colored-div1">a</div>
    <div class="colored-div2">b</div>
    <div class="colored-div3">c</div>
    <div class="colored-div4">d</div>
    <div class="colored-div5">e</div>
    

    Demo

    See demo

    0 讨论(0)
  • 2021-01-03 02:48

    I created this example based on your mixin:

    @mixin color-divs ($count, $baseName, $startcolor) {
        $loop_color: $startcolor;
        @for $i from 0 through $count {
            $loop_color: darken($loop_color, 9%);
            .#{$baseName}-#{$i} { background-color: $loop_color; }
        }
    }
    
    div {
        width: 100px;
        height: 100px;
        float: left;
    }
    
    @include color-divs(6,'div',#faa)
    

    Used with the following markup:

    <div class="div-1"></div>
    <div class="div-2"></div>
    <div class="div-3"></div>
    <div class="div-4"></div>
    <div class="div-5"></div>
    <div class="div-6"></div>
    

    Output: http://jsfiddle.net/jdtvF/

    http://uk.omg.li/P0dF/by%20default%202013-05-16%20at%2010.10.43.png

    div {
      width: 100px;
      height: 100px;
      float: left; }
    
    .div-0 {
      background-color: #ff7c7c; }
    
    .div-1 {
      background-color: #ff4e4e; }
    
    .div-2 {
      background-color: #ff2020; }
    
    .div-3 {
      background-color: #f10000; }
    
    .div-4 {
      background-color: #c30000; }
    
    .div-5 {
      background-color: #960000; }
    
    .div-6 {
      background-color: #680000; }
    
    0 讨论(0)
  • 2021-01-03 02:50

    To just go from one color to another, for say, a number of consecutive <div>:

        @for $i from 0 through 11
            &:nth-child(#{$i})
                transform: rotate(#{30*$i}deg)
                background-color: mix($gray1, $gray2, $i / 12 * 100% )
    

    Notes

    • Note, that you don't need any #{…} inside the mix(), because it's a sass function, so it's clear that any variables and computations used insides are to be resolved before turning it into CSS.
    • The transform is just my use case (for demonstration). Here, one does need #{…}
    • and note the +/-1 issue (like in every for-loop, in any language): going from 0/12 to 11/12
    • lastly, turning it into a percentage to please the mix function
    • as you see: could be done in a mixin, but doesn't have to be!
    0 讨论(0)
提交回复
热议问题