How to get the value of the last assigned property in Sass or CSS?

I know the properties inheritand initial, but I do not want them. I want to give the same meaning to the last CSS rule. Basically, a placeholder or dummy.

The reason I want to do this is because I use mixin compass link colors:

@mixin link-colors($normal, $hover: false, $active: false, $visited: false, $focus: false) {
  color: $normal;
  @if $visited {
    &:visited {
      color: $visited;
    }
  }
  @if $focus {
    &:focus {
      color: $focus;
    }
  }
  @if $hover {
    &:hover {
      color: $hover;
    }
  }
  @if $active {
    &:active {
      color: $active;
    }
  }
}

I don't want to set anything for the first argument, which is $ normal. I know that I can assign values ​​to the corresponding names as follows:

@include link-colors($hover: $nav-link-hover-color, $active: $nav-link-hover-color);

However, this will give me an error since I didn’t assign anything to $ normal.

As you can see, $ normal is not optional; however, I only want to set the colors for the rest, not normal. He already set the color before, and I do not want to redefine it.

, ? link-colors(white) ?

+4
1

, all , , , , . , mixin, :

@function array-fill($value, $n) {
    $list: ();
    @for $i from 1 through $n {
        $list: append($list, $value);
    }
    @return $list;
}

a {
  @include link-colors(array-fill(white, 5)...);
}

:

a {
  color: white;
}
a:visited {
  color: white;
}
a:focus {
  color: white;
}
a:hover {
  color: white;
}
a:active {
  color: white;
}

$normal, , null :

@include link-colors(null, $hover: $nav-link-hover-color, $active: $nav-link-hover-color);

:

a:hover {
  color: white;
}
a:active {
  color: white;
}

:

a {
  @include link-colors(null, array-fill(white, 4)...);
}

:

a:visited {
  color: white;
}
a:focus {
  color: white;
}
a:hover {
  color: white;
}
a:active {
  color: white;
}
+1

Source: https://habr.com/ru/post/1568136/


All Articles