Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gregorisoria/sass-mediaquery-singleline
SASS Media queries on a single line
https://github.com/gregorisoria/sass-mediaquery-singleline
codepen css frontend media-queries mediaquery mixins sass scss
Last synced: 3 months ago
JSON representation
SASS Media queries on a single line
- Host: GitHub
- URL: https://github.com/gregorisoria/sass-mediaquery-singleline
- Owner: GregoriSoria
- License: mit
- Created: 2019-12-19T22:30:02.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-05T06:52:25.000Z (about 2 years ago)
- Last Synced: 2024-10-15T16:23:04.071Z (3 months ago)
- Topics: codepen, css, frontend, media-queries, mediaquery, mixins, sass, scss
- Language: SCSS
- Homepage: https://gregorisoria.github.io/sass-mediaquery-singleline
- Size: 343 KB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
sass-mediaquery-singleline
SASS Media queries on a single line.
**Never** again use media queries!
### Install
```bash
npm install sass-mediaquery-singleline --save
```
### How to import
On your scss (with webpack), add:
```scss
@import '~sass-mediaquery-singleline/main';
```
### The calc is based on `vw` metric considering the desktop width and mobile width - whatever your metric unit _(px, pt, etc)_ :D - providing by designer's layout (Figma, Zeplin, PSD, Sketch, etc).
So, you **need** to change the below sass variables to your respective layout viewport widths:
```scss
// default values
$deskSize: 1920;
$mobileSize: 375;
```
### Custom variables
```scss
// custom available variables
$deskSize: 1920 !default;
$mobileSize: 375 !default;
$mobileIdentifier: 768 !default;
$considerMinimalFont: true !default;
$minFont: 10 !default;
$minFontResolution: 1280 !default;
```
- `deskSize` (Number) Desktop **width** defined by the designer layout
- `mobileSize` (Number) Mobile **width** defined by the designer layout
- `mobileIdentifier` (Number) Defines @media mobile identifier (max-width) to start calc with third attr() function param
- `considerMinimalFont` (Boolean) Defines if you want se a minimal font on tiny resolutions(`minFontResolution`)
- `minFont` (Number) The minimal font according to defined resolution(`minFontResolution`)
- `minFontResolution` (Number) Defines the resolution that `minFont` will be applied
### Usage:
```scss
.an-element {
@include attr(height, 200, 140); // height 200(calculated) on desk and height 140(calculated) on mobile
@include attr(display, flex, block); // display: flex on desk and display: block on mobile
@include attr(flex-direction, false, column); // media mobile with flex-direction: column, but on desk wasn't created
@include mediaAttr(height, 100, 320); // media max-width: 320px with height: 100[calculated]
@include attr(width, 20px, 15px); // values with units will be put exactly what you type
}
```
- **`attr($attr, $desk, $mobile)`** Set an attribute responsible equals to desktop and mobile according to designer's resolutions
- **`attr`** (CSS Attribute) [**Required**] The attribute name that you want responsible and/or calculated
- **`desk`** (CSS Value|Number) [Not Required, can be `false`] The desktop resolution value *according to designer's layout* or a value with unit to set an exact value
- **`mobile`** (CSS Value|Number) [Not Required, can be `false`] The mobile resolution value *according to designer's layout* or a value with unit to set an exact value
- **`mediaAttr($attr, $value, $resolution)`** Set an attribute responsible according to defined resolution parameter
- **`attr`** (CSS Attribute) [**Required**] The attribute name that you need responsible and/or calculated
- **`value`** (CSS Value|Number) [**Required**] The resolution value that will be applied to `resolution` or a value with unit to set an exact value
- **`resolution`** (Number|CSS Media Condition) [**Required**] The resolution that the value will be applied
See the Pen
SASS MediaQuery SingleLine Sample by Grégori Sória (@gregorisoria)
on CodePen.
### Dev
If you want to dev or **test** this mixin, run the command below
`npm run dev`
##### Tip: Use a css minifier
### Licence
sass-mediaquery-singleline is open-sourced software licensed under the [MIT license](LICENSE.md).