I'm using node-sass and gulp-sass to compile my assets.
Now when I'm running gulp with sass outputStyle: 'nested' (default), the fontawesome characters are changed from:
$fa-var-home: "\f015";
to
.fa-home:before {
content: "";
}
Using this in the browser seems to be working fine.
When running sass with outputStyle: 'compressed', I'm getting different characters:
.fa-home:before{content:""}
Now the strange part: sometimes, but I don't have any steps to reproduce this, the characters are also shown just like that, so  instead of a home icon.
I can't put my fingers on it and in 99.99% of the cases it is just fine. But in some situations it goes wrong and I don't understand why!
recently I had the same situation.
whenever you compile compiling using compressed outputStyle it's also removing charset: utf-8. For that reason you are getting that different characters.
So I'm using postcss-normalize-charset which basically add necessary charset keeping outputStyle compressed
Related
I have an issue with the Live Sass compiler in VS Code, namely when working with lists. None of the usual operations work. In the following example, it's list.nth(list,index).
The following works fine in a Codepen:
HTML
<p>red</p>
<p>blue</p>
<p>green</p>
SCSS
#use "sass:list";
p {
font-size: 25x;
font-weight: bold;
}
$colors: red blue green;
#for $n from 1 through 3 {
p:nth-child(#{$n}) {
color: list.nth($colors,$n);
}
}
This also works fine when compiling it locally with the Dart Sass CLI.
But when I try to compile this with the Live Sass compiler in VS Code, I get the following error:
Compilation Error
Error: Invalid CSS after "... color: list": expected expression (e.g. 1px, bold), was ".nth($colors, $n);"
Why is that?
Use Live Sass Compiler by Glenn Marks
I had exactly the same problem. You read the SASS official website, follow the instructions, write the code in Visual Studio Code, and then you get this strange Compilation Error when saving the SASS or SCSS file. You double-check everything and it seems like it should work, but it doesn't.
Well, the problem is caused by the Visual Studio Code extension you are using for compiling SASS or SCSS files to CSS files.
Don't use this extension: Live Sass Compiler by Ritwick Dey
You are probably using this extension: Live Sass Compiler by Ritwick Dey. It's widely used, but is no longer supported by the author. Consequently, the SASS version isn't updated. This extension produces the error you are describing.
Use this extension: Live Sass Compiler by Glenn Marks
You should use this extension: Live Sass Compiler by Glenn Marks. As the author states: A big thank you to #ritwickdey for all his work. However, as they are no longer maintaining the original work, I have released my own which has been built upon it. This extension compiles your SASS or SCSS files to CSS files successfully.
The extension you are using does not seem to be maintained anymore, you can try to use this one instead.
I'm having an issue when my Sass compiles my .scss file. It seems that Sass compiles the « special characters and transform it in another one ┬½. But I want to keep my « in my .css file.
Does anybody know how to fix this?
Or maybe who knows how to ask Sass not to compile specific lines?
Here's my scss code:
/* SCSS file sample */
&::before{
content: "«";
}
&::after{
content: "»";
}
And here's how it compiles it:
/* Compiled CSS */
.textBox--quotation::before {
content: "«";
}
.textBox--quotation::after {
content: "┬╗";
}
Thank you for your help.
Use the CSS equivalent of your special character:
\00AB
(As converted here)
div:after {
content: "\00AB";
}
<div>hello </div>
I can confirm this under Windows Sass 3.5.1 (Bleeding Edge).
When the file is encoded as UTF-8 with BOM this does not happen. Only when the file is encoded without BOM (which basically means, you encode UTF-8, but you are not telling anyone). My guess: Sass will parse the file as plain ANSI and thus sees these 2 characters.
Funny thing: When the file was encoded with BOM, sass removes it and adds an annotation #charset "UTF-8"; Never mind, it always does this
I ran into the same charset problem.
Especially on OSX there seams to be a problem with ruby Encoding Settings.
I fixed it creating a config.rb file in the main project directory to tell ruby explicitly which charset encoding it should use. Since sass and compass depend on ruby, chances good that this might fix your problems.
Encoding.default_external = 'utf-8'
I have a periodic problem when PhpStorm automatically compiles SASS into CSS files.
Sometimes it misses some letters in final CSS file.
For example after I write
body
color: #fff
I get the following CSS
body {
color: #ff;
}
Though the last character is missed. Sometimes it works as it should and compiles everything correctly. Looks like compiler saves changes to css file before SASS changes are completed or vice versa it doesn't catches all my changes in SASS file.
What could be the problem and what is possible solution?
I had the same issue. This is caused when phpstorm option to 'always' update is turned on. Whenever phpstorm detects a change it triggers the sass compiler with whatever you have in place. Sometimes it triggers before you finish writing. As far as I know the only solution is to either change to ' update on save '. Or to made a small change like a space and it will retrigger the compiler.
I am using LESS to organize and import all my CSS files. I am also using Twitter Bootstrap which I integrated inside my style.less. It works fine like below however when I use lessc to minify the less file and compress it to one all hell breaks loose with my twitter bootstrap css. The reason is that my bootstrap.min.css has a relative path to images as "../img" so when I minify all these files and dump my output file, it no longer finds this path.
How exactly should I fix this, I don't want to be hardcoding absolute urls in my css?
style.less
#import './folder_one/file_one';
#import './folder_one/file_two';
#import './folder_two/file_one';
#import './folder_three/file_one';
// this bootstrap css references images relatively ../img/
#import './bootstrap/bootstrap.min.css';
When running lessc use the --relative-urls flag.
lessc --relative-urls
It's poorly documented, but by default it is false which means that all #imported files will maintain their urls (e.g. background-image, font-face, etc) as they are. This is because less was already doing this and many users expect it to leave their urls alone.
When the relative-urls flag is used, lessc rewrites all of the urls according to the location of the less/css file being imported.
Example
/dir1/style/main.less
// if you don't include (less) lessc will leave bootstrap
// as an #import at the top of the lessified css file
#import (less) '../bootstrap/bootstrap.min.css';
/dir1/lib/bootstrap/bootstrap.min.css
background-image:url("../img/bs-img.gif");
Result:
/dir1/style/main.css
background-image:url("../bootstrap/img/bs-img.gif");
Check out the docs for command line usage.
https://github.com/cloudhead/less.js/wiki/Command-Line-Usage. There's an option called --root-path that will prepend existing urls so that they will work in the output css file.
lessc [option option=parameter ...] <source> [destination]
lessc -rp=will/be/prepended sourcefile.less path/to/destination
For example:
Here is the original url, with the file in css/src/nest
background-image: url('../../../imgs/bg.png');
And this is what I would do on the command line. Note that the -rp argument should point from the output directory to the original file location
lessc -rp=src/nest css/src/nest/nesty.less css/nesty.less
And the output, with the file in css/
background-image:url('src/nest/../../../imgs/bg.png')
There is a --relative-urls option, but I can't get it to work. I'm working build script that uses the workaround I described above. Build-o-Matic
This is how I handled determining the path [link]
i just had this problem and solved it.
the solution is to prepend ../ to the path of the style sheet that you want to import until it finds it. look here :
then i added ../ multiple times until i escaped to the wanted directory and it worked
--relative-urls flag has its in-browser counterpart.
<script>
less = {
env: "development",
relativeUrls: true
};
</script>
<script src="less.min.js"></script>
I'm trying to create a CSS theme with multiple color schemes using Bootstrap CSS. Each color scheme is built as a modified version of the boostrap.less file: bootstrap-red.less, bootstrap-green.less, and so on.
What each Bootstrap version does is import all the default Bootstrap files, then the appropriate color palette, then the theme's core structure. For example, bootstrap-red.less:
#import "reset.less";
#import "variables.less";
#import "mixins.less";
/* and so on... until */
// Custom code
#import "elements.less";
#import "_mytheme-color-scheme-red.less";
#import "_mytheme-core.less";
In _mytheme-color-scheme-red.less, I define variables such as:
#bannerBackground: #59a449;
However, when compiling bootstrap-red.less I get:
NameError: variable #bannerBackground is undefined in /.../css/less/_mytheme-core.less
Why does this happen? I would have thought it would work, since variables in the variables.less files are defined in the same way, and they can be used in subsequent files.
I've looked at similar questions and tried different things, but to no avail:
#importing "_mytheme-color-scheme-red.less" in the file _mytheme-core.less - unfeasible; also, Bootstrap doesn't do that and yet it still works.
encoding the files in UTF-8 without BOM - didn't work, same result.
It seems to me the file _mytheme-color-scheme-red.less is not being processed at all. It's as if the Less compiler was just skipping it and going straight for _mytheme-core.less How can I fix this?
Fixed. The problem was the encoding after all: the LESS compiler was skipping all wrongly encoded files. Apparently Sublime Text doesn't properly save to UTF-8 without BOM even if you tell it to; my files were all in either ANSI or UTF-8 with BOM. I had to resort to Notepad++ in order to convert them to plain UTF-8. I feel stupid now.
Source: Variable Name Error "is undefined" even though "variables.less" imported
I had a similar error with LessCss 2.x when compiling Bootstrap 2, downgrading to LessCss 1.7.5 resolved it for me.