Add support for css variables to mixin #497
Conversation
|
@HanneloreVerbraekel Looking at the generated css output it looks like the mixin part is missing in css. Atm we use the I'm not sure, but are you using the scss file in css? For add css variable support i think, we need a complete new file (maybe we can do this while rollup, so that we don't need to add a fix css file inside the repo) |
|
Hi! We are using css variables in an .scss file. I can test the code with our old scss variables? |
|
Ah... if i have understand correctly you are passing in a variable like Example: |
Correct! |
|
Whats the benefit to use css variables inside scss? What do you think about a extra file, which is place css, with css variables? |
|
We provide them through our design system. The implementation is scss. |
|
@HanneloreVerbraekel can you apply the same code changes also to the less file? So we have same behavior in scss & less |
|
Hi! I added it. Can you thorougly check it, though? This is my first time using less! |
thank you, little syntax error, the rest looks good. Can you fix that, than i think this feature is ready |
|
Should be fixed now? |
ember-power-calendar/less/base.less
Outdated
| @@ -93,20 +94,20 @@ | |||
| @cell-size: null, | |||
| @cell-width: @cell-size, | |||
| @cell-height: @cell-size, | |||
| @cell-with-spacing-width: @cell-width + 2px, | |||
| @cell-with-spacing-width: calc(~"@{cell-width} + 2px"); | |||
There was a problem hiding this comment.
";" is not correct, should be like before ","
ember-power-calendar/less/base.less
Outdated
| @row-padding-top: 0, | ||
| @row-padding-bottom: 0, | ||
| @row-padding-left: 0, | ||
| @row-padding-right: 0, | ||
| @row-width: @cell-with-spacing-width * 7 - 2px + @row-padding-left + @row-padding-right, | ||
| @row-height: @cell-height + 2px, | ||
| @row-width: calc(~"(@{cell-with-spacing-width} * 7) - 2px + @{row-padding-left} + @{row-padding-right}"); |
There was a problem hiding this comment.
";" is not correct, should be like before ","
ember-power-calendar/less/base.less
Outdated
| @row-width: @cell-with-spacing-width * 7 - 2px + @row-padding-left + @row-padding-right, | ||
| @row-height: @cell-height + 2px, | ||
| @row-width: calc(~"(@{cell-with-spacing-width} * 7) - 2px + @{row-padding-left} + @{row-padding-right}"); | ||
| @row-height: calc(~"@{cell-height} + 2px"); |
There was a problem hiding this comment.
";" is not correct, should be like before ","
While migrating from scss to css variables, we bumped into some issues with the ember power calendar mixin:
codeFrame: Error: Undefined operation "calc(32px + var(--our-variable)) * 1". ╷ 128 │ padding-left: $cell-with-spacing-width * 1; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ /tmp/broccoli-474vURcC73g1RJ/out-944-funnel_funnel_styles/app/styles/ember-power-calendar.scss 128:21 ember-power-calendar()This code would make it possible to use css variables in the scss variables needed for the ember power calendar mixin.