For sass currently I am using
sass --watch path1:path2
to compile scss file to css but i even found
compass watch path1:path2
also. Is there any difference between these two watches? I created a project with compass create project and found that there are two main folders called sass and stylesheets I looked to screen.scss file and I found the code #import "compass/reset";, but there isn't any directory called compass to call the reset.
I am really new to sass and compass. Can anyone explain me how to use compass? Any help will be greatly appreciated. Thanks in advance.
To understand the difference, you must first understand the difference between Sass and Compass.
Sass is a language which is an extension of CSS. It has built in math functions and adds the ability to add more functions and mixins - but it doesn't include any.
Compass is a framework for Sass. It adds additional functionality on top of Sass such as CSS3 mixins, layout helpers and other utilities. It also gives you the ability to add additional 3rd party frameworks into your project (called extensions).
So with that, the difference between the two are:
sass --watch will compile Sass files, but because it doesn't know anything about compass, it will just ignore it.
compass watch is just like the Sass command, only it knows about the additional Compass functionality. So when you import compass/reset - it knows what to import.
You can find a reference to all Compass' functionality here: http://compass-style.org/reference/compass/
At the top of each page it will show you which part of Compass to import. For example, here is the page about reset: http://compass-style.org/reference/compass/reset/
Related
i wonder if there is some CDN converter, which will convert my scss to css. I need to write some simple mockup project (SASS is required here) and don't want to prepare gulp or webpack for it. Also i have to avoide all websites like codepen etc.
Do you know something like this? Maybe there is something else, what will allow me using SASS files direct in my project.
Cheers,
Daniel
What do you need is an Online Converter, if I correctly understood.
Take a look at sites like Sassmeister or online SCSS or SASS compilers.
If you don't want to depend in your connection, you can do this if you have ruby installed.
gem install sass
sass --update scss:css
Then your SCSS will be compiled CSS
I am using bourbon and neat for the first time after switching over from compass. My set up is as follows:
Importing bourbon and neat at the top of my main SASS file like so:
#import "bourbon";
#import "neat";
Installed using CodeKit 3
All of my neat mixins work great. But any bourbon mixins fail. For example this is the error I get with the linear-gradient mixin
Libsass: Error: no mixin named linear-gradient
Backtrace:
/dev/assets/design/sass/main.scss:117
on line 117 of /dev/assets/design/sass/main.scss
#include linear-gradient(#1e5799, #2989d8);
I thought that neat needed bourbon to work. So I can't understand why my mixins don't work. Assuming I am making a newbie mistake. Can someone point me in the right direction?
What Brad said is pretty much right, except, depending on how you installed it you might find the path is different.
I was able to get it working with the following (my sass is 2 folders below the project root btw).
#import "../../bower_components/bourbon/app/assets/stylesheets/bourbon";
Also, I installed from within codekit package library
close up of codekit package search input
codekit search results package list
You click the arrow on the far right next to the package you want to install.
Hope that helps.
When I was young I experimented with CSS, and then after a while my peers pressured me into trying SASS. It's been a slippery slope and the pushers have now got me onto Compass.
I don't really understand the difference between the following two commands
sass --compass --watch .
compass watch .
As I was having problems with the first command, I tried setting up a Compass project and using the 2nd.
However, this dies saying "Undefined mixin 'background-image'". I can get that error to go away by adding an #import "compass"; at the top of my .scss file. But why would I have to import compass when I'm running the compass command itself?(!) Surely all the libraries are included there? Obviously not.
Any help gratefully received.
The --compass flag for the sass command is only intended to be a quick way to access the Compass library. If you actually need to configure Compass, then it is recommended that you setup a Compass project and use the compass command (see: https://github.com/nex3/sass/issues/858).
Compass is more than just a collection of mixins for prefixed properties. It is an extension manager that happens to have a few extensions by default (compass, blueprint, etc). Using Compass only grants you access to the helper functions (which are written in Ruby) by default. This is by design: you include only the items you need, not what Compass thinks you need.
Just starting out with SASS and Compass.
I've been using a Mac App called CodeKit to compile and manage my Sass and Compass.
If I wanted to use a set of Sass Partials on multiple projects and ideally store these in a central location (for example my dropbox) is this possible?
Codekit has a really nice feature called Frameworks that lets you do this but this doesn't work once you start to use Compass as Compass is a framework in its own right.
Thanks in advance for any help.
Richard
Create a Compass extension and import it into your config.rbs.
Is there a SASS extension that would take SASS stylesheets, find neutral properties (e.g. border-radius) and output all vendor-specific properties for it (e.g. -webkit-border-radius etc) automatically?
I don't really want to create all the mixins manually nor write the code manually. I'm sure there must be such an extension, but I can't find it. Help?
There is a very nice gem that would fit your needs. It's called Bourbon
It will not replace your css with the vendor-specific one as it works as SASS is made to work.
It is basically a mixin collection that generates the cross-browser css properly.
Compass has a CSS3 module that handles a lot of that stuff.