Question

我的.css.scss文件中有以下CSS

.form-row {
  margin: 10px 10px 5px 10px;
  input[type='text'] {
    .single-line {
      height: 25px;
      width: 100%;
      padding: 0 5px;
    }
    height: 125px;
    width: 100%;
    padding: 0 5px;
  }
}

所以我希望高度为125px，除非class是“单行”

我有以下html：

<div class='form-row'>
  <label for="user-name">Name</label>
  <input class="single-line" placeholder="Enter name here" type="text" />
</div>

但是，输入文本字段显示为125px高度，而不是25px，这就是我想要的。

我如何使这项工作？

Answer 1

您似乎在课前省略了＆符号（＆amp;）。

<强> SCSS

.form-row {
  margin: 10px 10px 5px 10px;
  input[type='text'] {
    &.single-line {
      height: 25px;
      width: 100%;
      padding: 0 5px;
    }
    height: 125px;
    width: 100%;
    padding: 0 5px;
  }
}

输出CSS

.form-row {
  margin: 10px 10px 5px 10px;
}
.form-row input[type='text'] {
  height: 125px;
  width: 100%;
  padding: 0 5px;
}
.form-row input[type='text'].single-line {
  height: 25px;
  width: 100%;
  padding: 0 5px;
}

SASSMeister Gist

如何使用.css.scss指定更具体的样式？

1 个答案: