Giter Club home page Giter Club logo

Comments (4)

jakob-e avatar jakob-e commented on May 31, 2024

Use case example 2 - re-composition/render order

In this scenario, we want to ensure an all: unset reset comes in earlier than our base reset regardless of include order. This could also be used to ensure base components being included before variation overrides etc.

Codepen Demo

@use 'sass:list';

$inspect-compile-state: false;

@mixin compile {
    @no-render {
        $inspect-compile-state: true !global; 
        @content;
        $inspect-compile-state: false !global;
    }
    @content;
};

// list to keep track of what was rendered
$once-list: ();

// list to keep track of what was included
$used-mixin-list: ();


// wrapper to mark a mixin as used
@mixin mark-as-used($token) {
    @if $inspect-compile-state {
        $used-mixin-list: list.append($used-mixin-list, $token) !global;
        @content;
    }
    
    @else if not list.index($once-list, $token) {
        $once-list: list.append($once-list, $token) !global;
        @content;
    } 
    
} 

// wrapper to render mixin if used (at a later point)
@mixin render-if-used($token) {
    @if list.index($used-mixin-list, $token) {
        @content;
    }
}


// base reset
@mixin reset-base {
    // render reset-button here if included later than 
    // the base reset itself  
    @include render-if-used('reset-button') {
        @include reset-button;
    }
    *,*::before,*::after { 
        box-sizing: border-box; margin: 0; 
    }
}

// button reset
@mixin reset-button {
    @include mark-as-used('reset-button') {
        button {
            all: unset;		
        }
    }
}

// assemble 
@include compile {
    // this is where we want reset-button to render
    // to avoid overriding our base reset  
    @include reset-base;
    @include reset-button;	
}

CSS Output

/* This part should not render in the CSS
@no-render {
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
    }
    button {
      all: unset;
    }
  }
*/

/* button reset ported here - even if included after base reset */
button {
  all: unset;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
}

from sass.

nex3 avatar nex3 commented on May 31, 2024

I don't think this reaches the high bar for adding new syntax to the language. I don't see tracking which mixins would theoretically be used by a given @content block as something with broad utility across a wide range of use-cases.

from sass.

jakob-e avatar jakob-e commented on May 31, 2024

@nex3

What about the alternative version that allows printing @​content in a comment block? (that does not introduce new syntax)... or allow using meta.inspect(@​content)

I've found this introspection to be quite useful (it can to some extent, pun intended, be implemented using %placeholders - but it has problems with @ rules being lifted out). IMO the ability to control composition +. linting/error handling is what makes Sass stand out from PostCSS and modern CSS features.

/* #{@content} */   

or 

/* #{meta.inspect(@content)} */    

or 

$content-string: meta.inspect(@​content);

from sass.

nex3 avatar nex3 commented on May 31, 2024

That's still a new language feature: it's adding a script-level @content syntax, which is if anything more complex than a new at-rule because it requires us to determine what it means for statement-level rules to be referenced at the expression level.

from sass.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.