I'm having a strange issue I haven't seen occur. I am trying to do some basic addition to some variables like this:
#screen-break-sm: 768px;
#screen-break-md: 992px;
#screen-max-mobile: #screen-break-sm;
#screen-min-desktop: #screen-break-sm + 1;
Then, those values are being used in some media queries. When it is compiled using gulp-less (version ~3.0.0 in package.json) via Gulp, the output ends up being something like:
#media (min-width:768px + 1) {
// CSS
}
I'm expecting:
#media (min-width:769px) {
// CSS
}
I have tried doing the addition as both #screen-break-sm + 1 and also screen-break-sm + 1px. I've also tried removing the px part of the original values and doing the add and appending the px afterwards, but that doesn't add either.
In case it is relevant, this is one of the gulp scripts that builds a section where I first ran into this issue:
module.exports = function (build) {
return function () {
var pagesPath = build.options.styles.buildPath + '/pages/';
return build.gulp.src('./resources/assets/less/pages/**/*')
.pipe(build.plugins.less({
paths: [ build.plugins.path.join(__dirname, 'less', 'vendor', 'theme', 'bootstrap') ]
})).on('error', build.errorHandler)
.pipe(build.plugins.minifyCss()).on('error', build.errorHandler)
.pipe(build.plugins.extReplace('.min.css')).on('error', build.errorHandler)
.pipe(build.gulp.dest(pagesPath));
};
};
Any ideas why LESS is concatenating/appending instead of performing addition?
[EDIT]
While the solution is the same as the other question that was identified as a possible duplicate, that question does not discuss the problem that users will encounter directly, and therefore I think this question is much better suited for searching purposes. I never found that solution after an hour of Googling and only after getting the answer and the "strict math" verbiage did that other question show up.
Look at strict math option which default value is OFF. Are you sure that for some reason you don't have it set to ON?
lessc -sm=on
lessc --strict-math=on
Related
We have a LESS codebase with code like
// my-theme.less
#brand-color: #c0ffee;
#button-background: #brand-color;
and (JavaScript/mocha) tests that assert that the "mappings" in this codebase are correct, e.g. that #button-background is mapped to #brand-color, like
import {parameterValueInTheme} from './my-test-utils.mjs';
describe('button-background', function() {
it('should be mapped to "#brand-color"', function() {
assert.equal(parameterValueInTheme('#button-color', 'my-theme'), '#brand-color');
});
});
Now we would like to measure the actual coverage of our tests, i.e. the percentage of LESS lines/statements covered by our unit tests.
Has this already been done? Is there a coverage tool for LESS (like nyc/istanbul for JavaScript)? The question could be broadened to CSS instead of LESS (or SCSS or any precompiler), as the problem seems to be really similar.
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;
I'm getting the following error when trying to use Sass Maps (which look like object variables):
Invalid CSS after " primary": expected ")", was ": #3097D1,"
(in /Users/.../app/assets/stylesheets/new_design.scss:19)
I reproduced the error by using the following minimal example:
$theme-colors: (
primary: #3097D1,
secondary: black
);
#each $key, $val in $theme-colors {
.foo.#{$key} {
color: $val;
}
}
Expected:
.foo.primary {
color: #3097D1;
}
.foo.secondary {
color: black;
}
But getting the error mentioned.
sass-rails, ~> 5.0.0 seems to be installed according to the Gemfile:
gem 'sass-rails', '~> 5.0.0'
I'd assume that loads one of the latest sass versions which should support object variables.
I have the feeling the current version I have is not recognizing this syntax.
How can I make sure I have the right sass version? Is there anything else I have to do to compile this syntax successfully?
bundle show sass-rails shows 5.0.6, which seems recent.
as discussed in the comments there is a stackoverflow discussion about a similar issue with the map sass syntax
The discussion refers to Github Issue 1088
I quote
There's a number of issues with the indented syntax, and Sass maintainers aren't going to fix them. :( They say, the .sass parser is weird and hard to refactor.
I find Sass syntax to be quicker to type and easier to read. It is deprived of the visual noise:
indented_vs_bracketed
It's also much easier to do copy-pasting.
So Sass maintainers, PLEASE don't let the indented syntax fall behind!
Probably by digging down in the discussion we will be able to find the solution. Now I am quoting the solution from the owner of the post Ionică Bizău:
wrapping the values between quotes, saving, reloading in browser without any errors, and then removing the quotes back and reloading the page in browser solved the problem. Maybe it was something cached somewhere... but I can't understand where. I didn't restart rake or ran any bundle command... Thanks! :)
I am using grunt-contrib-jshint and it finds the following error in my JS file:
line 5 col 70 Expected a conditional expression and instead saw an assignment.
I know the reason of this error, but all I want is to disable it. Looking here it looks like I can either use no-cond-assign to 0 in my jshintrc or by adding -W084 : true in my options.
The problem is that the first solution ended up in a corrupted jshintrc and the second one does not solve the problem. Another option is to add -W022 : true (which solution I found in the comments) also does not work.
Use the ignore pragma to skip this line:
/* jshint ignore:start */
if(this = Infinity)
/* jshint ignore:end */
{
return;
}
I'm starting with paper.js. I like the fact that it introduces the possibility to have a script with a text/paperscript mime type, which runs in its on scope. However, scripts can become large pretty soon, so I want to be able to divide it in multiple scripts for readability. I thought I could just add more than one script tag and have them all run in the same scope, but apparently this isn't the case.
Both scripts are loaded and do run, but the second script doesn't seem to be in the paper scope.
I've set up an example here: http://barbata.nl/SO/Maps/ This example has some code, but I'll point out the important bits.
It contains two paperscripts:
Maps.js is the main script, which rasterizes the image and allows moving it around. You can ignore the code in this script, for it works fine so far.
Zoom.js is the script in which I wanted to isolate zooming functionality. It uses jq.mobi to capture the scroll wheel of the mouse, since Paper.js doesn't seem to have that event. It then translates that to a call to onMouseScroll, in a similar way Paper does it.
So far so good. The actual problem arises with the zoomIn and zoomOut functions in zoom.js.
It works if I explicity use the paper object to reference the view I want to zoom:
function zoomIn()
{
if (paper.view.zoom < 2)
{
paper.view.zoom = paper.view.zoom * 2;
}
}
But it fails when I remove paper and just reference the view:
function zoomIn()
{
if (view.zoom < 2)
{
view.zoom = view.zoom * 2;
}
}
This surprises me, as I expected the script to be a Paperscript, running in the Paperscope. It works fine if I put this code in Maps.js, so it seems that although zoom.js is loaded by Paper.js (the developer tools in the browser confirm this), it isn't run in the Paperscope.
My question is: are my findings correct? Am I doing something wrong? What is the right way to divide a Paper.js application into multiple units for readability?
Of course I can get it running, but I want to make sure I do it right.
This is indeed how it works. I've opened an issue on GitHub
I found that the "cleanest" way is to do it with this.install(window). It also makes error finding with Chrome developer tools easier since it is more adapted to reporting on the line errors in java-script than "paperscript".
in index.html (for example):
<script type="text/javascript" src='js/other_lib.js'></script>
<script type="text/paperscript" canvas="canvas">
this.install(window);
/*no code 'required' here */
</script>
<body>
<canvas id="canvas" width="1500" height="500"></canvas>
</body>
Then in the js/other_lib.js i just add code as normal:
var r = new Path.Rectangle([100,100],[200,200]);
r.fillColor = 'black';
/*more code here*/
This should generate a rectangle.
What DOES'T NOT WORK for me (as of Paper.js v0.10.2 Release Date: 9. July 2016) is the object operators. Such as adding vecrots pointc = pointa + pointb; for me this is giving a lot of NaN values.
I have had to edit a few libs to get this working, but the change is simple:
var pointc = new Point(pointa.x+pointb.x,pointa.y + pointb.y);