mirror of
https://github.com/yldio/copilot.git
synced 2024-11-10 21:30:06 +02:00
Grid - using varibale in for loop when creating grid classes
This commit is contained in:
parent
c8cb4107e8
commit
d7da99f87b
@ -43,6 +43,7 @@
|
||||
"lodash.get": "^4.4.2",
|
||||
"nyc": "^8.3.1",
|
||||
"param-case": "^2.1.0",
|
||||
"postcss-at-rules-variables": "0.0.25",
|
||||
"postcss-cssnext": "^2.8.0",
|
||||
"postcss-for": "^2.1.1",
|
||||
"postcss-loader": "^1.0.0",
|
||||
|
@ -3,12 +3,12 @@
|
||||
* https://github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css
|
||||
*/
|
||||
|
||||
@value half-gutter-width, grid-columns from "../../constants/sizes.css";
|
||||
@value half-gutter-width from "../../constants/sizes.css";
|
||||
@value sm-viewport, md-viewport, lg-viewport from "../../constants/breakpoints.css";
|
||||
|
||||
:root {
|
||||
--half-gutter-width: half-gutter-width;
|
||||
--grid-columns: 12;
|
||||
--grid-columns: 12; /* Cannot import values and use them within the loop */
|
||||
}
|
||||
|
||||
@define-mixin viewport $size {
|
||||
@ -18,14 +18,14 @@
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@for $i from 1 to 12 {
|
||||
@for $i from 1 to var(--grid-columns) {
|
||||
&.$(size)-$i {
|
||||
flex-basis: calc( ($i / var(--grid-columns)) * 100%);
|
||||
max-width: calc( ($i / var(--grid-columns)) * 100%);
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 0 to 12 {
|
||||
@for $i from 0 to var(--grid-columns) {
|
||||
&.$(size)-offset-$i {
|
||||
margin-left: calc( ($i / var(--grid-columns)) * 100%);
|
||||
}
|
||||
|
@ -12,6 +12,7 @@ const plugins = {
|
||||
options: {
|
||||
postcss: {
|
||||
plugins: [
|
||||
require('postcss-at-rules-variables')(),
|
||||
require('postcss-modules-values'),
|
||||
require('postcss-mixins')(),
|
||||
require('postcss-for'),
|
||||
|
Loading…
Reference in New Issue
Block a user