How to install sass-mq with npm or yarn?

Install via npm with 'npm install sass-mq --save' or yarn with 'yarn add sass-mq'. Then, import it in Sass files using @use, as shown in the README examples for setup.

sass-mq vs Bootstrap breakpoints for responsive design?

sass-mq offers more flexibility with custom breakpoint naming and em-based queries, while Bootstrap provides pre-styled grid components. Choose sass-mq for tailored Sass workflows and Bootstrap for rapid UI development with built-in classes.

How to debug active breakpoints with sass-mq?

Set the $show-breakpoints variable to a list of breakpoints ordered by width. This displays the current breakpoint name and values in the viewport's top right corner during development, as illustrated in the README gif.

Does sass-mq work with CSS modules or PostCSS?

sass-mq requires Sass preprocessing, so it integrates with build tools that support Sass. Direct use with CSS modules or PostCSS may need additional configuration, as it's not a PostCSS plugin.

How to handle print styles with sass-mq?

Change the media type by setting $media-type to 'print' in the configuration. Then, use the mq() mixin to apply styles specific to print media, as described in the custom media type section.

sass-mq or writing media queries manually in SCSS?

sass-mq adds abstraction for consistency and team communication, ideal for large projects. Manual media queries are simpler for small codebases but can become error-prone without standardization.

Open-Awesome

Sass MQ

MITSCSSv7.0.1

A Sass mixin for elegantly composing media queries with named breakpoints and em-based compilation.

Visit Website GitHub

2.0k stars143 forks0 contributors

What is Sass MQ?

Sass MQ is a Sass mixin library that provides an elegant and maintainable way to write CSS media queries. It solves the problem of verbose and error-prone media query syntax by allowing developers to use named breakpoints and compile them to em-based queries for better responsive design.

Target Audience

Frontend developers and teams working with Sass who need a consistent, readable system for managing responsive breakpoints across large projects.

Value Proposition

Developers choose Sass MQ for its clean API, team-friendly breakpoint naming, and mobile-first approach, which reduces complexity and improves collaboration in responsive web development.

Overview

A Sass mixin that helps you compose media queries in an elegant way.

Use Cases

Best For

Implementing mobile-first responsive designs in Sass projects
Creating a shared breakpoint language across design and development teams
Converting pixel-based media queries to em units for better accessibility
Debugging active breakpoints during frontend development
Maintaining consistent responsive behavior across large codebases
Building component libraries with standardized responsive patterns

Not Ideal For

Projects using CSS-in-JS frameworks like styled-components or Emotion that handle responsive design internally
Teams preferring to rely solely on modern CSS features like container queries without Sass preprocessing
Environments where Sass compilation is not set up or desired, such as some static site generators
Small-scale prototypes where the overhead of breakpoint configuration and Sass modules isn't justified

Pros & Cons

Pros

Em-based Accessibility

Automatically converts pixel breakpoints to em units, improving zoom support and accessibility as highlighted in the README's reference to CSS-Tricks.

Team Communication

Encourages a ubiquitous language with named breakpoints, enhancing clarity across designers and developers, as emphasized in the setup instructions.

Development Debugging

Includes a feature to display the active breakpoint in the viewport during development, demonstrated with a gif in the README for easier debugging.

Mobile-first Syntax

Provides intuitive parameters like $from and $until that enforce a mobile-first approach, simplifying responsive code structure.

Cons

Sass Module Complexity

The transition to @use directive requires scoped imports in every file, increasing setup and cognitive load compared to the old @import, as detailed in the README notes.

No Legacy Browser Support

Version 6 and up removed fallbacks for older browsers like IE8, limiting use in projects requiring backward compatibility, as noted in the description.

Limited Query Types

Focuses primarily on width-based media queries; lacks built-in support for height, container queries, or other advanced responsive techniques mentioned in the fork suggestion.

Frequently Asked Questions

Related Projects

Breakpoint

Really simple media queries in Sass

Stars2,081

Forks145

Last commit1 year ago

mq-scss

Extremely powerful Sass media query mixin. Allows you to create almost any media query you can imagine.

Stars126

Forks7

Last commit7 years ago

Sass MediaQueries

Collection of useful media queries mixins for Sass (including iOS devices, TVs and more)

Simple, elegant and maintainable media queries