<p dir="auto">When making themes with <a href="https://github.com/divshot/themestrap"><code class="notranslate">themestrap</code></a>, I often end up making new variables for a number of hardcoded things in bootstrap.<br>
Most often these are the <code class="notranslate">border-width</code>s of a lot of elements.</p>
<p dir="auto">How are you guys thinking about addings more variables in general, and especially in the <code class="notranslate">border-width</code>-case? I would follow up with a Pull Request if you approve.</p>
<p dir="auto">I think I would go about like this:</p>
<div class="highlight highlight-source-css notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@border-width-default: 1px;
@hr-border-width: @border-width-default;
[…]"><pre class="notranslate"><span class="pl-k">@border-width-default</span><span class="pl-kos">:</span> 1px;
<span class="pl-k">@hr-border-width</span><span class="pl-kos">:</span> <span class="pl-k">@border-width-default</span>;
[…]</pre></div>
<p dir="auto">Inspired by the <code class="notranslate">@border-radius</code> declarations, we could also go about it like this:</p>
<div class="highlight highlight-source-css notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@border-width-default: 1px;
@border-width-large: 3px;
@hr-border-witdh: @border-width-default;
@btn-border-witdh: @border-width-large;
[…]"><pre class="notranslate"><span class="pl-k">@border-width-default</span><span class="pl-kos">:</span> 1px;
<span class="pl-k">@border-width-large</span><span class="pl-kos">:</span> 3px;
<span class="pl-k">@hr-border-witdh</span><span class="pl-kos">:</span> <span class="pl-k">@border-width-default</span>;
<span class="pl-k">@btn-border-witdh</span><span class="pl-kos">:</span> <span class="pl-k">@border-width-large</span>;
[…]</pre></div>
<p dir="auto">Navbar.less file has the following definition of the .navbar-fixed-... styles:</p>
<div class="highlight highlight-source-css notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".navbar-fixed-top {
  top: 0;
  border-width: 0 0 1px;
}
.navbar-fixed-bottom {
  bottom: 0;
  margin-bottom: 0; // override .navbar defaults
  border-width: 1px 0 0;
}"><pre class="notranslate">.<span class="pl-c1">navbar-fixed-top</span> {
  <span class="pl-c1">top</span><span class="pl-kos">:</span> <span class="pl-c1">0</span>;
  <span class="pl-c1">border-width</span><span class="pl-kos">:</span> <span class="pl-c1">0</span> <span class="pl-c1">0</span> <span class="pl-c1">1<span class="pl-smi">px</span></span>;
}
.<span class="pl-c1">navbar-fixed-bottom</span> {
  <span class="pl-c1">bottom</span><span class="pl-kos">:</span> <span class="pl-c1">0</span>;
  <span class="pl-c1">margin-bottom</span><span class="pl-kos">:</span> <span class="pl-c1">0</span>; <span class="pl-c1">/</span><span class="pl-c1">/</span> override .<span class="pl-c1">navbar</span> <span class="pl-ent">defaults</span>
  <span class="pl-ent">border-width</span><span class="pl-kos">:</span> 1px 0 0;
}</pre></div>
<p dir="auto">It would be better if the border width (1px) was defined via a variable. With the fixed 1px value. to override it, I need to create a duplicate entry for the styles in a CSS file. It would be easier to use a variable, which could be overwritten by a custom LESS file (the preferred approach for style customization).</p>