MENU


Miscellaneous

color(@string) Parses a color, so a string representing a color becomes a color.
image-size(@string) Gets the image dimensions from a file.
image-height(@string) Gets the image width from a file.
image-width(@string) Gets the image height from a file.
convert(@value, @unit) Convert a number from one unit into another.
data-uri([@mimetype, ]@url) Inlines a resource and falls back to url() if the ieCompat option is on and the resource is too large, or if you use the function in the browser. If the MIME type is not given then node uses the mime package to determine the correct mime type.
default() Available only inside guard conditions and returns true only if no other mixin matches, false otherwise.
unit(@dimension[, @unit]) Remove or change the unit of a dimension.
get-unit(@dimension) Returns the unit of a value.
svg-gradient(@direction, @list) Svg-gradient function generates multi-stop svg gradients. It must have at least three parameters. First parameter specifies gradient type and direction and remaining parameters list colors and their positions. The position of first and last specified color are optional, remaining colors must have positions specified.

The direction must be one of to bottom, to right, to bottom right, to top right, ellipse or ellipse at center. The direction can be specified as both escaped value ~'to bottom' and space separated list of words to bottom.

The direction must be followed by two or more color stops. They can be supplied either inside a list or you can specify each color stops in separate argument. 

.a:after {
   content: 
      image-size("Apple.jpeg") 
      convert(90ms, "s") 
      unit(5, px)
      unit(5em)
      get-unit(5px)
      color("#333");
}
.b {
   background: data-uri('image/jpeg;base64', '../data/image.jpg');
}
.c {
   background-image: svg-gradient(to right, red, green 30%, blue);
}

.a:after {
  content: 300px 400px 0.09s 5px 5 px #333333;
}
.b {
  background: url('data:image/jpeg;base64,bm90IGFjdHVhbGx5IGEganBlZyBmaWxlCg==');
}
.c {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMDAwMCIvPjxzdG9wIG9mZnNldD0iMzAlIiBzdG9wLWNvbG9yPSIjMDA4MDAwIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMGZmIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWRpZW50KSIgLz48L3N2Zz4=');
}

.mixin(1)  {color: red;}
.mixin(2)  {color: green;}
.mixin(@x) when (default()) {color: blue;}
div {
  .mixin(10);
}

div {
  color: blue;
}