Less when including files with relative paths - css

I have the following less files:
WebApp/Content/less/main.less
#import "src/test.less";
WebApp/Content/less/src/test.less:
body {
background-image: url("../img/abc.png");
}
When I run less 1.3.0 via less.js-windows
> less.js-windows\lessc.cmd WebApp\Content\less WebApp\Content\css -compress
... I get this:
body{background-image:url("src/src/../img/abc.png");}
The "src/src/.." doesn't look correct to me.
I spent about an hour on it but I can't determine the status of this problem from the less project from its github page. There are numerous issues, regressions, and applied and unapplied pull requests which appear to address it: https://github.com/cloudhead/less.js/issues/search?q=relative.
I can't use absolute paths in this case. Is there a simple fix or a workaround for this issue?

Do the following:
body
{
background-image : ~"url( '../img/abc.png' )";
}

Related

The #use feature of Sass

First of all, I hope someone can actually understand this rambling question because I'm struggling to even word what I mean in a coherent way, but here goes:
I don't know why I'm struggling so much to figure this out, but I've been using #import with SCSS for a while now and feel I have my head around it fairly well, but now I want to use the #use rule since the phasing out of #import is a thing. And I can't find any videos or any real articles explaining how to use it properly.
The problem I'm having is I can't get my head around how to actually use it, I feel like I get the basic idea, and how to use the modules in each partial (I think..), but I feel like I don't understand how to actually get all of the partials into a main .scss file to be compiled into css.. This is hard to explain.. I just feel like I would still need to #import at least the files that have #use inside them into a main file for it to be compiled.. I'm guessing this obviously isn't the case, but otherwise I can't work it out.. Do I just #use all the files I want imported into the main file or..?
If anyone could shed some light on this for me, I would be really grateful.
Thanks
The new rules #use/#forward and the remove from #import are indeed a really big impact to SASS. It leads to a complete new form to write sass. A try to make an easy explanation for the beginning to use the new technique:
(1) #use works similar to #import. It adds the code from a (config- or partial-)file or a module to your stylesheet.
(2) The difference is: SASS changes the scope of variables/mixins/functions from global (all imported files = one scope) to local files (variables are only valid in the actual file). If you need to use variables/mixins/functions from another (config- or partial-)file you need to 'include' them to the actual file first.
That means for your project(*):
//file ###> _config.scss
$columnWidth: 50%;
$projectColors: (
primary: red,
secondary: blue,
);
//file ###> _functions.scss
#use 'config' as * // --> to use config vars (here: without namespace)
#function getColor( $name ){
$color: map-get($projectColors, $name);
#return $color;
}
//file ###> _partial.scss
#use 'config' as * // --> use config vars (here: without namespace)
#use 'functions' as * // --> use functions (here: without namespace)
.class {
width: $width;
color: getColor( primary );
}
//file ###> myStylesheet.scss
// no need to #use 'config' or 'functions'
// as they are not direct needed in this file
#use 'partial' //--> write the css
---
( * ) Including files without using a namespace is a special case to make the example more easy. Normaly you will include variables/mixins/functions to a separated namespace and call them by namespace.$variable or namespace.mixin. And there are techniques to move special settings to a #used file as well so you can move variable settings to the project. Please have a look to official and excelent description: https://sass-lang.com/documentation/at-rules/use
NOTES:
(1) As it is heavily discussed: Yes. This is INDEED the intended new way to work with SASS. (https://github.com/sass/sass/issues/2750)
(2) Very interesting: The actual brandnew version from Bootstrap has moved to the new Sass Version. But as I have seen Bootstrap does not use that new feature #use and still works with #import. That may have reasons ... and it seems not to easy to change the technique.
(3) Also it seems to be a little bit complicated there are some advantages comming with that new technique. Using separate namespaces make it much mor easier to work with external modules without causing name conflicts.

Sass Rails doesn't support map syntax (object variables)

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! :)

LESS addition operator (+) is appending instead of adding

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

Gulp gulp-less and gulp-sourcemaps giving wrong sourceMappingURL

I have a gulp workflow with a simple less task like so:
gulp.task('less', function() {
gulp.src(source_less)
.pipe(sourcemaps.init())
.pipe(less({
sourceMap: true
}))
.pipe(sourcemaps.write())
.pipe(gulp.dest(dest_less));
});
I want the gulp-sourcemaps module to display source maps as inline comments in my CSS file.
But whenever gulp compiles my LESS, the gulp-sourcemaps isn't displaying a path to my source file.
Instead, it displays something like this:
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2
VzIjpbIm1haW4ubGVzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNJLG1DQUFBIiwi
ZmlsZSI6Im1haW4uY3NzIiwic291cmNlc0NvbnRlbnQiOlsibmF2IHtcclxuICAgIGJhY2tncm91bmQtY29
sb3I6IHllbGxvdyAhaW1wb3J0YW50O1xyXG59Il0sInNvdXJjZVJvb3QiOiIvc291cmNlLyJ9 */
I dramatically simplified my gulpfile, removing livereload, autoprefixer and such.
But even in this stripped down version I can't get the source URL to be right.
Been over this thing for quite some time now, any help would be very much appreciated!
You already have sourcemaps inline there. If you base64 decode what comes after sourceMappingURL=data:application/json;base64, you'll get this:
{"version":3,"sources":["main.less"],"names":[],"mappings":"AAAA;EACI,mCAAA","file":"main.css","sourcesContent":["nav {\r\n background-color: yellow !important;\r\n}"],"sourceRoot":"/source/"}
Try it yourself here: https://www.base64decode.org/
For those who stumble upon this post and are wondering how to get a separate file for the map that's is not in base64 format - you can pass a path relative to the destination.
For example:
.pipe(sourcemaps.write('./'))

Variable Properties in LESS CSS

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

Resources