I'm trying to compile Animate.scss (by Geoff Graham) but all that's appearing in "style.css" is a tiny portion of the CSS.
I'm using Ruby "sass --watch scss/dir.scss:style.css" to compile and it works correctly for other partials (e.g. Bootstrap 4, whch is commented out in the first column in "dir.scss") but I can't figure out why the Animate library is having this issue. Ruby command terminal is not showing any errors.
Used the latest release on github (3.2.2) and now it's working.
Related
I've been unable to find something similar to this on a Google search, but using VSCode and Dart Sass (now v 1.23.1) and running sass --watch css the file keeps on saving/compiling
There seemed to be no issue earlier today. However, the version I was running was 1.21. (I updated Sass to use the new module spec)
What is happening?
The file main.scss is saved
Terminal displays Compiled css/main.scss to css/main.css
It then loops, printing the following
Compiled css/main.css to css/main.css
Things I have tried
Uninstalled and reinstalled sass
deleted map files and related compiled files
Aprart from that, I am at a loss of what to try next. Has anyone experienced similar to this and what did they do to resolve it?
It seems this has been reported as a bug in the Dart-Sass repository and a pull request has been opened.
I recently updated to OSX Yosemite and now, when I run Grunt and make changes to the sass file in my project, I receive the following error:
Warning: Error: Error generating source map: couldn't determine public URL for the source stylesheet.
No filename is available so there's nothing for the source map to link to.
on line of standard input
Use --trace for backtrace. Use --force to continue.
I have made no other changes to my Grunt setup or sass:dist, dependencies are unchanged and so forth. Any help resolving this would be greatly appreciated. Thanks!
This issue can have more than one reason, maybe this will help you.
Before starting remove the compiled css!
Update grunt-contrib-sass to the latest version
Sourcemap Requires Sass 3.4.0, which can be installed with gem install sass
Run grunt sass task and review compiled css.
When everything is updated, the sourcemap should be automatically created and available. Be sure to empty browser cache before testing in the browser.
I am attempting to create a Magento skin based off of the rwd skin provided in CE 1.9 / EE 1.14. However when I attempt to compile the SCSS (on a clean install, after deleting the files in /skin/frontend/rwd/default/css), I get the following error:
$ compass compile scss
write css/madisonisland-ie8.css
write css/madisonisland.css
write css/scaffold-forms.css
error scss/styles-ie8.scss (Line 541 of scss/core/_common.scss: Invalid CSS after "a:not(": expected ")", was "".button")")
Sass::SyntaxError on line ["541"] of /var/www/development/magento-mirror/skin/frontend/rwd/default/scss/core/_common.scss: Invalid CSS after "a:not(": expected ")", was "".button")"
Run with --trace to see the full backtrace
Line 541 in scss/core/_common.scss is:
a:not(".button") {
And if I remove the surrounding quotes from .button - it compiles successfully. However, as this is a fresh install of Magento, should I really need to be editing files in order to get them to compile? Could there be a config setting in compass I have missed etc?
Thanks
I too experienced this issue while doing exactly the same as Tom Griffin - creating a new custompackage/customtheme with rwd/default as the parent.
Copying core/_common.scss into my customtheme folder and removing the quotes as per Tom's initial message fixes the issue and allows compass to compile correctly.
It's quite poor that Magento is shipping with invalid SCSS files which don't compile. Certainly hasn't helped me when learning SASS and Compass for the first time!
As Tom postulated perhaps it's a SASS/Compass version or setting which the Magento theme developers have. I am using SASS 3.4.1 and Compass 1.0.0.
Thanks
Tom
Open scss/core/_common.scss and edit line 541 only remove quotes from ".button"
a:not(.button) {
This is a compatibility issue with compass. When the Magento 1.9 rwd theme was shipped, the latest version of compass was 0.12.6 which compiled correctly. I have at least tested with 1.12.3 and had no problems compiling. I suspect this will be fixed in the next release since the developers will have been compiling on a later version of compass as they came out. Removing the quotes will achieve your desired result and compiles correctly under the 1.0.0 & 1.0.1 versions at least. This really is more of a compass compatibility issue than a Magento core bug but I am sure it will be taken care of soon.
I have a very simple gulp based test environment using only sass and the susy2 gem - no compass because compass is no longer a dependency of susy 2
The error i'm getting is
...sass/susy/language/susy/settings:8:error: error reading values after container
line 8 of the problem file, susy's settings is as follows:
#include susy-defaults((
container: auto, <- line 8
math: fluid,
output: float,
container-position: center,
gutter-position: after,
global-box-sizing: content-box,
debug: (
image: hide,
color: rgba(#66f, .25),
output: background,
toggle: top right,
inspect: false,
),
));
I'm using sass version 3.4, which should support the sass maps syntax, and gulp-sass version 0.7.3. along with susy 2.1.3.
Any idea why im getting this error?
You must update SASS to later than 3.3. Current version of SASS as of this writing is 3.4.1 Selective Steve. Type sass -v in your terminal (assuming OSX) to see what version of SASS you are currently on.
gulp-sass is actually a wrapper around Node-sass, which again is a library
that provides binding for Node.js to libsass, the C version of the popular
stylesheet preprocessor, Sass.
It allows you to natively compile .scss files to css at incredible speed and
automatically via a connect middleware.
As this node-sass page says:
"..The libsass library is not currently at feature parity with the 3.2 Ruby Gem
that most Sass users will use, and has little-to-no support for 3.3 syntax.
While we try our best to maintain feature parity with libsass, we can not
enable features that have not been implemented in libsass yet."
So it does not matter which version of sass you have installed,
because gulp-sass is not using it.
The problem that arises with susy2 is that of, libsass currently not
supporting some of features susy2 exposes.
The way I resolved this issue, was using
gulp-ruby-sass instead of
gulp-sass, which is slower but more feature-rich. And will work with Susy2.
I wanted to use SASS on our company's web app but I can't install any programs on production machines. Everything I searched about SASS required you to run an installation program like gem and also required HAML.
I was hoping to find just a script that processes scss files without needing to install anything else.
Well... if you have Ruby available, you could checkout the Git repository of Sass (https://github.com/nex3/sass). Do so by either typing git clone https://github.com/nex3/sass.git or just downloading it.
Then you could use the interactive Ruby console by typing irb. Try to require 'sass/lib/sass' (this one here) and run Sass.compile_file 'my_styles.css'.
Otherwise... why are you trying to do that? You can also install sass locally, run sass --watch on your sass folder and it compiles your scss files automatically into css files - which you can deploy on your production environment.
If you can run java program in your build system, you could use JRuby for compiling sass. See this answer for more details
Here's a solution for using Sass without using the command line or installing dependencies. It works with Windows, OS X, and Linux. It has a graphical interface, and no installer, just unzip and double-click.
http://scout-app.io
You can also use the java library https://github.com/scireum/server-sass which can be embedded into any java based web-app. It will compile sass on the fly and return the resulting css. This is especially useful if the Sass sources change (i.e. for customizing reasons) and an ahead of time compilation is not possible. (Note: I'm the author of the project - and it is also not yet a complete implementation of the Sass standard).
Alternatively, what you could do is:
Install Ruby
Download the Sass Gem
Navigate to download location
Run: gem install sass-3.3.4.gem
Voila! Sass is installed.
Use the online Sass compiler SassMeister. You just have to paste your sass code on the left panel and get the css code on the right.