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.
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
The Susy documentation says:
The only requirement is Sass, but Susy was built to be part of the Compass ecosystem, and we recommend pairing with tools like Breakpoint and Vertical Rhythms.
Of course if you want to use the recommended Vertical Rhythms, which is part of Compass, you're dependent on Compass.
But other than using the functions/mixins Compass provides, are there any reasons why I would want to use Compass with Susy? Are there parts of Susy that only work, or work better, when Compass is available?
For example, in the file _breakpoint-plugin.scss you see that Susy actively checks if the Breakpoint Plugin is available, and changes its behavior accordingly. I want to know if there are similar optional dependencies on Compass built in.
PS, In reaction to the close vote:
I do not mean to ask for opinions. I want to know if there are features in the Susy codebase that do not work (or not as well) when Compass is not available. I will update the title to make that more clear. Please let me know if you see more ways to improve the question.
Check the custom support docs for all our integrations. Basically: we'll use Compass prefixing, clearfix, vertical rhythms, and rem fallback if you ask for them.
[...] are there any reasons why I would want to use Compass with Susy?
Yes, compass has some mixins and functions that aren't available in Susy. For example: sticky footer.
Are there parts of Susy that only work, or work better, when Compass is available?
As far as I'm concerned it doesn't. If you read it correctly you will see this:
The only requirement is Sass, but Susy was built to be part
of the Compass ecosystem, and we recommend pairing with
tools like Breakpoint and Vertical Rhythms.
This is for Susy 2, but for 1 however:
Compass is still required for the Susy One syntax.
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.
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/
I am trying to control compass sprite filenames.
My deployment scripts require that images be included in the project file (.Net).
Since compass creates new files each time it renders the sprite (to break caching, I presume)., I have to explicitly get rid of the old reference and add the new.
Has anyone had experience with this?
I don't really want to use an after_build script, but if that's what I have to do I'll take all the suggestions you've got.
thanks.
If you assume to break the caching, you can look at my answer to the question How to turn off COMPASS SASS cache busting?, which automatically created a copy of sprites without hashing.