Skip to content

Instantly share code, notes, and snippets.

@alcidesqueiroz
Last active August 29, 2015 14:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alcidesqueiroz/4f64352e38ffdd8e1d5d to your computer and use it in GitHub Desktop.
Save alcidesqueiroz/4f64352e38ffdd8e1d5d to your computer and use it in GitHub Desktop.
Sass: Function to render a "begins with" selector, which matches elements with some class beginning with a given text
@function class-begins-with($class-name){
@return '[class^="#{$class-name}"], [class*=" #{$class-name}"]';
}
//Usage
#{class-begins-with(main-toolbar-action)}{
color: black;
}
//Output
[class^="main-toolbar-action"], [class*=" main-toolbar-action"] {
color: black;
}
//Matches
<button class="whatever main-toolbar-action--details">Details</button>
<button class="main-toolbar-action--upload whatever">Upload</button>
<button class="whatever main-toolbar-action--new-folder whatever2">Create New Folder</button>
//Or even...
<button class="main-toolbar-action">Generic Action</button>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment