@littlemissrobot/sass-breakpoints
Advanced tools
Comparing version
{ | ||
"name": "@littlemissrobot/sass-breakpoints", | ||
"version": "1.0.0", | ||
"version": "1.0.1", | ||
"description": "Little Miss Robot breakpoints setup for defining breakpoints and applying media queries", | ||
@@ -31,3 +31,3 @@ "main": "index.js", | ||
"devDependencies": { | ||
"@littlemissrobot/stylelint-config": "^1.0.15", | ||
"@littlemissrobot/stylelint-config": "^1.1.0", | ||
"browser-sync": "^2.26.7", | ||
@@ -41,4 +41,3 @@ "del": "^5.1.0", | ||
"postcss-preset-env": "^6.7.0", | ||
"postcss-scss": "^2.1.1", | ||
"stylelint": "^13.5.0" | ||
"postcss-scss": "^2.1.1" | ||
}, | ||
@@ -45,0 +44,0 @@ "dependencies": { |
@@ -288,1 +288,45 @@ # Little Miss Robot - Sass breakpoints | ||
``` | ||
### suffixicate($at, $to) | ||
Create a class that is suffixed with one of the viewports defined in the | ||
`$viewports` variable. This declaration will apply styles until a breakpoint is | ||
reached. | ||
Parameters: | ||
* **$at**: A list of names from $viewports variable to apply the class | ||
declaration to. This declaration will be applied if the viewport is above the | ||
breakpoint. | ||
* **$at**: A list of names from $viewports variable to apply the class | ||
declaration to. This declaration will be applied if the viewport is below the | ||
breakpoint. | ||
```scss | ||
@use "@littlemissrobot/sass-breakpoints" as _b with ( | ||
$viewports: ( | ||
viewport-4: 480px, | ||
viewport-7: 720px, | ||
viewport-9: 992px, | ||
viewport-12: 1200px | ||
) | ||
); | ||
.u-hide { | ||
@include _b.suffixicate( | ||
$at: (viewport-7, viewport-9), | ||
$to: (viewport-4, viewport-12) | ||
) { | ||
display: none !important; | ||
} | ||
} | ||
``` | ||
The example above will generate: | ||
* u-hide@at:viewport-7 | ||
* u-hide@at:viewport-9 | ||
* u-hide@to:viewport-4 | ||
* u-hide@to:viewport-12 |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
20368
19.28%10
-9.09%13
8.33%332
15.28%