css - 使用SASS根据步骤计算div的宽度

Question

情况是这样的:

我有一个包含动态数量的步骤元素的步骤 div。 (2, 3, 4)

我想做的是动态计算应用于每个 step 元素的宽度:

• 2 个步骤:50%
• 3 个步骤:33.3%
• 4 个步骤:25%
• 等...

我已经设法基于 SASS counter 动态生成步骤上显示的数字。

但我不知道如何从 SASS 知道步数。我需要知道最大步数，然后将宽度除以步数。

这是结果的图片:https://docs.google.com/file/d/0ByzbHcAxmCyveWp1RUhCb0pxSmc

body {
  .steps {
    background-color: $gray-lighter;
    text-align: center;
    margin-left: auto;
    margin-right: auto;

    .steps_container {
      width: 300px;
      display: block;
      margin: 0 auto;
      overflow: hidden;

      /*progressbar*/
      ul#progressbar {
        margin-top: 10px;
        margin-bottom: 10px;
        overflow: hidden;
        /*CSS counters to number the steps*/
        counter-reset: step;
        padding-left: 0;

        li {
          list-style-type: none;
          color: $gray-dark;
          font-size: 12px;
          width: 33.33%;// HERE is what I want to change to: width: 100% / $steps
          float: left;
          position: relative;
          line-height: 1;

          &:before {
            @include border-all-radius (15px);
            content: counter(step);// Display the current step number. 
            counter-increment: step;// Auto increment.
            width: 28px;
            height: 28px;
            line-height: 20px;
            display: block;
            font-size: 12px;
            color: $white;
            font-weight: bold;
            background: $gray-dark;
            margin: 0 auto 5px auto;
            position: relative;
            z-index: 100 !important;
            padding-top: 3px;
            border:1px solid $gray-darker;
          }

          &.active {
            @extend .fa;
            color: $gray-darker;

            &:before {
              background-color: $orange;
              counter: none;
            }
          }

          &.success {
            @extend .fa;
            color: $gray-darker;

            &:before {
              background-color: $green-check;
              content: "\f00c";
              counter: none;
            }
          }
        }
      }

      #progressbar li:after {
        content: '';
        width: 100%;
        height: 2px;
        background: $gray-darker;
        position: absolute;
        left: -50%;
        top: 12px;
        z-index: 99; /*put it behind the numbers*/
      }

      #progressbar li:first-child:after {
        /*connector not needed before the first step*/
        content: none;
      }
    }
  }
}

Answer 1

我做了类似的事情，但为了实现这一点，我必须动态输出(通过 javascript 或您正在使用的任何后端技术)一个基于显示的步数的类，即如果显示两个步骤，将输出一个名为 step-2 的类。如果可能的话，您可以执行类似下面提供的代码的操作:

@for $i from 1 through 10{
    .step-#{$i} {
        width: 100% / $i
    }
}

它会输出:

.step-1 { width: 100%;}
.step-2 { width: 50%}
ect......

根据显示的步数，将应用正确的宽度。希望这对您有所帮助并引导您朝着正确的方向前进。

--------------------用JS统计列表项数----------------

var countListItems = document.getElementsByClassName("list").length;
var d = document.getElementById("listContainer");
d.className = d.className+" step-"+countListItems ;

每个列表项都有一个“.list”类，ul 有一个“#listContainer”id