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.
Related
I am trying to learn media query in css and I have few questions about some of the examples that I have come across. The queries are mentioned below:
I have seen a variable was declared in the following format in a .scss file which is used in a react component:
$screen-xs-max: ($screen-sm-min - 1);
Why is -1 used here?
The second question that I have is about this:
$large-screens-up: "(min-width: #{$screen-lg-min})";
I have 2 questions about these lines of code:
Why is the variable declared within the " ", doesn't that make the variable a string?
Why is # used here? I guess it is to find the variable $screen-lg-min in the path from where it is imported, but I am not sure if its correct. I just want to confirm if that's the correct thing or correct me if I am wrong.
Can anyone please help me with these doubts? I am sorry if this is too simple. I tried getting the answers myself, but couldn't find it.
In SCSS
Consider $screen-sm-min:546px; which will be declared in scss variables file in your project or the node modules folder.
$screen-xs-max: ($screen-sm-min - 1); means that the value of $screen-xs-max will be 1 less than $screen-sm-min that is 545px.
$large-screens-up: "(min-width: #{$screen-lg-min})";
Varible in scss can be used directly using $varible-name ,
But when you want to use the same variable inside a string in scss u will have to follow this
#{$variable-name} method
Why -1
Consider extra small devices width to be 0 to 545px(maxvalue).
Consider small devices width to be 546px(minvalue) to 768px(maxvalue)
Therefore the max width of the extra small devices will be
(min value of small devices) - 1
This method is used to avoid harcoded values in scss file,
For example if you decide to change the values of the width, you can change it in only one place and let the formulae handle the remaining calculation of the widths
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;
How can I increase maxTokensPerLine in my own Atom.IO environment?
I've got some long lines causing syntax to not be recognized properly, for example not highlighted correctly and brackets not taken note of etc.
But this seems to be a current source containing it. It seems to be taken as a parameter which suggests it could be configurable?
grammar-registry.coffee
I found
this.maxTokensPerLine = (_ref1 = options.maxTokensPerLine) != null ? _ref1 : Infinity;
on line 22 of /usr/share/atom/resources/app/apm/node_modules/first-mate/lib/grammar-registry.js
maxTokensPerLine also appears in
/usr/share/atom/resources/app/apm/node_modules/first-mate/lib/grammar.js
I tried adding maxTokensPerLine: 1000 in config.cson under *, core and editor, but it had no effect.
(old) maxTokensPerLine
syntax.coffee
You can use the package grammar-token-limit, which will handle changing it for you. All you need to do is specify which value you want in the package settings.
I guess if you want to do it yourself, this package would be the place to start looking.
I am trying to create me a PX/REM converter in LESS CSS but I am facing a problem.
The following lines do not want to compile, the problem comes from #{propertyValue}:.
.rem(#propertyValue; #sizeValue) {
#remValue: #sizeValue / unit(#base-font-size);
#{propertyValue}: ~"#{remValue}rem";
}
But yet I think the syntax is good... at last I thought! Can you help me?
Thank you!
Are you using at least LESS 1.6? Variables as property names were added in 1.6. Prior to 1.6 there are some solutions but none are pretty.
Your snippet works in this LESS previewer which is running 1.6.0: less2css
I was having trouble with how an image is displaying and so I ran it through the W3C CSS validator and I received this code. I tried to search around for what it might mean but couldn't find much help. I found some people saying that it might be because of special characters in the CSS so I checked that in notepad ++ and didn't find anything.
2840 #whoweare img
Lexical error at line 2838, column 10. Encountered: " " (32), after : "#" post-9 #whoweare { width:100%; }
# post-9 #whoweare {
width:100%;
}
Line 2840 is the last one.
Any ideas what this might be?
Thanks for the help.
Remove the space between # and post-9 you have a descendant combinator between them.
#post-9 #whoweare {
width:100%;
}