I use Zurb Foundation along with Susy grids, they both have a mixin named "prefix". I'm using "bower" to include them in my project, so how to namespace them without changing in their source code?
I can imagine only a not so clean way:
if you can separate the .scss that is using Susy grids from the other foundation stuff, you could use grunt to compile 2 separate files, one sass run for foundation and one run for Susy grids, then eventually merge the 2 outputs.
Sass does not offer namespacing at this point in time. It is a planned feature for 4.0.
Related
I've read that SASS uses Ruby to compile. I have a webhosting at One.com, I don't think they support Ruby. Am I able to run SASS on it?
You actually do not need to use ruby to compile sass. There are a few alternatives.
If you are using Laravel 5 you can do this with the new elixir feature which uses gulp to process tasks.
Or you could use gulp along side Laravel 4.
Or you could use grunt.
All of these options use libsass in the background instead of ruby.
Usually SASS is compiled in CSS in development and the production server only serves the CSS.
You would need Ruby if you wanted to compile SASS though. Sometimes that's needed to create more dynamic stylesheets although I'd generally advice against it because it slows down performance.
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.
We're using the SASS version of Foundation 4.
A co-worker is saying you shouldn't modify the sass files in case you want to update it in the future; which is a good point.
I think it's necessary to modify the files in order to make proper use of the existing mixins and nesting.
I'm hoping someone with more experience could shed some light on the proper way to use the framework.
For development I would definitely suggest not touching the core files as your co-worker pointed out.
Since you are using SCSS, you can easily include the core files into your own version of them (which add/overwrite rules).
Example: /scss/custom/components/_my_alert-boxes.scss
#import("/scss/foundation/components/_alertboxes.scss") // Foundation core
$alert-border-style: dashed;
#mixin alert-close {
//Override default mixin.
}
Then once you are ready for production you'd want to go back and remove all the unused rules, minify code, and all that good stuff.
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/
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.