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 ;

每个列表项都有一个＆＃34; .list＆＃34;并且ul的id为＆＃34; #listContainer＆＃34;

根据SASS步骤计算div的宽度

1 个答案: