title: Overriding css class variables with LESS
body: <p>I have a less file which contains a class that defines a few variables for colors:</p>
  
  <pre><code>.some-css-class{ 
      @color1: #E6E6E6
      @color2: #808080
      /* some other rules follow */
   }
  </code></pre>
  
  <p>Since this is a 3rd party file I don't wont to change it directly. Instead I created my own less file and imported the 3rd party file. Now I want to override the colors defined in the base file but I don't get it working.</p>
  
  <p>I tried to override the colors on root level, but this way I am not able to change the variables since they are defined within a class in the base file:</p>
  
  <pre><code>/* Including base styles */
  @import "base.less";
  
  @color1: #DF007B;
  @color2: #00A855;
  </code></pre>
  
  <p>So I tried to override the colors within the class, but apparently I am not able to change them this way, as it is not possible to override variables in the same scope (.som-css-class):</p>
  
  <pre><code>/* Including base styles */
  @import "base.less";
  
  .some-css-class {
      @color1: #DF007B;
      @color2: #00A855;
  }
  </code></pre>
  
  <p>Any hints on how I am able to override the colors?</p>
  
  <p>EDIT: It seems that there isn't a solution for this. In my particular case I was looking for a way to override colors in an angularjs module(angular-wizard).</p>
  
  <p>As i saw now, a pull request to solve this problem already exists:
  <a href="https://github.com/mgonto/angular-wizard/pull/68" rel="nofollow">https://github.com/mgonto/angular-wizard/pull/68</a></p>