https://github.com/teefouad/easy-media-queries

A node-sass importer for Whiteboard Media mixin. It allows creating breakpoints and defining styles for each breakpoint in a simple way.
https://github.com/teefouad/easy-media-queries

Last synced: 25 days ago
JSON representation

A node-sass importer for Whiteboard Media mixin. It allows creating breakpoints and defining styles for each breakpoint in a simple way.

• Host: GitHub
• URL: https://github.com/teefouad/easy-media-queries
• Owner: teefouad
• Created: 2016-01-03T19:02:07.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2016-01-05T05:17:53.000Z (almost 9 years ago)
• Last Synced: 2024-10-09T16:22:23.034Z (about 1 month ago)
• Language: CSS
• Homepage:
• Size: 4.88 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Easy Media Queries

A node-sass importer for Whiteboard Media mixin. It allows creating breakpoints and defining styles for each breakpoint in a simple way.

## Install

``` $ npm install --save-dev easy-media-queries ```

## Usage

You can use this importer in node-sass or any project that depends on node-sass. the only thing you need to do to make this work is add the importer to the options and include the mixin.

### node-sass

```js

var sass = require("node-sass");

var easyMediaQueries = require("easy-media-queries");

sass.render({

  data: '@import "wb-media"; .heading { @include wb-media("BREAKPOINT_NAME') {...}

```


### Simple example

```scss

@import "wb-media";

// Define breakpoints

$wb-breakpoints: wb-add-breakpoint("tablet", (

  "value"              : 768px

));

$wb-breakpoints: wb-add-breakpoint("mobile", (

  "value"              : 480px

));

// Primary title styles

.primary-title {

    display: block;

    font-size: 32px;

    

    @include wb-media('