Issues of app.scss compile error in sencha touch - sass

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.

Related

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.

Bourbon not importing correctly?

I am trying to use Bourbon, Bitters & Neat. However, I get en error when I import them.
The error is:
Error: Undefined variable: "$font-stack-system".
on line 6 of base/_variables.scss
from line 6 of base/_base.scss
from line 2 of base.sass
File structure:
sass/base (bitters)/ content of biitters is here
sass/bourbon/content here
sass/neat/content here
base.sass is the file that I am importing bourbon etc into.
base.sass is located in sass/base.sass
Any help?
They are installed via ruby gems.
Just make some changes in base folders that gets created after you install bitters. Goto _variable.scss
copy and paste the following code under //Typography
// Typography
$sans-serif: $monospace;
$serif: $georgia;
$base-font-family: $sans-serif;
$heading-font-family: $base-font-family;

CodeKit 2 Compile error when trying compile SASS file for Omega 4 Drupal Site

I'm new to SASS and CodeKit and am trying to compile a SASS file. The project is a Drupal Omega 4 subtheme. I'm running Mac OSX 10.10 with all the Ruby Gems installed and I'm trying to figure out where the hangup is that's not letting CodeKit compile the file. Any ideas would be much appreciated This is the error I get:
ArgumentError on line ["55"] of /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/lib/ruby/2.0.0/rubygems/core_ext/kernel_require.rb: couldn't find HOME environment -- expanding `~'
Run with --trace to see the full backtrace
This is the config.rb file
require 'compass/import-once/activate'
# Require any additional compass plugins here.
require '~/.rbenv/versions/2.1.3/lib/ruby/gems/2.1.0/gems/'
# require '~/Library/Ruby/Gems/2.0.0/gems/'
# Set this to the root of your project when deployed:
http_path = ""
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"
fonts_dir = "fonts"
output_style = :nested
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false
color_output = false
This is the SCSS file I'm trying to compile
// Import external libraries.
#import "compass";
#import "breakpoint";
#import "singularitygs";
#import "toolkit";
// Import variables, abstractions, base styles and components using globbing.
//
// Globbing will always import files alphabetically. Optimally, all your
// components should be self-contained and explicit enough to not have any
// contained styles leak into unrelated components: The import order should not
// affect the result.
//
// If there are variables, functions or mixins that depend on each other and
// therefore need to be imported in a specific order you can import them
// directly. Variables-, function- or mixin providing partials should never
// output any styles themselves: Importing them multiple times to resolve
// dependencies shouldn't be a problem.
#import "variables/**/*";
#import "abstractions/**/*";
#import "base/**/*";
#import "components/**/*";
Try set the HOME environment variable in your config.rb file.
ENV['HOME'] = "/Users/YOUR_OS_USER_NAME"

Compass/SASS - not all files are compiled

I don't know if I can explain the issue without pasting the whole code of all files but I'll try.
EDIT I've added the whole code to Github Account - My Sass structure
I use Windows 8.1 and Compass 0.12.6
In my public_html folder I have config.rb file and stylesheets folder. In stylesheets folder I have directory sass where I keep all sass files. CSS files are generated into stylesheets/preview folder (for development purposes) and into stylesheets folder (for production purposes).
I run compass watching running watch.bat script that I have in public_html folder
Content of watch.bat is:
START compass watch -c config.rb -e development
START compass watch -c config.rb -e production
EXIT
My config.rb file is:
require 'compass/import-once/activate'
# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "../"
sass_dir = "stylesheets/sass"
images_dir = "img"
javascripts_dir = "js"
cache = false
relative_assets = true
add_import_path "stylesheets/sass"
if environment == :development
css_dir = "stylesheets/preview"
line_comments = true
output_style = :nested
end
if environment == :production
css_dir = "stylesheets"
line_comments = false
output_style = :compressed
end
In stylsheets/sass I have 4 files print.scss , medium.scss, small.scss and large.scss
Both medium.scss and large.scss begin with:
#import "base/_init";
This file import partial _init from base folder and this one loads another partials and other partials load another partials.
The problem is when I change something in partial Compass doesn't always compile all necessary output files. For example I've just changed something in _settings.scss partial and this one is finally loaded by medium.scss and large.scss (I remind that those 2 files have the same beginning so they both should be compiled). Somehow only medium.scss file is being in fact watched and large.scss file is not compiled as it should be in this case.
I have had such situation just before. I stoped 2 watchers (CTRL + C and Y) and then run again my watch.bat not changing anything in files - just after running I have info:
Change detected at 15:51:33 to: large.scss overwrite stylesheets/preview/large.css
Compass is polling for changes. Press Ctrl-C to Stop.
and
Change detected at 15:51:33 to: large.scss overwrite stylesheets/large.css
Compass is polling for changes. Press Ctrl-C to Stop.
So in fact there was change that should be watched but somehow compass/sass doesn't always catch it.
Sometimes neither of 2 watchers catch changes and I have to stop them and once again run watch.bat so it's not very convenient to work that way.
Sometimes even happen that watchers are stopped (as I presed CTRL +C + y) but I haven't pressed anything and in cmd there's no question about closing visible. They've just stopped
Question: What could be wrong and how to fix it?
I've cloned and checked your project structure, and your problem is simply the unnecessary use of the Import Once plugin. If you comment the first line of your config.rb (where this plugin is activated), your stylesheets will be compiled normally. Each main scss file you have (large.css, medium.css, small.css) is rendered to a separated css file, and you're not repeating your imports for each one of these files.
Below is the sequence of your imports with the Import Once plugin disabled:
I dont't know exactly how to solve your problem.
I think basically it's a bug or problem with two instances of compass running at the same time on the same folder.
But due to your environment, I have a suggestion that can do the trick for you.
Why, instead of having two folders with the assets, one for prod. and dev., you just keep one, for both dev. and prod.
What you can set on compass is to output css in the way you want for dev. and then pass that css through a yui filter (or whatever) for prod. This will minify all assets. If you are using symfony, you can use assetics, for instance.
That's the way we do and works perfect. We don't use assetics for compass... that's another topic :D
If you don't use any framework or extra filters, you can alway manually dump the assets when this ones are ready for production.
This way you avoid using two compass instances at the same time and also to compile manually for every deploy on production.
I really think it have to do with having two instances of compass running.

Disable line comments compass not working

I'm trying to disable line comments in my compass config.rb file but I still keep getting the line references to the scss file in my normal css file.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false
I've restarted compass. Deleted my cache folder and my css file after saving my .scss. What am I doing wrong here?
My config.rb file was being ignored. Fixed it by going into the folder with commandline and typing compass watch from within the folder.
Still puzzles my because I have other projects in my WAMP folder and I just use compass watch [project] for those and the config.rb file for those does not get ignored.
Even with output style "compressed", I have not been able to remove multi-line comments, and the sass/scss documentation also suggests that they are not removed (only single-line comments with "//" are removed).
My solution was to simply apply a Perl one-liner to manually remove comments from a .css file, after sass has generated its final output:
sass -fCE utf-8 -t compressed application.sass application.css
perl -pi -e'BEGIN{$/=undef}s#/\*.*?\*/##gs' application.css
This worked for me
compass_config do |config|
config.sass_options = { :line_comments => false }
end

Resources