-
Notifications
You must be signed in to change notification settings - Fork 2.2k
Description
- Proposal (Proposal for First Class Mixins: Draft 1 #3626)
- Dart Sass (implement first class mixins dart-sass#2073)
- Embedded Host (add first class mixins embedded-host-node#253)
- Tests (add tests for first class mixins sass-spec#1933)
- Documentation (Document first-class mixins sass-site#852)
- Update embedded protocol (add first class mixins to embedded sass protobuf and JS API #3674 (review))
- Update canonical spec ([First-Class Mixins] Flush to spec #3711)
One of the largest stumbling blocks that contributors face right now is being able to cleanly build extendable systems using Sass. While the zip/index method currently proposed as a best practice works OK for variables, it simply does not work for mixins or functions. While we could build a lookup function/mixin for dealing with this, if we are looking to have 3rd party add-ons to a system we've made, the writing of that lookup function/mixin needs to be passed off to the end user, creating a terrible end user experience especially for inexperienced users. As system contributors, we need a way to develop APIs for our systems in a way that is contained from within our extensions. The only way I can see this being accomplished is through mixin and function interpolation.
We are currently running into this problem with attempting to create an Output API for the next generation of Susy, one of the most widely used Compass extensions available (between the two versions, it's something like the 2nd most installed Sass/Compass gem that's not Sass or Compass itself; right behind Bootstrap). While we can create a lookup function/mixin for people to contribute output styles, it leaves the burden on the end user to do it if there are output styles created in contrib. We are thus left with the following user experience, which IMO is terrible:
Inside Extension
$output-styles: isolation, float;
@mixin output-list($input, $output) {
@if $output == 'isolation' {
@include isolation($input);
}
@else if $output == 'float' {
@include float($input);
}
}
@mixin isolation($input) {…}
@mixin float($input) {…}Inside non-core Output Style
$output-styles: append($output-styles, 'table');
@mixin table($input) {…}Inside User's file
Would need to write to use non-core Output style, a bit too technical for most users
@debug $output-styles;Read output styles from debug. Only really works from Command Line, not from GUI apps which many many people use.
DEBUG: "isolation", "float", "table"@mixin output-list($input, $output) {
@if $output == 'isolation' {
@include isolation($input);
}
@else if $output == 'float' {
@include float($input);
}
@else if $output == 'table' {
@include table($input);
}
}What we'd much much rather prefer is to do the following.
Inside Extension
$output-styles: 'isolation', 'float';
@mixin output-styles($input, $output) {
@each $style in $output-styles {
@if $output == $style {
@mixin #{unquote($style)}($input);
}
}
}
@mixin isolation($input) {…}
@mixin float($input) {…}Inside non-core Output Style
$output-styles: append($output-styles, 'table');
@mixin table($input) {…}Inside User's file
NOTHING! They'd just need to use the system like they'd expect to be able to without any setup! Everyone's happy!