Skip to content

Instantly share code, notes, and snippets.

@dalgard
Last active January 26, 2017 09:09
Show Gist options
  • Save dalgard/9078463 to your computer and use it in GitHub Desktop.
Save dalgard/9078463 to your computer and use it in GitHub Desktop.
A Sass mixin for quickly setting link states – test it on http://sassmeister.com/ (see more examples in the comments)
@dalgard
Copy link
Author

dalgard commented Feb 18, 2014

/*
  Example:
    a {
      @include link-states(color, red);
    }

  Output:
    a {
      color: red;
    }
    a:hover, a:focus, a:active {
      color: red;
    }
*/

@dalgard
Copy link
Author

dalgard commented Feb 18, 2014

/*
  Example:
    a {
      @include link-states(color, red, 5%, -10%);  // Percentage: lighten/darken
    }

  Output:
    a {
      color: red;
    }
    a:hover, a:focus {
      color: #ff1a1a;  // Lighter
    }
    a:active {
      color: #cc0000;  // Darker
    }
*/

@dalgard
Copy link
Author

dalgard commented Feb 18, 2014

/*
  Example:
    a {
      @include link-states(
        color background-color,
        red blue,
        null,
        null yellow,
        green
      );
    }

  Output:
    a {
      color: red;
      background-color: blue;
    }
    a:active {
      background-color: yellow;
    }
    a:focus {
      color: green;
      background-color: green;
    }
*/

@dalgard
Copy link
Author

dalgard commented Feb 18, 2014

It is easy to create more convenient mixins using rest syntax ("..."):

@mixin link-color($params...) {
  @include link-states(color, $params...);
}

/*
  Example:
    a {
      @include link-color(null, blue, brown);
    }

  Output:
    a:hover, a:focus {
      color: blue;
    }
    a:active {
      color: brown;
    }
*/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment