larrybotha
11/4/2013 - 10:02 AM

Easily manage styles for pseudo classes, especially [disabled]. Quickly create helper classes for KSS-style pseudo modifiers.

Easily manage styles for pseudo classes, especially [disabled]. Quickly create helper classes for KSS-style pseudo modifiers.

pseudos.sass
content_copyfile_download
=pseudos($pseudos)
 @each $pseudo in $pseudos
   @if $pseudo == disabled
     &:#{$pseudo},
     &[#{$pseudo}],
     &[#{$pseudo}]:hover,
     &[#{$pseudo}]:active,
     &.pseudo-class-#{$pseudo},
     &.pseudo-class-#{$pseudo}:hover,
     &.pseudo-class-#{$pseudo}:active
       @content
   @else
     &:#{$pseudo},
     &.is-#{$pseudo},
     &.pseudo-class-#{$pseudo}
       @content
A.markdown
content_copyfile_download
  • Rendered
  • Source

Pseudos Helper Function

Quickly manage disabled styles for an element, multiple pseudo classes, and also create helpers for KSS-style pseudo modifiers (excellent for styleguides).

Full credit goes to @fr4nktic for this technique.

Usage

a
 color: red
 +pseudos(hover focus)
    color: blue

// or even
a
 color: red
  +pseudos(hover focus)
    color: blue
  +pseudos(disabled)
    opacity: 0.4

TODO

Rewrite for scss.