Home/ Questions/Q 7875003
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T02:54:40+00:00

I am very new to CSS, Bootstrap & LESS. I have checked out the

  • 0

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).
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0