Skip to content

Instantly share code, notes, and snippets.

@jakob-e
Created January 24, 2021 11:20
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 jakob-e/545e474e05b61f518566e5cb777db153 to your computer and use it in GitHub Desktop.
Save jakob-e/545e474e05b61f518566e5cb777db153 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----------------------------------------
// emulate include-context
// ----------------------------------------
$include-context-list: ();
@mixin include-context($name){
$include-context-list: append($include-context-list, $name, comma) !global;
@content;
$include-context-list: nth-remove($include-context-list, -1) !global;
}
@function include-context(){
@return $include-context-list;
}
// helper
@function nth-remove($list, $n){
$r: ();$n: if($n < 0, length($list) + $n + 1, $n); $b: is-bracketed($list); $s: list-separator($list);
@for $i from 1 through length($list){ @if $i != $n { $r: append($r, nth($list, $i)); }}
@return join((), $r, $s, $b);
}
// ----------------------------------------
// ----------------------------------------
// Mixins
// ----------------------------------------
@mixin button {
@include include-context(button){
button {
include-context: include-context();
@if index(include-context(), log-in){
message: 'login buttons are special';
}
}
}
}
@mixin card {
@include include-context(card){
.card {
@include button;
}
}
}
@mixin collection {
@include include-context(collection){
.collection {
@include card;
}
}
}
@mixin sign-up {
@include include-context(sign-up){
.sign-up {
@include button;
}
}
}
@mixin log-in {
@include include-context(log-in){
.log-in {
@include button;
}
}
}
@mixin modal {
@include include-context(modal){
.modal {
@include log-in;
}
}
}
@mixin sidebar {
@include include-context(sidebar){
.sidebar {
@include collection;
@include button;
}
}
}
// ----------------------------------------
// Assemble
// ----------------------------------------
@include button;
@include log-in;
@include card;
@include collection;
@include sign-up;
@include sidebar;
@include modal;
button {
include-context: button;
}
.log-in button {
include-context: log-in, button;
message: "login buttons are special";
}
.card button {
include-context: card, button;
}
.collection .card button {
include-context: collection, card, button;
}
.sign-up button {
include-context: sign-up, button;
}
.sidebar .collection .card button {
include-context: sidebar, collection, card, button;
}
.sidebar button {
include-context: sidebar, button;
}
.modal .log-in button {
include-context: modal, log-in, button;
message: "login buttons are special";
}
{
"sass": {
"compiler": "dart-sass/1.26.11",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment