https://github.com/zessx/sass-queries

Manage media-queries in Sass easily.
https://github.com/zessx/sass-queries

css sass

Last synced: about 1 year ago
JSON representation

Manage media-queries in Sass easily.

• Host: GitHub
• URL: https://github.com/zessx/sass-queries
• Owner: zessx
• License: mit
• Created: 2015-01-23T15:57:34.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2017-12-08T13:07:42.000Z (over 8 years ago)
• Last Synced: 2025-04-18T19:41:34.626Z (about 1 year ago)
• Topics: css, sass
• Language: CSS
• Homepage: https://work.smarchal.com/sass-queries/
• Size: 57.6 KB
• Stars: 4
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# SassQueries

![SassQueries](https://raw.githubusercontent.com/zessx/sass-queries/master/sass-queries.png)  

Manage media-queries in Sass easily.

## Configuration

Put `sass-queries.scss` file in your project, and include it via your Sass manifest:

    @import "helpers/sass-queries";

You can fully configurate SassQueries thanks to a bunch of variables prefixed with `$sq-`.  

SassQueries provides default values for these variable, so you just have to put the one you need in your `variables.scss` file:

    // Set your breakpoints: label / min-width

    $sq-breakpoints: (

        mobile:    320px,

        tablet:    768px,

        desktop:   992px,

        wide:      1200px

    );

    // What is the media type?

    $sq-media: "all";

    // Enable (or not) a small tag displaying your current breakpoint

    $sq-debug: false;

    // Use mobile first or not

    $sq-mobile-first: true;

    

## Usage

SassQueries comes with a unique mixin: `media()`, which allows you to target a starting/ending breakpoint, to specify a media type, and even to add custom options.

    .selector {

      @include media($from: tablet) {

        // starting breakpoint

      }

      @include media($until: desktop) {

        // ending breakpoint

      }

      @include media($from: desktop, $media: tv) {

        // media type specified

      }

      @include media($until: tablet, $and: "(orientation: landscape)") {

        // additional option

      }

      @include media($from: tablet, $until: desktop) {

        // starting + ending breakpoint

      }

    }

## Todo

- [x] Use default values

- [x] Display debug tooltip

- [x] Add mobile-first option

- [ ] Sort `$sq-breakpoints` map depending of `$sq-mobile-first`