I'm calling DotLess via MSBuild.
Here's my file:
#import "variables.less";
#media all and (min-width: #break-mobile) {
.page-container {
.main {
float: right;
width: percentage(700/#siteMaxWidth);
}
}
}
"variables.less" contains:
/* defaults */
#siteMaxWidth: 1070px;
On compilation, I receive this error:
Expected unitless number in function 'percentage', found 0.654205607px on line 9 in file
This compiles well in CodeKit.
Are there any DotLESS experts that might help?
According to the unit tests related to the PercentageFixture which looks like this:
AssertExpression("25%", "percentage(25px / 100px)");
It looks like if you specify the px unit for the 700 value as well, it should work:
width: percentage(700px/#siteMaxWidth);
Related
I'm trying to understand why a line on my .scss file was removed from the resulting .css file.
SCSS file:
.grid1 {
display: -ms-grid; // Why is this removed from the output?
display: grid;
}
.grid2 {
display: grid;
display: -ms-grid; // although nothing is removed here (as I expected)
}
Result:
.grid1 {
display: grid; }
.grid2 {
display: grid;
display: -ms-grid; }
I'm using node-sass 4.14.1 if that matters
EDIT:
It's apparently because we exclude IE in the browserslist in our package.json, so it's not a SASS thing.
Thanks guys for the answers
It is because you are changing the value of the display tag for .grid1 with display: grid on the next line of the code for .grid1. Because of that try having the line display: -ms-grid after the display :grid.
Let me explain your code:
.grid1 {
display: -ms-grid; /* Here this line is being ignored as its value is changed on the next line of the code */
display: grid;
}
.grid2 {
display: grid; /* Here this line is being ignored as its value is changed on the next line of the code */
display: -ms-grid;
}
Note that actually the same (ignoring of the first display:.. line as well in .grid2. By that I mean that in .grid2, display: grid is being ignored since SCSS knows that display will have a change of value on the next line.
My guess is because it expects the vendor prefixed style rule to be first, if it exists at all, based on the way the different browsers expect the rules. Since most of the browsers know how to interpret display: grid, it throws out the display: -ms-grid unless you specifically force the browser to deal with it first.
Could also just be a bug in node-sass.
Basic idea would be to define my media query in one place. My current attempt looks like so:
$mobile: "#media (max-width: 600px):not(#app.force-desktop)";
#{$mobile} {
...
}
However this results in the error: SassError: Invalid CSS after "#": expected selector, was "#media (max-width: " Setting $mobile to (for example) only :not(#app.force-desktop) seems to compile properly.
Maybe there is a different way how to solve this issue, which would be totally fine by me.
You can just remove the #media:
$mobile: '(max-width: 600px):not(#app.force-desktop)';
#media #{$mobile} {
body {
color: blue;
}
}
I couldn't find a solution for this problem: I need to set a margin in SASS with a max between 2 values, one is a calc() and the other is a regular px value. It would be something like this:
$calculation: calc(15vw + 10px);
.cssClass {
margin-right: max($calculation, 100px);
}
Any ideas on how to create a SCSS function or some way to make this work? Thank you in advance!
The Sass max() function doesn't work with values that have different units.
That said, you can use the CSS max() function by overriding the Sass version with your own:
// Override Sass function
#function max($numbers...) {
#return m#{a}x(#{$numbers});
}
$calculation: calc(15vw + 10px);
.cssClass {
margin-right: max($calculation, 100px);
}
...the SCSS above compiles to this CSS:
.cssClass {
margin-right: max(calc(15vw + 10px), 100px);
}
Credit to Jianqiu Xiao on GitHub for pointing out this solution. Having to create a custom function is an unfortunate Sass compiler quirk, though it has apparently been fixed in Dart Sass already.
Searched but can't find an answer..
I have an element which gets generated (by an external platform) with the following classes: p-button and button.
Now the SCSS is like this:
.p-button {
&.button {
margin: 10px;
}
}
But I want to refactor using mixin includes (this is a big project so there is no other way of making this code better except using mixins). The mixin takes the given selector and applies a . to it. I can't change the mixin, as it is used by many other teams, so I can't pass the ampersand together with the selector. I tried this:
.p-button {
& {
#include button-appearance("button") {
margin: 10px;
}
}
}
But that doesn't work (puts a space between it). You can't do this:
.p-button {
&#include button-appearance("button") {
margin: 10px;
}
}
Anyone have a clue?
EDIT: Here is the mixin
#mixin button-appearance(
$appearance-class,
$show,
$background-color,
$background-image,
$background-position) {
$sel: $button-selector;
#if $appearance-class {
$sel: $sel + '.' + $appearance-class;
}
#{$sel} {
#include normalized-background-image($background-image);
#include show($show);
background-color: $background-color;
background-position: $background-position;
}
#content;
}
EDIT 2: Here is the $button-selector (I can not edit this in the platform, but maybe overwrite it in my own project?)
$button-class: 'p-button';
$button-selector: '.#{$button-class}';
Everyone, finally found the solution. I just removed the &.button from the .p-button mixin include and now it works:
#include button-appearance ("button") { *styles* }
#include button-appearance () { *styles* }
Edited the answer after the original question was edited adding the used and un modifiable mixin
The original mixin does not append the ‘#content’ passed to the mixin to the generated selector. So if you cannot modify the original mixin, the only way is to add your properties outside the mixin. According to the mixin the selector will match a predefined ‘$button-selector’ variable, so it won’t use your class.
So, if you want to use the same class defined in ‘$button-class’, try the following:
#{$button-selector}.button {
margin: 10px;
}
Will output:
.p-button.button {
margin: 10px;
}
I'm using
.w400 {
width: 400px;
}
.w110 {
width: 110px;
}
.w600 {
width: 600px;
}
is it possible to make dynamic class with sass?
something like
.w(size) {
width: size+px
}
If you want to be able to use arbitrary .w(something) classes, I believe (see below) that is not possible with Sass. However, if you know beforehand what sizes you need, you could use mixins with arguments to generate the classes. Something like this:
#mixin width-class($size) {
.w#{$size} {
width: $size * 1px;
}
}
You would use it like this:
#include width-class(400);
#include width-class(110);
This generates the following CSS:
.w400 {
width: 400px; }
.w110 {
width: 110px; }
Now, if you want to avoid writing a new #include line for each of the classes, you can create another mixins (or combine the two mixins into one):
#mixin dynwidths($size-list) {
#each $size in $size-list {
#include width-class($size)
}
}
Now you can pass it a list of widths. This generates the same CSS as above:
#include width-classes(400 110);
Note: This is just a guess, but wildcard class names might be possible by extending Sass with Ruby. However, I'm not sure if this is a desirable feature.