SASS Settings in Foundation - sass

I've installed SASS version and i have the _settings.scss file which is all are
commented.
How can i do some settings or some modifications here?
Shall i remove the comments and recompile?
Thanks.

Yes it's how you do this. And if you need some in depth changes then instead of importing foundation in app.scss file you can import elements individually(most likely you don't need all of them) so you can modify components separately while all other components will load from foundation gem and update.

Related

How to work around #mixins naming conflicts?

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.

Sass does not compile compile right with more than one project accessing a foundation folder

I'm using CodeKit 2.1.8
I was using Foundation 5.4.6 but got in to some problems and updated to 4.5.7 now I still have some problems but different ones.
I was using Sass version 3.4.7 but downgraded to 3.2.19 after reading this could help. This did not help so I updates back to 3.4.7.
Right now my problem is as follows:
I have foundation installed through CodeKit. I did not alter die bower component files, everything is as is.
I have two projects accessing the bower component folder. My folder structure is as follows:
zurb-foundation
bower_components
dsl
css
img
js
scss
index.html
header
css
img
js
scss
index.html
.bowerrc
bower.json
config.codekit
package.json
The Sass files in both the dsl and header folder are completely identical. But they compile different.
Right now the dsl app.css file has about 15000 rows where the header app.css file has about 5000 rows.
I compared them and there are a lot of differences. All of the styles and components get loaded but it looks like the styles get multiple times in the dsl/app.css. Another difference is that the header folder has no sass-cache folder but the dsl folder has got a folder called sass-cache.
So there are some compilation differences does anyone has encountered this before?
Thank you
I also posted this question in the Foundation forum. Rafi Benkual provided me with this answer:
Have you tried Libsass? Here is the recommendation from Codekit:
Sass Update
"Keep using Libsass to compile Sass files in a Zurb Foundation project because the latest Ruby Sass compiler (3.4.5) is not yet supported by Foundation. This should clear up in the next few weeks. See the link in the 2.1.7 release notes, below, for more information."
In CodeKit 2 you can find "Use the libsass compiler" checkbox under "Other options:" on the .scss file's settings panel (on right).
This worked for me.

Foundation 4, Compass and SASS

I'm using Foundation 4, Compass and SASS (I use the Compass gem to create new projects). But, I am a little lost. Where do I place my own scss files?
Compass creates a sass stylesheet directory that contains
_settings.scss
app.scss
normalize.scss
I work in a modular way, where I have a number of stylesheets such as navigation, content, footer etc. Where do I include my scss files? Do create a partials folder, then import them in the app.scss?
If I import them into app.scss, this will append my CSS to the end of app.css. But, using Compass watch, it also creates each one of my partials ... which are not needed because they're being appended to app.css.
I've looked on the compass, sassy and Foundation site and I can't seem to find out how to do this. Because I'm using Foundation, I thought the information I require may be on there but I can't find it. It seems to be a SASS issue, and not a Compass or F4 issues. It's a little confusing and not documented on the web from what I can find.
Name partials starting with an underscore _footer.scss and then import them into your app.scss (or whatever you call it) with #import 'footer'. If you don't use an underscore in the file name, it will create a CSS file, which seems to be the problem you're having.
Compass is completely agnostic about your file names or structure.
You can, for example, import files in folders:
#import 'partials/footer'
#import 'partials/navigation'
Or, if you install sass-globbing, you can import an entire folder like this:
#import 'partials/*'

Compass File Location Best Practice

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.

Configuring zurb foundation-sass with compass - how do you get it working and use it in a project?

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.

Resources