https://github.com/webdevluke/styled-components-sass-mq
A port of sass-mq for styled-components to help you compose media queries in an elegant way.
https://github.com/webdevluke/styled-components-sass-mq
Last synced: 11 months ago
JSON representation
A port of sass-mq for styled-components to help you compose media queries in an elegant way.
- Host: GitHub
- URL: https://github.com/webdevluke/styled-components-sass-mq
- Owner: WebDevLuke
- License: mit
- Created: 2018-03-08T17:38:27.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-03-09T09:00:47.000Z (almost 8 years ago)
- Last Synced: 2025-02-24T18:03:41.309Z (12 months ago)
- Language: JavaScript
- Size: 92.8 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.MD
- License: LICENSE
Awesome Lists containing this project
README
## Install
Install `styled-components-sass-mq` using npm:
```
npm install --save styled-components-sass-mq
```
## Usage
Refer to [sass-mq](https://github.com/sass-mq/sass-mq) docs for a full list of options. `styled-components-sass-mq` provides feature parity with [sass-mq](https://github.com/sass-mq/sass-mq), with exception to its `show-breakpoint` and `add-breakpoint` functions.
Here's a basic example:
```JSX
import React from 'react';
import styled from 'styled-components';
import createMediaQueries from 'styled-components-mq';
// Use sass-mq default breakpoints, or like below, create your own
const breakpoints = {
"sm": 370,
"md": 768,
"lg": 1024,
"xlg": 1440
}
// Inject your custom breakpoints into the mq function
const mq = createMediaQueries(breakpoints);
// Use like below
const Title = styled.h1`
font-size: 2.5em;
text-align: center;
color: palevioletred;
${mq({from: 'md'})`
font-size: 5em;
`}
`;
// A more advanced example
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
${mq({from: 'md', until: 'xlg', and: '(orientation: landscape)', mediaType: 'only screen'})`
background: red;
`}
`;
Hello World, this is my first styled component, with easy to use media queries!
```