Conditional with PostCSS

Question

Conditional with PostCSS

Navigation

#1 by (2 votes)

1

I am using PostCSS and I am using it as in the documentation but I am using it as part of a function in a separate file called variables, when I run it I get:

 Failed to parse expression

Here I have it like that in the css

variables.css

 @define-mixin backImages $x, $y, $url, $color, $size, $repeat{
   if $color != ''{
     background-color: $(color);
   }
   @else if $url != ''{
     background-image: $(url);
   }
   @else if $x != '' && $y != ''{
     background-position: $(x) $(y);
   }
   @else if $size != ''{
     background-repeat: $(repeat);
   }
   @else if $repeat != ''{
     background-size: $(size);
   }
   @else{
     background:none;
   }
 }

styles.css

body{
  @mixin backImages center, center, url(../images/juego_img/logojuego.png), '', cover, no-repeat;
  position: relative;
  background: blue;
}

I do not know what mistake I'm making.

css3

asked by Albert Arias 30.01.2017 в 23:21

source

1 answer

Aborta Pharo just installed Why is not the memory address of a string assigned to a pointer?

score 2 · Accepted Answer

The operation of the mixins are very simple. What you should do is close the @else with the corresponding keys.

Example: link

@define-mixin backImages $x $y $url $color $size $repeat {
  @if $color != '' {
    background-color: $(color);
  }
  @else{
    @if $url != '' {
      background-image: $(url);
    }
    @else {
      @if $x != '' && $y != '' {
        background-position: $(x) $(y);
      }
      @else {
        @if $size != ''{
          background-repeat: $(repeat);
        }
        @else {
          @if $repeat != ''{
            background-size: $(size);
          }
          @else {
            background:none;
          }
        }
      }
    }
  }
}