Are there "hooks" in SASS? - sass

Question

I was reviewing UiKit, a frontend framework built with LESS, and noticed a rather interesting feature: hooks. Look at the following in the base framework:
.uk-panel-badge {
position: absolute;
top: 0;
right: 0;
z-index: 1;
.hook-panel-badge;
}
.hook-panel-badge() {}
If you want to override that in a theme let's say you are building outside of the core files (files that come later in compilation), then you would do the following:
.hook-panel-badge() {
right:auto;
}
So, in essence it looks like you are able to override/customize selectors without adding in additional selectors, so it keeps your markup as small as possible.
Is anything like this available in SASS? This looks like an awesome feature that I'd love to use as a primarily SASS user, but I haven't found #extend to be the same. Thanks!
Update
The placeholder feature seems to be the closest thing I've found:
.panel {
background:red;
#extend %hook-panel;
}
%hook-panel {
color:blue;
}
Which renders as:
.panel {
background: red; }
.panel {
color: blue; }
and can be defined after (which is awesome), but this still duplicates the selector. Is there anyway to only render the value of the placeholder in the original selector it is included in?

Answer 1

SASS has a similar facility called mixins:
// Define the mixin
#mixin large-text
font-family: Arial
color: #ff0000
// Use it
.page-title
#include large-text
padding: 10px
// Compiled CSS
.page-title {
font-family: Arial;
color: #ff0000;
padding: 10px;
}
The beauty of mix-ins is that they can take arguments, so you don't need to override commonly-changed selectors:
// Define
#mixin sexy-border($color, $width)
border-color: $color
border-width: $width
border-style: dashed
// Paragraphs in general will have a sexy blue 10px dashed border
p
#include sexy-border(blue, 10px)
// Paragraphs of class "plain" will have a plain old black 1px solid border
p.plain
#include sexy-border(black, 1px)
border-style: solid
// Compiled CSS
p {
border-color: blue;
border-width: 10px;
border-style: dashed;
}
p.plain {
border-color: black;
border-width: 1px;
border-style: solid;
}
SASS mixin documentation.

Answer 2

As far as I can see, there's no exact mapping of the LESS behaviour to a SASS equivalent.
You have the following options:
#extend
.uk-panel-badge {
position: absolute;
top: 0;
right: 0;
z-index: 1;
#extend .hook-panel-badge;
}
.hook-panel-badge{
right:auto;
}
Resulting in:
.uk-panel-badge {
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
.hook-panel-badge, .uk-panel-badge {
right: auto;
}
This produces slightly more CSS than the LESS equivalent does, because the original (unhooked) class is preserved.
#mixin
//theme.scss:
#mixin hook-panel-badge(){
}
#import "hooks";
.uk-panel-badge {
position: absolute;
top: 0;
right: 0;
z-index: 1;
#include hook-panel-badge;
}
_hooks.scss:
//theme creator can override hooks in here.
#mixin hook-panel-badge(){
right:auto;
}
This creates the exact same code as your SASS, but the downside is that you need to define a blank mixin for every hookable class, which is a bit of effort. (You could of course put these all in the _hooks.scss file, but that would make the override code harder to read.
EDIT:
I guess there is one more option as below, which saves a little bit of typing on the extendee's side, but moves away from standard CSS syntax for the extender a bit too much for my liking. You could of course use a partial file as in 2.
#mixin hook($class){
//generic override.
#if($class == "uk-panel-badge"){
right:auto;
}
#else if($class== "selector2"){
//override other classes in this way.
}
}
.uk-panel-badge {
position: absolute;
top: 0;
right: 0;
z-index: 1;
#include hook("uk-panel-badge");
}
Overall I still feel 1 is the best approach.