Invalid Sass variable when using number (with and without px) - css

I am using Sass for a project and I ran into an issue with variables. I'm specifically using the ".sass" format and not ".scss"
The error says: Invalid variable: "$weightBold = 700"
I can use variables for colors like this "$darkGrey: #333333" without errors, but I do get an error when I try to use a number for font-weight "$weightBold = 700" or width "$mediumWidth = 300px"

There is nothing wrong with the number, use : instead of =

You need to use : instead of = to assign a value to the variables:
$weightBold: 700;
$darkGrey: #333333;
$mediumWidth: 300px;
You can see some examples on the official documentation:
The most straightforward way to use SassScript is to use variables. Variables begin with dollar signs, and are set like CSS properties.
$width: 5em;

Related

CSS variables and SASS functions

We know the advantages of using CSS4 variables but what if we need to get these values from a SASS function like so?:
:root {
--gap-l: toRem(10);
}
toRem is a Sass function that I call to get the sizes dynamically:
$fontSize: 16;
#function toRem($val) {
#return $val / $fontSize * 1.6 + 0rem;
}
This won't fail but won't work either. To have this working we can just have the value directly on --gap-l or keep using SASS vars.
If I try something like --gap-l: #{toRem(10)}; this is the error I get:
It doesn't call the SASS function
You can definitely do that: what you're missing is simply using string interpolation, i.e.:
:root {
--gap-l: #{toRem(10)};
}
The reason is highlighted in their "breaking changes" documentation with regards to CSS variables:
To provide maximum compatibility with plain CSS, more recent versions of Sass require SassScript expressions in custom property values to be written within interpolation. Interpolation will also work for older Sass versions, and so is recommended for all stylesheets.
Try this --gap-l: #{toRem(10)};, the #{} syntax is called interpolation. In the experience of heading bugs myself, when you want to use a SASS expression's raw value along with normal CSS, if you can't use the concise syntax like just toRem(10), try adding interpolation to see if it works.
Another example:
$padding: 5px;
.element {
width: calc(100% - $padding); // will not work, it must be:
width: calc(100% - #{$padding});
}
Here is the code with the updated question: https://jsfiddle.net/bcw763en/.
Notice that if you put :root above the #function, it'll not work.

Calculations with variables in Stylus

I have been going through the Stylus docs and looking at examples, but I can't seem to get a simple calculation to work when using a variable. For example:
Works
margin-right: (1200 / 2)px;
Doesn't work
$siteWidth = 1200;
margin-right: ($siteWidth / 2)px;
I've seen many examples about using variables inside calc and using % before the variable name, or {..} around the variable, but I've tried both and neither works. Am I missing something obvious here?
Update
I failed to mention that I am storing my variables in a separate stylus file. If I create the variable in the same file as I am using it within the calculation, it works fine, however if I try to call the variable when it is imported from another file, it doesn't work. The variables file is the FIRST thing that is included in my main styles.styl file, and I can use the variables site wide without issue - just not when using it in a division calculation for some reason.
Codepen
UPDATE:
Try this instead of parenthesis:
#{$site-width / 2}px;
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#interpolation_
This was a bit of a tricky one, but I solved my problem using the below:
margin-right: 'calc(-%s / 2)' % $sitewidth;
I have actually changed my code a bit to include a new variable to get half the width of the site, as I might use it again:
$halfsitewidth = $sitewidth / 2;
margin-right: '-%s' % $halfsitewidth;

Less in Jetbrains: Nonshortand property width has shortthand value

I caught this warning under a less file under PHPStorm IDE:
Nonshortand property width has shortthand value
The problem code is below:
#body-width: 1000px;
.block-posts {
width: #body-width*0.5-25px;
}
Well, I see that should be a warning, that #body-width has a dash separator, and it take ambiguity into that sentence, which makes arithmetic operates on it.
Add I checked the style of less on the official site: http://lesscss.org/
It seems using a dash sign in a variable name is widely acceptable.
So how to adapt my code style to fix this warning?
And what do this warning exactly means?
Please help.

Crunching / Compiling LESS

I have tried both SimpLESS and Crunchapp both return the same error.
I am trying to compile this bootswatch http://bootswatch.com/cyborg/ and when I do I get the following error.
Compiler Errors
variable #grayLight is undefined (Line: 17)
Does anyone know what I am doing wrong?
You must define the variable in the same file where you using it:
#grayLight: #e7e7e7;
Or if it defined in another .less file you must import that to see the variable in another file:
#import "mixins.less";
You have to asign the variable value first, for example:
#grayLight: #ffffff;
It's exactly as error said, you use variable that is undefined.
Then you can call this variable at any place in code. If it happens you defined it earlier, check if names are equal (letterCase as well).

LESS.js + #arguments + Skip One Argument

I have been searching in Google etc., but I couldnt find what I was looking for (I hope I didnt overlook something).. So I thought my best bet is to ask you guys :)
I am playing around with LESS-JS for the first time and I really like it. However I have a little problem now.
I am using the #arguments variable like this:
.basicBorder(#width:1px, #type:solid, #color:#black){
border:#arguments;
}
Which works as expected. Now when I want the border to be red, I am adding this to the element in my css:
.basicBorder(1px, solid, #red);
Which also works as expected. However I would like to avoid writing 1px, solid,, since these are my default values already, but when I try this:
.basicBorder(#red);
Or this:
.basicBorder(,,#red);
It doesnt work.
So I was wondering if any1 knows how I could "skip" the first 2 variables so that I can just input the color in case I dont want the border-width and type to be changed.
I hope you get what I am trying to say!
Regards!
You actually can name later parameters and skip the first ones. The syntax for your question is:
.basicBorder(#color:#red);
You can also use normal ordered arguments at the beginning and pluck out named arguments from the rest of the parameters:
.basicBorder(2px, #color:#red);
This sets #width to 2px, #type to the default, and #color to #red. Really nice if you have more seldom used arguments.
The parametric mixins in LESS works sorta like javascript functions, you can't skip the first parameters. So if you want to only change the color, you could rewrite the mixin like this:
.basicBorder(#color:#black, #width:1px, #type:solid){
border:#width #type #color;
}
Then you'd be able to call it like this:
.basicBorder(#red);
.basicBorder(#red, 2px, dotted);
edit
Using your original mixin, you could also create these
.basicBorderType(#type) {
.basicBorder(1px, #type, #black);
}
.basicBorderColor(#color) {
.basicBorder(1px, solid, #color);
}
Now you could overwrite any of the styles:
.basicBorderType(dotted); //1px dotted black;
.basicBorderColor(#red); //1px solid red;
.basicBorder(2px); //2px solid black;
A bit of a hack, but it's the only thing I can think of to help you out...

Resources