<p dir="auto">Hi, has the .divider-vertical for navbars been dropped from bootstrap 3, or is it just a feature overlook? I don't see it in neither docs nor code.</p>
<p dir="auto">In Bootstrap, all components are defined using classes.</p>
<p dir="auto">But if someone wants to use BS with less, without any classes in markup, it is possible, but the classes will still be defined in the CSS file, adding useless cluter to the CSS file.</p>
<p dir="auto">Another problem caused by this is in the case we just want to quickly override a component. Since they all are classes, we have to either make a copy of the component less file, change it, and include it instead of the original one, or negate already defined properties.</p>
<p dir="auto">If components were defined as mixins, and then in a separate file affected to a class, we could just use the mixin and not import the file in which the class is defined.</p>
<p dir="auto">For example, one might want to use panel for its own markup :</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div id=&quot;my-panel&quot;&gt;...&lt;/div&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">id</span>="<span class="pl-s">my-panel</span>"<span class="pl-kos">&gt;</span>...<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>
<div class="highlight highlight-source-css notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@import &quot;panels.less&quot;;

#my-panel {
  .panel;
}"><pre class="notranslate"><span class="pl-k">@import</span> <span class="pl-s">"panels.less"</span>;

<span class="pl-kos">#</span><span class="pl-c1">my-panel</span> {
  .<span class="pl-c1">panel</span>;
}</pre></div>
<p dir="auto">That works, but in the final CSS, we would end with 2 rule sets, one for .panel, and one for #my-panel.</p>
<p dir="auto">The less file for the panel component, "panels.less" contains :</p>
<div class="highlight highlight-source-css notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".panel {
  margin-bottom: @line-height-computed;
  background-color: @panel-bg;
  border: 1px solid transparent;
  border-radius: @panel-border-radius;
  .box-shadow(0 1px 1px rgba(0,0,0,.05));
}"><pre class="notranslate">.<span class="pl-c1">panel</span> {
  <span class="pl-c1">margin-bottom</span><span class="pl-kos">:</span> <span class="pl-k">@line-height-computed</span>;
  <span class="pl-c1">background-color</span><span class="pl-kos">:</span> <span class="pl-k">@panel-bg</span>;
  <span class="pl-c1">border</span><span class="pl-kos">:</span> <span class="pl-c1">1<span class="pl-smi">px</span></span> solid transparent;
  <span class="pl-c1">border-radius</span><span class="pl-kos">:</span> <span class="pl-k">@panel-border-radius</span>;
  .<span class="pl-c1">box-shadow</span>(0 1px 1px <span class="pl-ent">rgba</span>(0<span class="pl-kos">,</span>0<span class="pl-kos">,</span>0<span class="pl-kos">,</span>.05));
}</pre></div>
<p dir="auto">To make this possible, we could split components in 2 files. One containing the mixin, named e.g. "panels.mixins.less" :</p>
<div class="highlight highlight-source-css notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".panel() {
  margin-bottom: @line-height-computed;
  background-color: @panel-bg;
  border: 1px solid transparent;
  border-radius: @panel-border-radius;
  .box-shadow(0 1px 1px rgba(0,0,0,.05));
}"><pre class="notranslate">.<span class="pl-c1">panel</span>() {
  <span class="pl-c1">margin-bottom</span><span class="pl-kos">:</span> <span class="pl-k">@line-height-computed</span>;
  <span class="pl-c1">background-color</span><span class="pl-kos">:</span> <span class="pl-k">@panel-bg</span>;
  <span class="pl-c1">border</span><span class="pl-kos">:</span> <span class="pl-c1">1<span class="pl-smi">px</span></span> solid transparent;
  <span class="pl-c1">border-radius</span><span class="pl-kos">:</span> <span class="pl-k">@panel-border-radius</span>;
  .<span class="pl-c1">box-shadow</span>(0 1px 1px <span class="pl-ent">rgba</span>(0<span class="pl-kos">,</span>0<span class="pl-kos">,</span>0<span class="pl-kos">,</span>.05));
}</pre></div>
<p dir="auto">And another one, "panels.less", affecting the mixin to the default class assumed by bootstrap :</p>
<div class="highlight highlight-source-css notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".panel {
  .panel;
}"><pre class="notranslate">.<span class="pl-c1">panel</span> {
  .<span class="pl-c1">panel</span>;
}</pre></div>
<p dir="auto">That would make the whole thing more modular and flexible.</p>
<p dir="auto">Makes sense ?</p>