title: How do you add a gradient to the default variable for background color with Less?
body: <p>I am trying to change the default variable, @body-bg, in a variables.less file for Bootstrap 3 so that my background is a gradient, but I haven't had much luck.</p>
  
  <p>Referencing from a previously asked question about adding a gradient mixin, my attempt was to write the gradient as a mixin and then assign it to @body-bg in my mixin file, but the compiler threw an error for an 'Unrecognized input' at the line where I wanted to assign the mixin to @body-bg. My code was roughly as follows:</p>
  
  <pre><code>@import "../variables.less";
  #gradient {
      .vertical(@start-color: #989ca0; @end-color: #234362; @start-percent: 0%; @end-percent: 100%) 
      {
            background-image: -webkit-gradient(linear, left @start-percent, left @end-percent, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
            background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Safari 5.1+, Chrome 10+
            background-image:  -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
            background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
      }
  }
  
  body {
      #gradient.vertical(#989ca0; #234362; 0%; 100%);
  }
  </code></pre>
  
  <p>Based on the error I got, is it not possible to assign a mixin to a default variable in Less? I noticed that if I only reference #gradient, the code compiles, although the gradient certainly doesn't show.</p>
  
  <p>I've also tried to find what @body-bg would equate to in the .css file, and I think this would be body.background-color, but the following few lines wouldn't add the gradient either:</p>
  
  <pre><code>.body.background-color {
      #gradient.vertical(#989ca0; #234362; 0%; 100%);
  }
  </code></pre>
  
  <p>I would appreciate any help on this issue, thank you!</p>