I just installed Foundation 5 and created a new project with compass:
$ foundation new myproject && cd myproject && foundation update
In order to modify my column's gutter, I commented out #import "foundation/functions"; and $column-gutter in my _settings.scss:
// Uncomment to use rem-calc() in your settings
#import "foundation/functions";
...
$column-gutter: rem-calc(30);
But Compass says:
error scss/app.scss (Line 49 of scss/_settings.scss: Undefined variable: "$rem-base".
I also tried creating a project with libsass:
$ foundation new myproject --libsass && cd myproject && foundation update
However grunt says:
Warning: bower_components/foundation/scss/foundation/functions:49: error: unbound variable $rem-base
What else should I do?
If you download sass files from github this problem solved 4 days ago by adding $rem-base: 16px !default; to _functions.scss file:
https://github.com/zurb/foundation/commit/3a48ef984309023b5b8c9c67fb4134a998728773
You have two solution:
Downlaod latest version of zurb-foundation from github: https://github.com/zurb/foundation/
Add $rem-base: 16px !default; to _settings.scss file before #import "foundation/functions"
Related
In trying to learn/use sass for 1st time, I used Homebrew to install dart-sass on recently updated High Sierra 10.13.3 . That worked and sass --version shows 1.1.1 I created a simple .scss file:
$color: #d9534f;
body {
color: $color;
}
and while in the same directory, then issued:
sass main.scss main.css --trace
in console and got:
Error reading main: Cannot open file.
dart:io _File.readAsBytesSync
package:sass/src/io/vm.dart 27 readFile
package:sass/src/compile.dart 33 compile
package:sass/sass.dart 63 compile
package:sass/src/executable.dart 110 main
What do I need to change, learn or do to get this working?
Oops. Reinstall. I ran
brew update multiple times, then
brew uninstall sass then
brew install --devel sass/sass/sass
and now
sass main.scss main.css
works.
I am having an issue trying to import SCSS files in my Nativescript app. I am adding these lines to add my default theme styles in my app, the lines are added in the app.android.scss and app.ios.scss:
#import '~/assets/skin';
#import '~/assets/list';
The files are inside app/assets folder and their real names are: _skin.scss and _list.scss.
The problem is when I try to use Nativescript Sidekick and build for iOS in the cloud it gives me this error:
Found peer node-sass
[17-10-25 13:55:16.820] (Info) Error: It's not clear which file to import for '#import \"assets/skin\"'.
[17-10-25 13:55:16.822] (Info) Candidates:
[17-10-25 13:55:16.823] (Info) assets/_skin.scss
[17-10-25 13:55:16.825] (Info) assets/skin.css
But building the app for android locally it works.
Any suggestion?
Thanks!
Year ago I did a Foundation project and all went ok, but I need to do some changes now and now I have issue with compiling scss.
Folder struction contains
Bower_components/
css/
images/
js/
scss/
config.rb
Config.rb looks like this
# Require any additional compass plugins here.
add_import_path "bower_components/foundation/scss"
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "js"
And I am using Koala for compiling scss file (mobile_CP.scss) that looks like this:
/*
========== VENDOR
*/
#import "compass/utilities/sprites";
#import "compass/css3/images";
#import "compass/css3/border-radius";
#import "compass/css3/box-shadow";
/*
========== UTILS
*/
#import "utils/variables.cp.scss";
/*
========== COMPONENTS
*/
#import "components/CP/container";
Now I get error where it says:
Error: Undefined mixin 'background-image'.
on line 165 of D:/TestRepo/mobile.application/trunk/scss/utils/_variables.cp.scss, in `background-image'
from line 165 of D:/TestRepo/mobile.application/trunk/scss/utils/_variables.cp.scss, in `cpButton-silver'
from line 246 of D:/TestRepo/mobile.application/trunk/scss/components/CP/_overwrite.scss
from line 20 of D:\TestRepo\mobile.application\trunk\scss\mobile_CP.scss
Use --trace for backtrace.
Can't wrap my head around why I get this error now Undefined mixin 'background-image' and before it all worked ok??? Am I overseeing anything?
I found the solution for this issue. I was using the new version of compass (1.0.3) and sass (3.4.20), but the thing is i installed foundation project with bower and this didn't work with newer versions so I had to downgrade to compass 0.12.7 and sass 3.2.19. This complied my code with no errors.
Followed the instructions to download the sass Foundation version. (http://foundation.zurb.com/docs/sass.html)
I keep getting the following error in app.css
Syntax error: File to import not found or unreadable: foundation/_functions.
Load path: /Users/xxx/Desktop/sandbox/app
on line 13 of scss/_settings.scss
from line 1 of ./scss/app.scss
Any ideas?
Inside of the foundation folder there should be a file named _functions. The underscore in front of the name indicates that it's a partial file and is compiled into app.css using #import.
1: Check to see if _functions is in the foundation folder
2: If it is, check your import path
3: If it's not, try downloading Foundation again
Just as a tip, I like to use a app called Mixture.io. In addition to having a lots of its own features, it makes setting up a Foundation project a cinch.
Hope this helps.
I am not a ruby developer and I have been using Compass for a good 6 months. I have discovered this problem shown below.
I have read this question and used the top rated answer:
getting error after ugrading to sass-3.1.8
Version of Sass: Sass 3.1.1 (Brainy Betty) (as per suggestion)
Compass version: Compass 0.12.1 (Alnilam) (latest)
I run this command: compass compile --force when inside project.
error sass/screen.scss (Line 3 of _utilities.scss: Mixins may only be defined at the root of a document.)
This looks like automatically included file. I definitely can't find it anywhere. My main screen.scss file looks like this:
#import "partials/base";
#import "blueprint/reset";
#import "compass/css3";
#import "sprite/*.png";
$sprite-layout:vertical;
$sprite-spacing: 15px;
#include all-sprite-sprites;
....//blah blah blah rest of rules ....
Help!