Wondering what’s next for npm?Check out our public roadmap! »

    sass-scoped-media-query

    2.0.1 • Public • Published

    sass-scoped-media-query

    Build Status

    Scope CSS styles and apply them only inside provided selector and media query pairs.

    "Hacky" workaround for element queries.

    Install

    npm install sass-scoped-media-query --save

    Usage

    Input:

    @use 'sass-scoped-media-query' as *;
    
    @include scoped-media-query(('screen and (min-width: 500px)', '.jasper')) {
    	.gizmo {
    		color: #f00;
    	}
    }
    
    @include scoped-media-query(
    	('screen and (min-width: 500px)', '.gigi'),
    	('screen and (min-width: 1000px)', '.lola')
    ) {
    	.gunner {
    		font-family: 'Helvetica', sans-serif;
    	}
    }

    Output:

    @media screen and (min-width: 500px) {
    	.jasper .gizmo {
    		color: #f00;
    	}
    }
    
    @media screen and (min-width: 500px) {
    	.gigi .gunner {
    		font-family: 'Helvetica', sans-serif;
    	}
    }
    
    @media screen and (min-width: 1000px) {
    	.lola .gunner {
    		font-family: 'Helvetica', sans-serif;
    	}
    }

    API

    mixin(mediaQuery)

    Returns scoped CSS styles based on selector and media query pair.

    mediaQuery

    Type: sass.types.List

    List of selector and media query pairs.

    Browser support

    Works where media queries are supported.

    References

    License

    MIT © Ivan Nikolić

    Install

    npm i sass-scoped-media-query

    DownloadsWeekly Downloads

    400

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    6.43 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar