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'
Related
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.
My CSS:
#site-heading li:after {
content: '\2002\2022\2002';
}
Gets transformed to:
#site-heading li:after{content:'???'}
during the bundling process and I can't figured out how to get it so the content remains a space, bullet, space.
The answer is, you don't set anything within System.Web.Optimization.
Instead make sure the css file in the bundle is encoded as UTF-8. The #charset "utf-8"; declaration at the top of the file is not enough. The file has to physically be encoded. Pasting a UTF-8 symbol directly in Visual Studio, will casue Visual Studio to question you if you want to save as UTF-8 upon saving the file. Alternatively, using something like Notepad++, one can convert the encoding format from the menu (Encoding -> Convert to UTF-8), then save.
#site-heading li:after {
content: ' • ';
}
This content is then parsed and converted as intended when bundled/minified.
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.
Somewhere I saw this structure of CSS document:
header {
.navigation {
a {
text-decoration: none;
}
}
}
If I will try it in my CSS file, it doesn't work.
What is needed for ability to write this code?
Thank you
This looks like LESS CSS http://lesscss.org/
You have to import javascript file less.js into your page.
Now compile your css file and than apply Mr #ozkanozlu is right way
just do this
header {.navigation{a{text-decoration: none;}}}
The code you've quoted is not actually CSS, it is a language called LESS, which compiles to CSS; it is a CSS pre-processor. It is designed to make CSS easier to work with, but it needs to be converted to pure CSS before it will actually work in a browser.
LESS can be compiled to CSS before deployment -- ie so you work on LESS code, but the user sees standard CSS -- or provided to the browser as LESS, but with the less.js also compiler included in the page. For performance reasons, I would always prefer the first of those options.
Other similar languages also exist -- see SASS for example. You can see a comparison of SASS vs LESS here: http://css-tricks.com/sass-vs-less/
I started using LESS today. But it's kinda weird. This code does not work. I get an error:
! Variable Name Error: #linkColor in a is undefined.
My bootstrap:
#import "variables.less";
#import "normalize.less";
variables.less:
#linkColor: #08c;
#linkColorHover: darken(#linkColor, 15%);
normalize.less:
a {
color: #linkColor;
}
a:visited {
color: #linkColor;
}
a:hover {
color: #linkColorHover;
}
When I make an
#import "variables.less"
in the normalize.less file, everything works fine.
Thanks for your help :)
This other question ultimately led me to the right answer.
It looks like the LESS compiler is silently failing if files are encoded with a BOM. (That's a Byte Order Mark for those not familiar with the term.) This is the default setting in some editors, such as Visual Studio.
The compiler barfs up an error on the BOM if it's in your root file, but seems to fail silently for #import-ed files.
Try saving your files as UTF-8 without a BOM, and see if that solves your problem.
This error can also occur via bad imports in the files you're importing.
I also encountered this issue, when using multiple layers of import, and the 'lessc' compiler from Node.js:
The original file imported a file (which we will call 'child')
The child file imported a file (which we will call 'grandchild')
The grandchild was imported
I attempted to compile the original file, and received the same 'undefined variable' behavior. I could see the variable was defined in the child and the syntax lookedcorrect.
No prior errors were displayed.
The problem turned out that the child was not importing the grandchild properly. Ie,
#import grandchild.less
rather than:
#import "grandchild.less";
Fixing the child importing the grandchild made the original see the variables defined in the child.
This seems like a bug in less - ie, the bad import should show up in the 'lessc' output, so one day it will probably be fixed. Until then, I hope this helps.
There may be another possible root cause.
Here is my original Gruntfile.js:
less: {
compile: {
files: {
'css/less.css': 'less/**/*.less'
}
}
},
The wildcard makes LESS compiler compile all .less files under that folder and merge all results into one CSS. And I got errors running grunt less:compile:
NameError: .transition is undefined in less/core/html.less on line 38, column 3
Once I changed 'less/**/*.less' into 'less/css.less', the compilation succeeds.
I encountered the same problem using Winless compiler.
Some of the .less files i was importing into master.less were empty. when i removed these from the list of imported files my variables were recognized!
To help any others that may come across this not want duplicate CSS generated from multiple imports, you have two options.
Either #import-once the variables / mixins files you need in each file you need to use them in.
Use #import-once "filename.less"; to prevent duplicates.
Upgrade to LESS > 1.4.0, when it arrives; From the less website:
"The statement #import acts differently before and after 1.4.0. It acts as #import-multiple in all older versions and as #import-once in all less.js versions after 1.4.0."
You can also get this error if you are trying to import the file twice (not a good idea) and the first import is before your variables referenced in your.less file have been loaded
Note: I'm using django compress
in index.html i had:
{% compress css %}
<link href="{{ STATIC_URL }}less/timepicker.less" rel="stylesheet" type="text/less">
<link href="{{ STATIC_URL }}less/style.less" rel="stylesheet" type="text/less">
{% endcompress %}
then in styles.less i had
...
#import "timepick.less";
I think it is because of which master less file you are compiling. Likewise
If you have Less/Project_name/project.less and in this project.less you import the variable less and all the other files which has in the directory.
You just have to compile project.less into your css, not all less files. If you try to compile project.less and variables.less at a time you will have this error. And you can avoid redundant declaration of importing the variable less files
I would use the nested rules in the normalize.less :
a {
color: #linkColor;
&:visited {color: #linkColor;}
&:hover {color: #linkColorHover;}
}
And in the #import, you don't need to use the ".less", it's optional :
#import "variables";
#import "normalize";
I don't know if this can help...
One other weirdly specific situation in which this occurs: if you're using .NET and dotless, the compiler will choke on nested media queries with variable specifiers. If you have code like this:
#media (min-width: #aVariable) {
.some-class{
margin: 10px;
#media (min-width: #anotherVariable) {
margin: 20px;
}
}
... then dotless will tell you that it can't find the definition for #anotherVariable, even if it's used three lines above.
For me its happened when using #Import-once and nothing help.
but with #Import its worked.
as i read in the last version of the Less the Import will work as Import-once.