0

What is the difference between simply downloading something like foundation and referencing in your site and installing it via SCSS?

I've been using bootstrap by downloading it and using the classes/modules.

I recently learned SASS and use it to write css quicker and more organized.

I don't quite see the connection between a simply referencing a framework and using it via SCSS (I'm not even sure what that means)

Kenny
  • 339
  • 1
  • 4
  • 12

2 Answers2

1

You don't have to install anything. The only advantage that downloading the framework as a scss or less is that it gives you access to the original, non-compiled, source code. Hence, if you want to make any modifications, they should be there. Also, if you want to peek at the behind the scenes, you will probably understand what's going on better on the source file than on the css one.

However, your production site should have regular .css files. While it is possible with some Javascript magic or server side compilation to use .scss, I advice using that only for developments purposes and not for production.

Sunyatasattva
  • 5,619
  • 3
  • 27
  • 37
  • why is it so complicated to download foundation scss? why can't they just have a download link? it says that I need ruby/nodejs/and git =\ http://foundation.zurb.com/docs/sass.html – Kenny Mar 21 '14 at 04:52
  • If you really wanted to get just the `scss` you can just download it from Github: https://github.com/zurb/foundation/tree/master/scss however they do advice that, in order for your application to properly manage dependecies (you should learn about that). – Sunyatasattva Mar 21 '14 at 04:55
  • You shouldn't make changes to the framework though right? because if you update then the update will wipe the changes you made. Can you give an example of a scenario where having the scss of foundation/bootstrap would be better than simply having the css? – Kenny Mar 21 '14 at 05:27
  • Yes, you probably shouldn't make changes to the framework. There are a couple of situations in which you want the source. First of all, to study and understand what's going on. Secondly, you might want to change something sometimes, like variables (to personalise colors and accents). In this case, take a look, for example, at this question: http://stackoverflow.com/questions/10451317/twitter-bootstrap-customization-best-practices. Lastly, you of course want the source if you are developing on it. – Sunyatasattva Mar 21 '14 at 05:36
0

Ideally, you wan to combine both methods. Using a framework is a great idea because when the framework puts out an update, it easy to keep your solution updated and then just work the kinks out. Also it saves you from having to re-invent the wheel. So much is created for you already.

Using a SASS or .LESS allows you to do many techniques that will make your code more organized but most importantly you will create way less classes because of the ability to nest. For example, in a normal css, you would create several classes to make each element behave a certain way, and if you are good, you'll do some mapping. In .less you would simply nest your code from div to span and the compiler will build it for you.

The ability to create mixins and imports make your working platform smaller as well. With imports, you could have 6 css in your your root, but you will be able to declare just a couple of stylesheet because they are all imported. Thus makng your page loading time much faster.

For instance, I am the senior developer for the Pennsylvania Department of Welfare and I run an entire state-wide website with only two css declarations in the head section. 1.The bootstrap.css and the custom.css that I created with .less to modify the bootstrap as I needed.

Hope that clear things out.

SASS

LOTUSMS
  • 10,317
  • 15
  • 71
  • 140
  • I understand how SASS works and it's been very wonderful! The problem I'm having is making the connection between using SASS and using the SASS version of foundation/bootstrap. Can you give an example of when having the SASS version of foundation/bootstrap would be beneficial over simply having them as css? – Kenny Mar 21 '14 at 05:26