Vertical Gradient Using Bootstrap and LESS

Question

I am very new to CSS, Bootstrap & LESS. I have checked out the Bootstrap website and saw that I should be able to create a vertical gradient using the LESS mixin:

#gradient > .vertical();

I want to do this in the footer {} section of my css.scss file. I have no idea how to code this. My guess is that I need to add the statement above with the start & end colors within the parentheses. The only examples I have seen were just the mixin. Does this need to be included with a background-image clause or something like that? I keep getting syntax errors.

I'm sure this is probably a simple question but my knowledge of CSS is lacking. However I am learning minute by minute by trial and error. Any help would be appreciated.

Updated 05/02/2012 7:15 am:

Here is my CSS code for the footer that I would like to add the vertical gradient to:

footer {
  margin-top: 45px;
  padding-top: 5px;
  border-top: 1px solid $grayMediumLight;
  color: #000000;
  font-size: 10px;
  font-family: Arial; 
  font-style: italic;
  #gradient > .vertical(@white, @grayDarker);
  }

I am using this in a Rails 3.2.3 application. The colors I want to use for the vertical gradient are start #ffffff stop #191919. I decided to try the predefined variables instead of the hex values. I also tried changing @ to $. I keep getting the following error.

Invalid CSS after "...ent > .vertical": expected "{", was "(@white, @grayD..."
  (in /Users/server1/Sites/iktusnetlive_RoR/app/assets/stylesheets/custom.css.scss).

Solution 1

Your problem is not with gradient mixin from Bootstrap. You're writing LESS code in a .scss file which is a SASS file and Rails will try to compile it with SASS compiler.

LESS and SASS are simillar but have some syntax and feature differences. If you want to use Bootstrap and LESS with rails 3.1 asset pipeline you need to create a new file with .less extension and configure your rails asset pipeline to compile less files with less compiler.

It should be as easy as adding a couple of gems to you gem file and bundle install to get those gems, but I recommend watching "twitter-bootstrap-basics" episode of Railscasts to get all the details.

Solution 2

I was getting the same error. I wasn't importing the Bootstrap LESS file that defines #gradient. Solved the problem by adding @import 'mixins.less' to the top of my LESS file.

Comments

[Pamela Cook - LightBe Corp]

Thanks so much for your help, Allen. I figured I have a compile error somewhere. The Bootstrap website stated that many things from LESS were included Bootstrap. Maybe they were talking about variables and not functions. I will check out the video. I may also check on how to do this with regular CSS code.

[Pamela Cook - LightBe Corp]

YEAH!!! Allen & Jarrod, both of you helped me a lot!!! I am able to use the LESS code in my Rails app. All I did was install twitter-bootstrap-basics. That fixed the problem.