將多個引導程序類組合到一個SASS類中

在窗體中，我有一些窗體組，每個窗體組都有一個標籤和窗體控件元素。將多個引導程序類組合到一個SASS類中

<div class="form-group row"> 
    <label class="col-xs-2 col-md-3">Text</label> 
    <div class="col-xs-10 col-md-9"> 
    <input class="form-control" type="text"> 
    </div> 
</div>

標籤使用類： 'COL-XS-2 COL-MD-3' 和形狀控制： 'COL-XS-10 COL-MD-9'

是否有可能結合兩個'col'類標籤元素放入sass中的一個類中？事情是這樣的：

.label-width{ 
    .col-xs-2 
    .col-md-3 
}

給予我：

<label class="label-width">Text</label>

，然後我可以用一個SASS變量如控制：「$ labelColumnWidth：2」給我一個快速的方法來設置的標籤寬度爲所有行。事情是這樣的：

$labelColumnWidth: 2 
.label-width{ 
    .col-xs-#{$labelColumnWidth} 
    .col-md-#{$labelColumnWidth} 
}

我想用自舉類的欄間距，但能夠控制他們與上海社會科學院變量來快速改變形式的佈局。可能？

來源

2016-11-30 Nik

即使它是不是一個好的做法，你應該能夠通過@extend做到這一點，這意味着在你的情況下，你的代碼應該是這樣的：

.label-width{ 
    @extend .col-xs-2 
    @extend .col-md-3 
}

看一看here如果你需要更多解釋。

來源

2016-11-30 16:12:37

嘗試上述解決方案我得到：「.label-width」未能@extend「.col-sm-3」，未找到選擇器「.col-sm-3」。 – Nik

顯然，如果這些類在同一個指令中，@ extend就能工作：http://www.sass-lang.com/documentation/file.SASS_REFERENCE.html#_in_directives –

爲什麼這不是一個好的做法？ –

將多個引導程序類組合到一個SASS類中

回答

相關問題