javascript - Angular ng-repeat 和 Sass 冲突

Question

我现在正在做一个元素。可悲的是，我陷入了以下问题:

我使用 ng-repeat 来填充形成导航栏的列表，并使用 Sass 根据元素的数量调整列表元素的宽度，使宽度均匀分布。

看起来像这样:

HTML

<div class="leftViewNav" class="leftNav">
    <div>
        <ul>
            <li ng-repeat= "leftNavTag in leftNavTags"><p>{{ leftNavTag.title }}</p></li>
            <li><p>add</p></li>
        </ul>
    </div>
    </div>

SCSS

li{
    position: relative;
    @for $i from 1 through 4 {
        li:first-child:nth-last-child(#{$i}),
        li:first-child:nth-last-child(#{$i}) ~ li {
            width: 100% / $i
        } }
    height: 5%;
}

Angular

$scope.leftNavTags =
[
    {
        title: 'Analysis',
    },
    {
        title: 'Log',
    },
    {
        title: 'Edit',
    }
];

CSS

.leftBound div ul li {
  position: relative;
  height: 5%;
  float: left;
  background-color: #C4C2C3;
  border-right: 1px solid #000;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}
/* line 50, ../sass/main.scss */
.leftBound div ul li li:first-child:nth-last-child(1),
.leftBound div ul li li:first-child:nth-last-child(1) ~ li {
  width: 100%;
}
/* line 50, ../sass/main.scss */
.leftBound div ul li li:first-child:nth-last-child(2),
.leftBound div ul li li:first-child:nth-last-child(2) ~ li {
  width: 50%;
}
/* line 50, ../sass/main.scss */
.leftBound div ul li li:first-child:nth-last-child(3),
.leftBound div ul li li:first-child:nth-last-child(3) ~ li {
  width: 33.33333%;
}
/* line 50, ../sass/main.scss */
.leftBound div ul li li:first-child:nth-last-child(4),
.leftBound div ul li li:first-child:nth-last-child(4) ~ li {
  width: 25%;
}

所以第一个元素的宽度为 100%，第二个元素的宽度为 50%，依此类推。

如何解决这个问题使元素具有相同的宽度？非常感谢您的帮助。

编辑:澄清了问题。:

Answer 1

问题#1:

在模板中，您有两个 class 属性:

<div class="leftViewNav" class="leftNav">

问题#2:

sass 循环嵌套过多。您正在为 .leftBound div ul li li

生成样式

问题#3:

我们在模板中没有看到任何 leftBound 类。

---

这是一个 fiddle 如果你解决了这三个问题，你会得到什么。 (注意:添加了 Bootstrap list-unstyled 类以kill 默认列表样式)