Parse error on Less, says my class/mixin is not defined

Asked

Viewed 68 times

2

I’m using ruby 1.9.2 and Rails 3 and Gem Less 2.6.0. I’ve already imported ruby mixins and the variables and yet the error persists.

Less::Parseerror: #gradient > . vertical is Undefined

Excerpt from the file slider.Less:

.slider-track {
    position: absolute;
    cursor: pointer;
    #gradient > .vertical(#f5f5f5, #f9f9f9);
    .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
    .border-radius(@baseBorderRadius);
css less

  • Could it be a syntax error in your LESS? You can post the snippet of the file where this rule appears?

  • I edited the question, thank you for your attention.

  • What is the intention with #gradient > .vertical(#f5f5f5, #f9f9f9);? What is the CSS you expect to generate?

  • to be honest I’m not sure, so I can not solve alone, is a code that already came ready in Silder for Bootstrap (bootstrap.slider).

  • 1

    What you got there is a parametric mixin. You need to have a definition of this .vertical(@cor1; @cor2) somewhere.

  • Thanks man, help me :)

  • @bfavaretto does not pay to put as a response? :)

  • @Maiconcarraro Feito. I hope this saves the closing question

Show 3 more comments

1 answer

2


That one .vertical(#f5f5f5, #f9f9f9) is what Less calls mixin prametric, which is like a function that gets parameters. It needs to be declared somewhere. I imagine you’re looking for something like this:

.vertical(@cor1, @cor2) {

  /* Fallback (could use .jpg/.png alternatively) */
  background-color: @cor1;

  /* SVG fallback for IE 9 (could be data URI, or could use filter) */
  background-image: url(fallback-gradient.svg); 

  /* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */
  background-image:
    -webkit-gradient(linear, left top, left bottom, from(@cor1), to(@cor2));

  /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
  background-image:
    -webkit-linear-gradient(top, @cor1, @cor2);

  /* Firefox 3.6 - 15 */
  background-image:
    -moz-linear-gradient(top, @cor1, @cor2);

  /* Opera 11.1 - 12 */
  background-image:
    -o-linear-gradient(top, @cor1, @cor2);

  /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image:
    linear-gradient(to bottom, @cor1, @cor2);

}

Multiple browser compatibility based on CSS Tricks

Browser other questions tagged css less

You are not signed in. Login or sign up in order to post.