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/*'
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'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.
I'm just trying to get my head round all things SASS, Compass and the Front-end framework Foundation from Zurb.
I've got everything installed properly, and my first foundation template is setup. Now I'm trying to configure what to include from the foundation framework.
In the foundation.scss file there is a line:
#import "compass/css3";
I can't for the life of me work out where this file is coming from.
The file comes from Compass itself: http://compass-style.org/reference/compass/css3/
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.