I use
sass --watch scss:css
to have Sass automatically create CSS files (and put them in the /css directory) for each SCSS file (from my /scss directory).
In my SCSS file I have this:
.foo::before {
content: "▶";
}
When I test the web page in the browser, that "play" character is not displayed - instead I see a bunch of weird letters with carons and other accents.
I inspected the generated CSS file and noticed this in the first line:
#charset "CP852";
I then manually changed that to this:
#charset "UTF-8";
which resulted in my "play" button being rendered correctly.
Now, why does Sass set the charset to "CP852"? I'm writing the SCSS file in PhpStorm which reports that the SCSS file indeed is UTF-8 encoded (I see that in the status bar of PhpStorm).
Try adding #charset "UTF-8"; to your original SCSS file, SASS shouldn't override it/add its own then.
Like #Alireza-Fatahi states in this answer, you could save a line in CSS output and instead go for a default Charset on external files, by adding this line to your config.rb in your project folder:
Encoding.default_external = "UTF-8"
Related
I'm using VSC with Live Sass Compiler from Glenn Marks.
I'm trying to import code from scss file where are written #media for my project. All seems to work almost perfect, but this #media code is injected at the very top of my main.css file, and I would love it to be at the very end. Is there any option to do this with #use and #forward?
EDIT: File structure.
I have one folder "scss/utilities" with 5 scss files + one file "_index.scss" with only forwards inside. main.scss is outside, in folder "scss"
Main scss file is called "main.scss", at the top I call this folder by "#use 'utilities' as *;"
As I said, code is pulled to the css file, but the only problem is that #media from files "01_small_", "02_medium", "03_large" are injected at the beginning of the css code.
FILE STRUCTURE SCREENSHOT
I've started Vim (v8) and have proper syntax highlighters in place for css3. I am using postcss plugin called precss to provide for "SASS" like syntax in my code.
However, when I used a nested selector with "&:last-child" or &:first-child, the syntax throws an error. It doesn't break the code or anything, but that "red" error is so distracting for me. Check the screen shot below.
Anyone can figure out how to make this error go?? I use a plugin called vim-css3-syntax and it includes scss syntax highlighting.
Edit: Got it fixed by downloading https://github.com/cakebaker/scss-syntax.vim and then adding au BufRead,BufNewFile *.css set filetype=scss.css
Thanks in advance.
The fact that you are using SCSS syntax (nested blocks, &, etc.) in CSS makes your CSS invalid.
If you want to avoid syntax errors you have two paths:
stop using SCSS syntax in your CSS files,
make sure your file is recognized as what it is: SCSS.
I would consider the first path to be the most sensible. After all who writes JavaScript in a *.rb file or SCSS in a *.css file? But if you choose the second you can simply do:
setf scss
--- edit ---
Suppose we have this code:
body {
background-color: white;
}
It's both valid CSS and valid SCSS because SCSS is a superset of CSS. Any valid CSS is automatically valid SCSS. Vim will happily display it without any error, no matter what file extension (*.css, *.scss) and filetype (css, scss).
Now, suppose we have this code:
body {
h1 {
background-color: $brand-1;
}
}
It's valid SCSS but not valid CSS. If you write that code in a *.css file with the css filetype, you get errors because it's not CSS. If you write that code in a *.scss file with the scss filetype you don't get errors because it's valid SCSS.
In Java8_31 I imported different CSS files like that in my main.css:
#import "style/common/test1.css";
#import "style/common/test2.css";
All files were in the package style/common and it worked great.
Now with the build Java8_40 I did the same thing, but I get the following error message:
Could not find stylesheet:
file:/mypath/../style/common/style/common/test2.css
com.sun.javafx.css.parser.CSSParser handleImport
All my styles from the CSS file test1.css are working. What I was curious about was the fact that my path style/common is showing up two times.
So I tried to change my imports to the following:
#import "style/common/test1.css";
#import "test2.css";
With these imports, both styles of the file test1 and the file test2 are working. But both files are still in the same package.
Whats happening here? Is there a known issue about the #import and probably a problem in the CSSParser?
It actually is a known issue:
https://javafx-jira.kenai.com/browse/RT-40346
There is a temporary fix available and the issue should be fixed in the next build Java8_u60.
The temporary fix can be made in the CSSParser class. Link to the git diff:
http://hg.openjdk.java.net/openjfx/8u-dev/rt/rev/839912277bf0
If you dont want to try the fix or wait for u60, just add all css files to the same folder and import it like that (temporary solution!):
#import "css/test1.css";
#import "test2.css";
#import "test3.css";
#import "testX.css";
Just contributing to the discussion (not directly to your question):
You don't have to explicitly set the full .css file path. All you need is to specify the .css folder and the file name:
Original path:
#import "css/nodes/path/CssFile.css";
Full path without folder specification:
#import "../../path/CssFile.css";
Both work the same. Notice that, in the second example, "../" refers to the path level, not the specific folder name.
So in your case, that would be
#import "../common/test1.css";
Compass compiled everything well if I didn't put a #charset "UTF-8"; in my root scss, its output like this:
#charset "IBM437";
my css output still keeps the right Unicode character, just like this:
content: "ĐĂNG";
content: "TRẢ LỜI";
Its css still work with Chrome and Firefox but fail in IE because it didn't render the Unicode character and the output will completely be wrong if I put #charset "UTF-8";
content: "─É─éNG";
content: "TRẢ LỜI";
At this time, with just two properties use Unicode characters, I can still modify it but if I have more Unicode characters, it would be a nightmare.
Do I need to modify config.rb?
If You import files with #import, also declare #charset "UTF-8"; in the first line of root file ( for example styles.scss ) - it helped me.
Your source file is encoded using IBM437 instead of UTF-8, so Sass adds an appropriate #charset declaration in your output files. Try to save your files using the UTF-8 charset.
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>