#import line expected selector or at-rule, but not because of missing semicolon - compass-sass

I have this compass error
Line 3: Invalid CSS after "#charset "UTF-8"": expected selector or at-rule, was "#import 'compass';")
The file is just the following. It does not even contain any of my own code
#charset "UTF-8"
#import 'compass';
I know that people say this error occurs when the #import line misses semicolon, but my file has the semicolon.
And the same files (scss and config.rb) can be easily compiled in linux with no problems.
Does anybody know what is wrong?
The configuration which gives error is
Windows 8.1
ruby 2.1.6p336 (2015-04-13 revision 50298) [i386-mingw32]
Compass 1.0.3 (Polaris)
Sass 3.4.16 (Selective Steve)
I tried many combinations
(1)
-------------------
#import 'compass';
-------------------
// only this line, no #charset line.
// Result: compilation ok, but I need charset because
// my COMMENTS (yes only comments) have UTF8 chars.
(2)
-------------------
#charset "UTF-8";
#import 'compass';
-------------------
// semicolon after #charset
// Result: compilation error:
// Invalid CP950 character "\xE2"
// because the #charset line is unrecognised
(3)
// Add this to config.rb
Encoding.default_external = 'utf-8'
// https://stackoverflow.com/a/23338595/2841279
// http://blog.pixelastic.com/2014/09/06/compass-utf-8-encoding-on-windows/
// Result: compilation error: expected selector or
// at-rule, was "#import 'compass';
(4)
// Add this to config.rb
encoding = "utf-8"
// https://stackoverflow.com/a/13987672/2841279
// Result: compilation error: expected selector or
// at-rule, was "#import 'compass';

Looks like putting that anywhere other than the first line of the page results in that error. Try putting it right at the top and see if it fixes that issue.

#charset "UTF-8"; is added by the compiler e.g. sass whenever required

this is how it needs to be in order to work
#charset "UTF-8";#import 'compass';

Related

In sass, replacing #import with #use not expanding variables

I want to start using #use instead of #import, since #import is going to be depreciated. I have a partial:
// _test.scss
$color1: #ee00ee;
referenced by:
// demo.scss
#use test;
html {
color: $color1;
}
If I comment out the html: $color1 line, I get no error. If I delete _test.scss I get a file not found error, so it seems the file is included.
But when everything is in place, I'm getting an undefined variable error. If I replace #use with #import, I get no error and the generated css has the expected color.
I'm on a Mac (big sur), using dart sass:
% dart --version
Dart SDK version: 2.9.3 (stable) (Tue Sep 8 11:21:00 2020 +0200) on "macos_x64"
The docs I've seen say that #use will replace #import, so I thought just changing to #use would be easy. Is there a step I'm missing?
It's a bit late, but as I understand it, #use treats the partial as modules, which more closely resembles the way JavaScript treats ES modules: In particular, the #use statement makes available a namespaced bit of external code, which changes the way you reference imported variables (and mixins and functions as well):
// demo.scss
#use test;
html {
color: test.$color1;
}
Some documentation is found in the article about #use on the SASS docs, and this article explains dart-sass' namespacing in some detail.

I am trying to set up a new website with Foundation scss, although, every time i try running sass this error comes up

I am trying to set up a new website with Foundation scss, althogh, every time i try running sass this error comes up
Compilation Error
Error: File "/Users/juri/lastHope/a/scss/util/util" not found
on line 63 of Users/juri/lastHope/a/scss/_settings.scss
from line 3 of sass/Users/juri/lastHope/a/scss/app.scss
>> #import 'util/util';
This is a known problem.
You have to set the includePaths for the sass compiler, use ~foundation-sites/scss/util/util (if you use webpack) or remove the line.
https://github.com/foundation/foundation-zurb-template/blob/4492303cfb6a05c60f74cb412247fa5f1e619ec8/gulpfile.babel.js#L96
.pipe($.sass({
includePaths: PATHS.sass
})
https://github.com/foundation/foundation-zurb-template/blob/147c65c2690e8099ae93432459bfd1a57fcdbbbe/config.yml#L22-L24
sass:
- "node_modules/foundation-sites/scss"
- "node_modules/motion-ui/src"
https://github.com/sass/node-sass#includepaths
includePaths
Type: Array
Default: []
An array of paths that LibSass can look in to attempt to resolve your #import declarations. When using data, it is recommended that you use this.

Issues of app.scss compile error in sencha touch

In my windows machine, i installed java, sencha cmd, sencha doc, ruby, compass and i generated one sencha application in that i try to compile app.scss file using the compass compile command but it gives the following error in command prompt:
when i run compass compile command it deletes app.css file and gives following error.
C:\wamp\www\sass\resources\sass>compass compile modified config.rb
clean C:/wamp/www/sass/resources/css delete C:/wamp/www/sass/resources/css/app.css DEPRECATION WARNING on line 1,
column 7 of C:/Ruby22-x64/lib/ruby/gems/2.2.0/gem
s/compass-core-1.0.3/stylesheets/compass/css3/_shared.scss: Unescaped
multiline strings are deprecated and will be removed in a future versi
on of Sass. To include a newline in a string, use "\a" or "\a " as in
CSS.
WARNING: The compass/css3/shared module has been deprecated. You can
silence this warning by importing compass/css3/deprecated-support
instea d. Please be aware that module will be removed in the next
release.
on line 1 of C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/
stylesheets/compass/css3/_shared.scss
from line 3 of C:/wamp/www/sass/touch/resources/themes/stylesheets/senc
ha-touch/_base.scss
from line 22 of C:/wamp/www/sass/touch/resources/themes/stylesheets/sen
cha-touch/_default.scss
from line 4 of C:/wamp/www/sass/resources/sass/app.scss
DEPRECATION WARNING on line 87 of
C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass
-core-1.0.3/stylesheets/compass/css3/_deprecated-support.scss: #{} interpolation near operators will be simplified in a future version
of Sass. To preserve the current behavior, use quotes:
unquote('"$moz-"#{$experimental-support-for-mozilla}
"$webkit-"#{$experimental
-support-for-webkit} "$opera-"#{$experimental-support-for-opera} "$microsoft-"#{ $experimental-support-for-microsoft}
"$khtml-"#{$experimental-support-for-khtml} ')
You can use the sass-convert command to automatically fix most cases.
DEPRECATION WARNING on line 92 of
C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass
-core-1.0.3/stylesheets/compass/css3/_deprecated-support.scss: #{} interpolation near operators will be simplified in a future version
of Sass. To preserve the current behavior, use quotes:
unquote('"$ie6-"#{$legacy-support-for-ie6}
"$ie7-"#{$legacy-support-for-ie7} " $ie8-"#{$legacy-support-for-ie8}')
You can use the sass-convert command to automatically fix most cases.
WARNING: The compass/css3/box module is DEPRECATED and will be removed
in the ne xt release. Please use compass/css3/flexbox instead.
on line 4 of C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/
stylesheets/compass/css3/_box.scss
from line 4 of C:/wamp/www/sass/touch/resources/themes/stylesheets/senc
ha-touch/_base.scss
from line 22 of C:/wamp/www/sass/touch/resources/themes/stylesheets/sen
cha-touch/_default.scss
from line 4 of C:/wamp/www/sass/resources/sass/app.scss
error app.scss (Line 6 of C:/wamp/www/sass/touch/resources/themes/stylesheet
s/sencha-touch/_base.scss: File to import not found or unreadable:
blueprint/typ ography. Load paths: Compass::SpriteImporter
C:/wamp/www/sass/resources/sass
C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets
C:/wamp/www/sass/touch/resources/themes/vendor/compass-recipes/stylesheets
C:/wamp/www/sass/touch/resources/themes/stylesheets) Sass::SyntaxError
on line ["6"] of C: File to import not found or unreadable: bl
ueprint/typography. Load paths: Compass::SpriteImporter
C:/wamp/www/sass/resources/sass
C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets
C:/wamp/www/sass/touch/resources/themes/vendor/compass-recipes/stylesheets
C:/wamp/www/sass/touch/resources/themes/stylesheets Run with --trace
to see the full backtrace
C:\wamp\www\sass\resources\sass>
Here sass is my folder name in www folder.
my app.scss file is as following
// The following two lines import the default Sencha Touch theme. If you are building
// a new theme, remove them and the add your own CSS on top of the base CSS (which
// is already included in your app.json file).
#import 'sencha-touch/default';
#import 'sencha-touch/default/all';
// Custom code goes here..
// Examples of using the icon mixin:
// #include icon('user');
.abc
{
color: #fff;
}
my config.rb file is as following
# Get the directory that this configuration file exists in
dir = File.dirname(__FILE__)
# Load the sencha-touch framework automatically.
load File.join(dir, '..', '..', 'touch', 'resources', 'themes')
# Compass configurations
sass_path = dir
css_path = File.join(dir, "..", "css")
# Require any additional compass plugins here.
images_dir = File.join(dir, "..", "images")
output_style = :compressed
environment = :production
path of sencha sdk is as following
C:\wamp\www\sencha-touch-2.4.2-gpl\touch-2.4.2
Compass is included in the Sencha CMD installation. You can compile the CSS by executing the command sencha ant sass from your application folder.

Error with SCSS generation in Jekyll 2.0

I have my project laid out like so:
-Project
-css
-import.scss
-_sass/
main.scss
The contents of import.scss are:
---
---
#import "main.scss";
What I expected to happen was for main.scss to be imported into import.scss, then, import.scss would compile to import.css within the genrated _site/ directory.
Instead, I get the following error
Conversion error: There was an error converting 'css/import.scss'.
jekyll 2.0.3 | Error: Invalid CSS after "-": expected number or function, was "--"
I'm guessing it's complaining about the YAML front-matter at the top of import.scss, but I'm unsure what the solution is.
I had the same error, but here was my fix: use the “---” YAML front-matter only on the /css/*.scss files (e.g. your import.scss), but not on the partials.
The error seems to be referring to front-matters in the partials (/_scss) files. Once I took though out, the Sass started compiling again.
Hope this helps!

Cannot get Compass to generate icon sprites

I'm fairly new to Compass, but I have been trying to use Compass in a project to generate my icon sprites. See this tutorial:
http://beta.compass-style.org/help/tutorials/spriting/
IMO, the tutorial isn't exactly clear. To start, the tutorial never tells you to create the "_icons.scss" file that contains the "all-icon-sprites" mixin.
#import "icon/*.png";
#include all-icon-sprites;
The result of this is an error:
"Syntax error: Undefined mixin 'all-icon-sprites'."
So I added the "_icons.scss" file to my project, and changed the code to:
#import "icon/*.png";
#import "_icons";
#include all-icon-sprites;
Now, I get this error:
Syntax error: Invalid CSS after " $delete-position": expected ")", was ": $icon-delete-..."
on line 28 of /path/to/_icons.scss
Can anyone explain to me what I'm doing wrong? Or is the problem actually with the "_icons.scss" file?
The tutorial doesn't tell you to import the _icons.scss, because it is not required. You either import the png files or the generated file -- not both. They are the same, except if you import the png files, you end up importing a generated stylesheet that is kept up to date automatically as the png files change (renames, added, removed, etc).
do you have any png files in the <images>/icon directory?
To be honest, this error is one I would expect to see if the compass version that is processing the stylesheet isn't the one you're using on the command line. Are you compiling with rails or the CLI?

Resources