Tag: CSS

Functions in SASS

Another cool feature in SASS is that we can create functions for our CSS. In the following code, I am creating a function to be able to dynamically create a linear gradient with custom opacity. Please check it out.

@function linear-gradient($pos, $gradients...) {
  $type: linear;
  $pos-type: type-of(nth($pos, 1));

  // if $pos doesn't exist, fix $gradient
  @if ($pos-type == color) or (nth($pos, 1) == "transparent")  {
    $gradients: zip($pos $gradients);
    $pos: false;
  }

  $type-gradient: $type, $pos, $gradients;
  @return $type-gradient;
}

This is how you call the function

@include background(linear-gradient(top, orange, red));

How to target IE 8 and bellow inside your css

body {
color: red; /* all browsers, of course */
color : green9; /* IE8 and below */
*color : yellow; /* IE7 and below */
_color : orange; /* IE6 */
}