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.
Related
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.
Getting an error message when compiling my SCSS using the ruby compass gem.
run: /var/lib/gems/1.8/gems/compass-0.12.2/bin/compass compile
out: unchanged sass/partial/grid.scss
out: error sass/partial/catalog.scss (Line 5: Undefined variable: "$paragraphFont".)
out: create css/generated/partial/catalog.css
out: create css/generated/partial/base.css
out: overwrite css/generated/screen.css
My screen.scss imports partials like this:
#import "partial/base";
#import "partial/catalog";
In my base partial I have the $paragraphFont defined.
$paragraphFont: 'Lucida Sans', arial;
$regularFontSize: 14px;
And in catalog.scss I use it:
.product-view #price-block {
p {
font-weight: normal;
font-family: $paragraphFont;
....
}
}
Weird thing is that the css gets compiled just fine, and the $paragraphFont is populated correctly. So I don't know why the compiler is complaining at me about an error.
You're generating files that don't need to be generated.
screen.scss -> screen.css
base.scss -> base.css
catalog.scss -> catalog.css
The catalog file is being compiled on its own. Since it is not importing base.scss, the variables are not set. Your screen.scss file generates as you expect because it is importing all of the necessary information.
What you want to do is rename your partials to begin with an underscore to prevent them from being compiled on their own:
screen.scss -> screen.css
_base.scss (not compiled)
_catalog.scss (not compiled)
A simpler explanation that probably fits most of the users here:
You're compiling all your sass, when you only need to compile the top level file
sass is commonly modularised as follows:
toplevel.scss
include child1.scss
include child2.scss (that also uses variables from child1.sass but does not import child1.scss)
include child3.scss (that also uses variables from child1.sass but does not import child1.sass)
When compiling, you only need to compile toplevel.scss. Compiling other files on their own (eg, child2.scss) will generate errors about undefined variables.
In your gulpfile:
gulp.task('sass', function () {
gulp
.src('./static/scss/toplevel.scss') // NOT *.scss
.pipe(sass())
// Rest is just decoration
.pipe(prefixer('last 2 versions', 'ie 9'))
.pipe(gulp.dest('./static/css/dist'))
.pipe(livereload(livereloadServer));
});
In your compass log it states:
A) create css/generated/partial/catalog.css
B) create css/generated/partial/base.css
These need to be:
A) create css/generated/partial/base.css
B) create css/generated/partial/catalog.css
My guess is that your screen.scss has incorrect import statements.
I'd recommend looking into common Sass directory organizational structures. My personal favorite is The 7-1 Pattern.
The nature of it splits commonly used elements into other files, which are all imported by a main.scss to kill redundancies.
But also, firstly pay attention to #cimmanon's answer, as he more directly addresses your question.
Having completely given up attempting to touch the command line for SASS compiling, I have installed Prepos which seems to have a decent interface, and at least seems to be able to do the basics like compile SASS.
This compiles nicely when I save the file:
$my_color: #BADA55;
nav {
a{
color: $my_color;
&:hover {
color: darken($my_color, 10%);
}
}
}
The problem arises when I try to import compass, eg. if I add
#import 'compass';
Then I get a 'compilation failed' error- with a big red sad face, but naturally, no elaboration as to what the problem is.
To be honest, I barely know where to start to fix this. I just about grasp the basics of what I'm dealing with, but that's about it. I have found the available online documentation surrounding getting started with SASS nothing short of atrocious, which is why I have (reluctantly) turned to using a GUI. From my understanding Prepros comes with everything out of the box- including ruby and compass. So I really have no idea why this isn't working, and would greatly appreciate any pointers. Thanks.
EDIT: I am using the free version of Prepros (will happily pay for the full version if it actually works) and have tried adding a custom config.rb file which sets some basic configuration options:
relative_assets = true
css_dir = "css"
sass_dir = "scss"
images_dir = "images"
output_style = :expanded
line_comments = true
preferred_syntax = :scss
Doesn't work.
Sorry, adding the config.rb file (with the above content) DOES solve the issue (I'd just made an error in the path).
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!
Getting an error message when compiling my SCSS using the ruby compass gem.
run: /var/lib/gems/1.8/gems/compass-0.12.2/bin/compass compile
out: unchanged sass/partial/grid.scss
out: error sass/partial/catalog.scss (Line 5: Undefined variable: "$paragraphFont".)
out: create css/generated/partial/catalog.css
out: create css/generated/partial/base.css
out: overwrite css/generated/screen.css
My screen.scss imports partials like this:
#import "partial/base";
#import "partial/catalog";
In my base partial I have the $paragraphFont defined.
$paragraphFont: 'Lucida Sans', arial;
$regularFontSize: 14px;
And in catalog.scss I use it:
.product-view #price-block {
p {
font-weight: normal;
font-family: $paragraphFont;
....
}
}
Weird thing is that the css gets compiled just fine, and the $paragraphFont is populated correctly. So I don't know why the compiler is complaining at me about an error.
You're generating files that don't need to be generated.
screen.scss -> screen.css
base.scss -> base.css
catalog.scss -> catalog.css
The catalog file is being compiled on its own. Since it is not importing base.scss, the variables are not set. Your screen.scss file generates as you expect because it is importing all of the necessary information.
What you want to do is rename your partials to begin with an underscore to prevent them from being compiled on their own:
screen.scss -> screen.css
_base.scss (not compiled)
_catalog.scss (not compiled)
A simpler explanation that probably fits most of the users here:
You're compiling all your sass, when you only need to compile the top level file
sass is commonly modularised as follows:
toplevel.scss
include child1.scss
include child2.scss (that also uses variables from child1.sass but does not import child1.scss)
include child3.scss (that also uses variables from child1.sass but does not import child1.sass)
When compiling, you only need to compile toplevel.scss. Compiling other files on their own (eg, child2.scss) will generate errors about undefined variables.
In your gulpfile:
gulp.task('sass', function () {
gulp
.src('./static/scss/toplevel.scss') // NOT *.scss
.pipe(sass())
// Rest is just decoration
.pipe(prefixer('last 2 versions', 'ie 9'))
.pipe(gulp.dest('./static/css/dist'))
.pipe(livereload(livereloadServer));
});
In your compass log it states:
A) create css/generated/partial/catalog.css
B) create css/generated/partial/base.css
These need to be:
A) create css/generated/partial/base.css
B) create css/generated/partial/catalog.css
My guess is that your screen.scss has incorrect import statements.
I'd recommend looking into common Sass directory organizational structures. My personal favorite is The 7-1 Pattern.
The nature of it splits commonly used elements into other files, which are all imported by a main.scss to kill redundancies.
But also, firstly pay attention to #cimmanon's answer, as he more directly addresses your question.