I have a Grunt task for compiling scss files using Compass and build fails every other time. When I change a file that uses a Compass mixin, e.g. #import box-sizing(border-box), it fails and says that plugin is not included (it actually is included in a file "all.scss" using #import "compass/css3/box-sizing", and then it includes other scss files.
Second time (after you see the error) you try to compile it, it works just fine. I guess the reason is that if other files (specifically my "all.scss" file) has not been changed, it skips it during compilation, so include is not found.
Also, if I use require 'box-sizing' or require "compass/css3/box-sizing" in config.rb, it also fails saying that it can't find this plugin.
Any idea what's the cause?
box-sizing is a mixin, so you want to #include it, not #import:
#include box-sizing(border-box);
As you were importing it, the compiler treats it as a Compass extension, which is missing in the config.rb. But it's not an extension in the first place, it's part of Compass in the first place!
So changing #import to #include will solve your issue.
See http://sass-lang.com/#mixins for syntax.
Related
this is a strange error that I don't understand at all. I usually search and seek the answer before posting it on StackOverflow. So the problem is that I would like to use the variables that I imported from another scss file called _variables.com using #use. This is written in scss-lang.com#use. The way I try to use my variable:
_variables.scss
$secondary-color: #CEA44A;
style.scss
#use '../../variables';
.foo {
background-color: variables.$secondary-color;
}
// ERROR TEXT
Invalid CSS after "...olor: variables": expected expression (e.g. 1px, bold), was ".$secondary-color;"
on line 19 of sass/c:\Users\Amirreza Amini\Desktop\blog\src\Components\Register\Register.scss
background-color: variables.$secondary-color;
Use Live Sass Compiler by Glenn Marks
I had exactly the same problem. You read about #use on SASS official website, follow the instructions, write the code in Visual Studio Code and then you get this strange Compilation Error when saving the SASS or SCSS file. You double check everything and it seems like it should work but it doesn't.
Well, the problem is caused by the Visual Studio Code extension you are using for compiling SASS or SCSS files to CSS files.
Don't use this extension: Live Sass Compiler by Ritwick Dey
You are probably using this extension: Live Sass Compiler by Ritwick Dey.
It's widely used, but no longer supported by the author. Consequently, the SASS version isn't updated. This extension produces the error you are describing as you can see below.
Use this extension: Live Sass Compiler by Glenn Marks
You should use this extension: Live Sass Compiler by Glenn Marks. As the author states: A big thank you to #ritwickdey for all his work. However, as they are no longer maintaining the original work, I have released my own which has built upon it. This extension compiles your SASS or SCSS files to CSS files successfully as you can see below.
change #use '../../variables'; to #use '../../variables' as *;
I've been using Compass to compile Sass in my project, but it is now deprecated and no longer maintained so I want to move away from using Compass. The project uses PHP and Laravel, so I would like to use Laravel Elixir for compiling the Sass files instead.
Is there a way to transfer my .scss files from Compass to Elixir without going in and changing all the places in my Sass code that I use Compass helpers, or do I need to more or less re-write my Sass files? There are a ton of them, so I would love to avoid that.
On the suggestion of my co-worker, what I tried was to add the compass files to my resources/assets/sass directory (includes compass/css3, compass/layout, compass/reset, compass/typography, and compass/utilities, as well as several other .scss files included in Compass. The hope was that by including these files, the functions of Compass would still apply outside of it.
When I try to compile with gulp, the error I'm currently getting (although I'm guess I'll run into another one once this is fixed) is:
>> Sass Compilation Failed: resources/assets/sass/compass/_support.scss
Error: Undefined operation: "prefix-usage(browser-prefixes(browsers()), css-transitions, (full-support: true), (partial-support: true)) gt 0.1".
on line 324 of resources/assets/sass/compass/_support.scss
>> #if $usage > $threshold {
------^
My guess is that I will need to go ahead and remove the Compass stuff from the Sass code manually, but I'm hoping someone else has a better solution for me! Thanks.
I just started with materialize but now I'm faced with a problem.
When I want to use: #media #{$small-and-up} { media query in my own scss file I get the following error: Error: Undefined variable: "$medium-and-up". While I'm importing the materialize.css file which is compiled from /sass/materialized.scss.
So my question is how can I use the variables / media querys in my own scss file?
I compile the scss by the file watcher plug-in in PHPStorm or by sass compiler installed in command prompt windows.
I hope someone can help me.
SASS variables don't exist in compiled CSS files. If you want to use variables defined in materialized.scss in your own SCSS stylesheet, you need to insert #import "sass/materialized.scss" in your stylesheet.
Incidentally, if you do this, you probably won't need to compile materialized.scss any more. Just compile your SCSS stylesheet, which, because of the #import statement, will pull in materialized.scss.
UPDATE:
After reviewing code at https://github.com/SuperDJ/dsuper/blob/master/private/admin/css/sass/opening.scss, it seems the problem is with this line:
#import url(/private/admin/css/material/sass/materialize.scss);
This is not valid syntax in SCSS. It should be:
#import "../material/sass/materialize";
Iam trying SassyStudio für Visual Studio to compile the SASS in our project - but there area some issues.
The project is structured like this:
Solution
- Project 1
-- Areas
--- Area 1
---- Styles
----- style.scss
------ style.css
--- Area 2
---- Styles
----- style.scss
------ style.css
-- Styles
--- globalstyle.scss
---- glogalstyle.css
As you can see the scss files are scattered all around the project. The css Files should be compiled beside the scss files. Since there are compass references within the scss files there are dependencies to compass.
Mindscape Web Workbench is not designed to work like this.
I installed Ruby + gem sass + gem compass and
sass --watch C:/compasstest:C:/compasstest --compass
works well. But I dont like to start a batch everytime I start developing.
So I found SassyStudio an it pretty looks like what I need. But there are some issues with the compass references. In the options I entered "C:\Program Files (x86)\Ruby193\bin" to Ruby Install Path and "C:\compass" to the Include Paths property. The Compass Folder contains for example the "compass/css3" structure from github.
12:00:52.447 : Failed to compile css.
[SassCompileException]c:\compass/compass/css3/shared:1: error: file to import not found or unreadable: "compass/support"
at NSass.SassCompiler.CompileFile(String inputPath, OutputStyle outputStyle, Boolean sourceComments, IEnumerable`1 additionalIncludePaths)
at SassyStudio.Integration.LibSass.NSassDocumentCompiler.Compile(FileInfo source, FileInfo output)
at SassyStudio.Editor.GenerateCssOnSave.GenerateCss(DateTime time, String path)
12:00:52.447 : Compile complete.
What exactly is Ruby Install Path for?
Do I need the config.rb even if I dont want so specifiy specifiy sass and css folder?
How can I tell SassyStudio to find the file compass/support (It already found compass/shared as we can see)?
OK, so the sass --compass is new to me, so I don't know if I can comment on that.
Here is what you want to do.
First, change your ruby path to this C:\Program Files (x86)\Ruby193 as you don't need the bin directory in there (and not sure if it would cause issue or not).
Next, for me to detect that you are using compass (vs sass gem), I look for the config.rb file, and I believe that compass requires this to work as well, but not exactly sure on that. For me though, I definitely need it.
Now, what happens when you save a file is that I go looking for that config.rb from the current directory upward, so I believe that you can achieve what you are wanting to do through the use of multiple compass.rb files. So, that means if you put one in Area 1, one in Area 2, and one in Styles, I think it will work (but I've never tried).
I'm a bit unfamiliar with the syntax of compass.rb but I'm sure you will be able to figure out something that works there. That file may need to go into the Styles folder instead of root folders, I don't remember for sure (I think styles is perhaps configured in config.rb).
Let me know if you need anymore help.
I'm using Foundation 4 standalone as a read-only git submodule in a project, and need combine all of its scss files into an umbrella project.scss file, which then gets compiled to project.css.
I'm using Compass to compile, however it compiles any scss file not appended with underscore, so both foundation/scss/normalize.scss and foundation/scss/foundation.scss get compiled twice each - once each standalone, and also into my project.scss file that imports both.
Is there any way to prevent compilation besides appending an underscore to normalize.scss and foundation.scss? I'd rather not append the underscore b/c I want to use the Foundation standalone project exactly as is from the official repo, and simply import it into the project-specific project.scss where all the customizations reside.
Edit: More explanation - I'm using a Scala framework managed by SBT, which makes a system call to Compass compile via an SBT plugin. Compass compile still reads config.rb in my project root for source and target dirs, but I'm not sure what/if other Compass tricks are available in this setup.
I was rather hoping for some kind of syntax trick in config.rb or a Compass command line flag that could tell it to, say, compile all .scss files in [project root]/sass, but not recursively, eg, don't compile anything in [project root]/sass/foundation or other subdirectories. Anyone know anything like that?
The solution is simple: do not include Foundation files into your project.
Instead, install it as a Compass extension and require it from your Compass config.
Note that installing via Gemfile (bundler) is preferred over installing manually with gem install.