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.
Related
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.
i've started a project with compass 0.12 and sass 1 and susy 1.0.9.Now i want to resume it and i done an upgrade for gems.So i have now newers versions for compass (1.0.1), sass (3.4.0, 3.2.12)
ans susy (2.1.3).
So i found a fix to use old syntax for susy 1,
#import "susyone";
but i still get errors for compass:
(Line 280 of /var/lib/gems/1.9.1/gems/compass-core-1.0.1/stylesheets/compass/_support.scss: List index is 2 but list is only 1 item long for `nth')
This nth is used for an additional buttons styles.So i don't find other ways to fix this.
Can i specify a compass version to use ?
Thanks
This seems to be the same issue documented on github here and in Compass here. I'm not sure about any work-arounds at this point, besides turning off grid-image output for the time being.
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'd love to use Bourbon with LiveReload but I can't seem to get them to work together. Anybody successfully made these two play nice?
If you use the 'Run a custom command after processing changes' option rather than the standard compilation option, then you can use the commands as detailed on the readme.
# Example (project root directory)
sass --watch stylesheets/sass:stylesheets -r ./stylesheets/sass/bourbon/lib/bourbon.rb
I wrote a blog post covering this.
If you install the latest version (3.0.0) of Bourbon and install bourbon into your compass sass directory:
bourbon install --path ./sass
You can then use LiveReload with one small tweak. You will need to replace LiveReload's version of SASS with at least 3.2.3, since Bourbon requires this.
Instructions on how to replace LiveReload's default SASS version can be found here: http://carl-topham.com/theblog/post/changing-version-sass-livereload/
This seems to work for me.
I've been told you can get it to work by passing the lib/bourbon.rb file into the "Run a custom command" option in LiveReload. See attached image.
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.