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

Question

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

Navigation

#1 by (2 votes)

2

I'm using ruby 1.9.2 and rails 3 and gem less 2.6.0. I already imported the mixins and the variables and even then the error persists.

Less :: ParseError: #gradient > .vertical is undefined

Slider.less file snippet:

.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

asked by anonymous 03.02.2015 / 20:15

1 answer

CSS interfering with element position while dragging Problem using common controls 32 bit in 64 bit

score 2 · Accepted Answer

This .vertical(#f5f5f5, #f9f9f9) is what Less calls prametric mixin , which is like a function that receives 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);

}

Compatibility with multiple browsers based on tips from CSS Tricks