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


Tags: css,sass,compass-sass

Problem :

I know of the inherit and initial properties, but I don't want them. I want to give the same value of the last CSS rule. Basically, a placeholder or dummy.

The reason I want to do this is because I'm using the Compass mixin 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 to the first argument, which is $normal. I know I can set the values to their respective names like so:

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

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

As you can see, $normal is not optional; however, I only want to set colors to the others, not normal. It has already been set a color before, and I do not wish to override it.

Also, is there a way to set a value for all the arguments? Say link-colors(white) and it carries on to be set to all the arguments?



Solution :

If all you want is to have all arguments be the same value, what you're looking for is a function that's commonly called fill or array-fill in other languages. As long as you know exactly how many arguments the mixin takes, you're good to go:

@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)...);
}

Output:

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

If you want to be able to specify specific values and not use the $normal argument, then you can do that by passing null as the value for that argument:

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

Output:

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

You can also combine these solutions:

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

Output:

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

    CSS Howto..

    How to change the background color of an input field when text is entered?

    How do I get the name of div a user must click to appear in a text div?

    How to make an element stretch to the same height as its container?

    how to many class share 1 css method in CSS

    In CSS computed properties panel, the topmost style does not seem to overwrite the less specific style — how could that be?

    How to Make Certain Phrases Appear on One Line Regardless of Screen Size

    How to change the background color of a non selected cell in JavaFx 8 table view

    How to break a word with two 50% table cells?

    How to display a div over other content and in the center of webpage using CSS?

    how to make background-image included via a “class” responsive

    How to remove jquery mobile button color or override button css?

    How to add CSS class dynamically to html element

    How to use css style in php

    How to hide elements in navbar until hover in css?

    how to add string to the class javascript(jquery)

    How can I put three elements in the same column, with the first on top, second and third in the center of the remaining space, using Flexbox?

    How much overflow in a DOM element

    How can I fix the indentation in a facebook like-box?

    slide show with bootstrap

    How to add css to a div once it hits the top of the page (when scrolling)?

    When displaying an image in my directory, how to add a return (or back) button to it?

    How Do I Place An Image To The Right of a Body of Text?

    How to add a background to a boostrap grid row (including padding!)?

    Show hint over a CSS background image on mouse over

    How to minify css files with RequireJS

    How to stretch individual background images in CSS

    how to get value of colors from CSS

    How to add a table inside a div with its CSS working

    How to hide the div on click through animation css

    How to align items of a list CSS/jquery