Geek asks and answers

Vertical gradient using Bootstrap and LESS

I am very new to CSS, Bootstrap and LESS. I checked 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. I assume that I need to add the instruction above with the start and end colors in parentheses. The only examples I saw were just a mixin. Should this be included in the background-image clause or something like that? I keep getting syntax errors.

I'm sure this is probably a simple question, but my CSS knowledge is missing. However, I study every minute for trial and error. Any help would be appreciated.

Updated 02/05/2012 7:15:

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

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 use this in a Rails 3.2.3 application. The colors I want to use for the vertical gradient start with #ffffffstop #191919. I decided to try predefined variables instead of hexadecimal 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).
+3
source share
2 answers

Your problem is not the gradient method from Bootstrap. You write LESS code in a .scss file, which is a SASS file, and Rails will try to compile it using the SASS compiler.

LESS SASS simillar, . Bootstrap LESS rails 3.1, .less rails .

, gem , "twitter-bootstrap- " Railscasts, .

+3

. Bootstrap LESS, #gradient. , @import 'mixins.less' LESS .

+1
source

More articles:


All Articles