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.
Related
I recently bought Hammer for Mac.
I am making a static site, and want to use Bourbon + Neat, Bitters and Refills to style the page.
If I am correct, Bourbon is already included in Hammer, but Neat, Bitters and Refills aren't?
At the Hammer for Mac homepage, it says the following about installing Neat:
"If you're using the fantastic Bourbon Neat framework with Hammer, you'll need to download the Neat code from the Neat GitHub repository. The SCSS files for Neat are located inside the app/assets/stylesheets directory.
To use Neat in your project, simply copy the contents of app/assets/stylesheets into a folder in your project. Then just use #import "neat"; in your SCSS or Sass files to use Neat."....
Which I did. I took it as the same needed to be done to include Bitters and Refills.
I then try to use the #import "neat"; commands in my main.scss, but the build always fail.
Any idea on how to get this to work?
Thanks!
It's probably because Hammer for Mac uses a lower Sass version that's required to properly build Neat:
https://github.com/thoughtbot/neat/issues/174
(In other words, download Neat 1.5.1)
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.
So I'm designing a website and I stumbled upon a nice tool for fluid design called Profound Grid. http://www.profoundgrid.com/
I thought it would be very useful and decided to use it, but I find the documentation is meagre at best, and there is little to no help around the internet, the website doesn't even have a contact us button...
The website said that the Profound Grid was created and is used with SASS.
I've installed ruby and SASS successfully and am able to use them just fine, but when I try to use the Profound Grid; which is done by importing a file into your style sheet, the SASS converter gives me an error:
error grid/_grid.scss (Line23: File to import not found or unreadable: compass/utilities/general/clearfix.)
The Profound Grid system uses only one file to function, which is imported into your style sheet, and that is the "_grid.scss", I opened it and found this on the 23rd line:
#import "compass/utilities/general/clearfix";
It appears the grid system imports and uses a file from compass...
To fix this problem I installed the compass gem but I still get the same error message, it cannot locate the clearfix file even though I should have it installed.
To test my compass installation I tried just importing compass like this:
#import 'compass';
An error came up telling me that compass couldn't be located either, so I think there might be something wrong with me compass installation or the way I am importing it.
Have I installed compass wrong?
Is there something wrong with the way compass is being imported? Perhaps the wrong path?
If there is anyone out there with experience with Compass, SASS or Profound Grid I would much appreciate some help.
You have to use the compass command-line tool to compile it. For example:
compass compile
Strange that this piece of software is not distributed as a Compass extension.
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'm new to sass and zurb foundation (I've used bootstrap/less via codekit in the past) and have been trying to use the sass version foundation-sass but can't successfully get it configured - either via the command line using zurb's gem or by using codekit.
If I configure the gem:
Foundation works as long as I load all the foundation components via #import "ZURB-foundation";
But if I try to load components separately by uncommenting #import "zurb/buttons"; I see errors: "Undefined variable: "$default-color" - but where do the variables and mixin files live?
Also, where do the foundation scss files live so you can customize the design without having to override everything using apps.scss?
If I take another route and try to use the mac application codekit:
I get errors that the /zurb/ directory doesn't exist (which it doesn't) - this seems to be related to point 3 above - when you create a new compass-foundation project, none of the foundation files seem to live in your project folder.
If I then download foundation-sass via github:
All the files are in sass format rather than scss
And although you can modify compass mixins as you call them, how do you modify foundation's stylesheet files without modifying their originals - or are you supposed to edit their files?
I haven't found any information I understand on how everything is supposed to fit together so was hoping someone here might know.
I'm not using this with a ruby project btw - just trying to set things up purely for front-end work.
Any help would be much appreciated.
Cheers
Ben
For Zurb Foundation 4 it is as simple as importing the "/foundation/foundation-global" file first
#import 'foundation/foundation-global';
#import 'foundation/components/type';
// etc
See here in the source comments
It's important to note that 'foundation/global' is not the same thing as 'foundation-global'. The later just satisfies basic dependencies, while the former provides some minimal basic styling.
I hope you've solved the problem by now. If not, here's a solution for the gem.
As of Foundation 2.2.1, the suggested import order found in foundation.sass, through commented lines, is somewhat wrong. Many colors or mixins are defined in shared/* and if you load buttons/* before loading these, you'll end up insulted by compass.
On the other hand, the partial _ZURB-foundation.sass (imported by #import "ZURB-foundation") loads partials in the right order, explaining why you only got errors while loading components separately.
Try this order (SASS syntax, add quotes and semicolons for SCSS):
#import zurb/shared
#import zurb/globals
#import zurb/typography
#import zurb/grid
#import zurb/buttons
#import zurb/ui
#import zurb/forms
#import zurb/orbit
#import zurb/reveal
#import zurb/mobile
You can use gem which ZURB-foundation to find out which directory stores the gem. Customizing Foundation files directly is nevertheless a very bad idea, as your changes might be erased by further updates.