Is SASS and Compass both the same, why do I have to install ruby. I tried installing it today and there is also susy framework.Web development is so messy.Is compass a nice framework for SASS?

Edited June 10, 201412 yr by graphicnerd

Compass is based on SASS - both of which require a Ruby environment. You could look at LESS which is simply a Javascript file include. Whilst you're at it, take a look at compilers like LESSPHP.

Edited June 10, 201412 yr by jakdothtml

Compass is based on SASS - both of which require a Ruby environment. You could look at LESS which is simply a Javascript file include. Whilst you're at it, take a look at compilers like LESSPHP.

Im just statring though.Front-end developer going php?

@@graphicnerd, I've seen quite a few of your posts, and you seem to be getting yourself confused quite a lot. Remember, frameworks are optional, and I would always recommend getting a solid grasp on the core language first. Once you know CSS relatively well, the transition to Sass, Compass, or LESS is going to be much easier.

 

Try not to get overwhelmed with all the frameworks that exist out there. Try not to learn everything at once and take your time. Honestly, I've seen a lot of developers that try and take on multiple languages at the same time, and get absolutely nowhere. The key to learning is to take one thing in at a time, study it, look into best practices and write out your own examples as much as possible. It's amazing how quickly it will all fall into place.

Compass is simply an addition to SASS that has a number of useful mixins like automatic vendor prefixes. This is a benefit SASS has over the other preprocessors such as LESS,

 

However if you're using grunt as your task runner then you can use grunt plugins to perform many of the things and more than compass can do, auto concatination, minification and so on. So this now means LESS is just as viable a framework as SASS.

 

But like Jack has stated above, try and learn all the basics and fundamentals of CSS, HTML JS etc before you start playing around with the frameworks. No use trying to run when you're not yet able to walk!

Edited June 10, 201412 yr by rbrtsmith

Compass is simply an addition to SASS that has a number of useful mixins like automatic vendor prefixes. This is a benefit SASS has over the other preprocessors such as LESS,

 

However if you're using grunt as your task runner then you can use grunt plugins to perform many of the things and more than compass can do, auto concatination, minification and so on. So this now means LESS is just as viable a framework as SASS.

 

But like Jack has stated above, try and learn all the basics and fundamentals of CSS, HTML JS etc before you start playing around with the frameworks. No use trying to run when you're not yet able to walk!

Could I use css frameworks?

You could, but it's not recommended until you're familiar with CSS. To be honest, Sass isn't going to really do much for you that CSS doesn't already in the early stages. When you come into structuring, maintaining and refactoring code, that's where Sass is super handy. Sass is still CSS, but slightly more dynamic, not a completely different language. In fact, you compile back down to CSS to use on a live site.

@@graphicnerd, I've seen quite a few of your posts, and you seem to be getting yourself confused quite a lot. Remember, frameworks are optional, and I would always recommend getting a solid grasp on the core language first. Once you know CSS relatively well, the transition to Sass, Compass, or LESS is going to be much easier.

 

Try not to get overwhelmed with all the frameworks that exist out there. Try not to learn everything at once and take your time. Honestly, I've seen a lot of developers that try and take on multiple languages at the same time, and get absolutely nowhere. The key to learning is to take one thing in at a time, study it, look into best practices and write out your own examples as much as possible. It's amazing how quickly it will all fall into place.

I agree, learn one thing at a time and learn it properly.

You could, but it's not recommended until you're familiar with CSS. To be honest, Sass isn't going to really do much for you that CSS doesn't already in the early stages. When you come into structuring, maintaining and refactoring code, that's where Sass is super handy. Sass is still CSS, but slightly more dynamic, not a completely different language. In fact, you compile back down to CSS to use on a live site.

 

I agree, learn one thing at a time and learn it properly.

Yeah

Im learning fundamentals though so when I get bored I explore some

advance but just wanna know about it then go back to the basic ones.I did some reading new today about coffeescript, got any thoughts abut coffeescript?

CoffeeScript's goal is to stay as close as possible to the underlying JavaScript while improving on the language's syntax. That makes it very different from, say, Dart, or GWT, or something that reorders code like TameJS. So I think that if you're someone who likes JavaScript but wants to write more expressive code, CoffeeScript is going to be the obvious choice.

 

Looks like you want to learn a bit of this and a bit of that

I would echo the advice of posters above - SASS, LESS CoffeeScript etc. are tools that many people find very helpful, but only once they have got a really solid understanding of the technologies that lie underneath them.

 

I appreciate the frustration of spending so much time getting to grips with the basics while feeling that everybody else is doing all the hip new stuff. I remember it well myself. However, trying to learn frameworks before languages is a bit like teaching a child to use a word processor before it learns how to write, and it will get you into trouble later on.

 

Its good not to get too hung up on frameworks - there are new ones appearing constantly and nobody has time to keep up with everything that's out there. Lots of developers don't bother with them at all.

 

By the way, since you asked about Susy, it is a SASS framework that is used for creating flexible grids for responsive websites. Its a bit of a time saver, but it doesn't do anything that you can't code yourself with CSS and some simple calculations.

 

Good luck with your studies. I'm sure you'll get there.

I would echo the advice of posters above - SASS, LESS CoffeeScript etc. are tools that many people find very helpful, but only once they have got a really solid understanding of the technologies that lie underneath them.

 

I appreciate the frustration of spending so much time getting to grips with the basics while feeling that everybody else is doing all the hip new stuff. I remember it well myself. However, trying to learn frameworks before languages is a bit like teaching a child to use a word processor before it learns how to write, and it will get you into trouble later on.

 

Its good not to get too hung up on frameworks - there are new ones appearing constantly and nobody has time to keep up with everything that's out there. Lots of developers don't bother with them at all.

 

By the way, since you asked about Susy, it is a SASS framework that is used for creating flexible grids for responsive websites. Its a bit of a time saver, but it doesn't do anything that you can't code yourself with CSS and some simple calculations.

 

Good luck with your studies. I'm sure you'll get there.

Is it really need to have a strong knowledge on PHP for wordpress?

I get the feeling you're not listening to our advice and just firing more questions about things you should really be avoiding until you know the basics.

 

WordPress is a backend framework built on PHP and yes like any other framework you should know the underlying language.

I get the feeling you're not listening to our advice and just firing more questions about things you should really be avoiding until you know the basics.

 

WordPress is a backend framework built on PHP and yes like any other framework you should know the underlying language.

Basic knowledge of PHP because its just customizing themes?

I get the feeling you're not listening to our advice and just firing more questions about things you should really be avoiding until you know the basics.

And I get the feeling on his next post he will start on creating wordpress plugins lol

A decent wordpress developer wont be customizing themes. He/she will be creating themes built specifically to meet the clients specification. Do you want to know how to build a new version of Faceook using Node and Angular now?

The full form of SASS is Syntactically Awesome Style Sheets.
SASS is a extension of CSS3 and provides extra.
SASS uses line breaks and indentation to determine rule separations much like HAML.
SASS can generate CSS files on the fly as you edit them.
functionality such as nesting, variables, mixins etc…
Sass is processed server-side using Ruby.

COMPASS is a CSS framework which uses SASS.
COMPASS builds image sprites and includes them in CSS with ease.
Easily updated via command line for latest browser prefixes.
COMPASS provides a library of valuable CSS3, cross browser mixins, typography patterns.

The full form of SASS is Syntactically Awesome Style Sheets.

SASS is a extension of CSS3 and provides extra.

SASS uses line breaks and indentation to determine rule separations much like HAML.

SASS can generate CSS files on the fly as you edit them.

functionality such as nesting, variables, mixins etc…

Sass is processed server-side using Ruby.

 

COMPASS is a CSS framework which uses SASS.

COMPASS builds image sprites and includes them in CSS with ease.

Easily updated via command line for latest browser prefixes.

COMPASS provides a library of valuable CSS3, cross browser mixins, typography patterns.

 

Think you've got muddled up on a few of those descriptions:

 

Sass is not an extension of css3. it is a css preprocessor that is compiled into css.

Compass is not a css framework. it is a library of sass mixins again those that are included are compiled into the appropriate css..

 

Compass has some nice things but if you're using grunt as your task runner, that can handle a lot of what compass does.

Edited July 22, 201412 yr by rbrtsmith

From source:

 

Sass makes CSS fun again. Sass is an extension of CSS3 ...

 

https://github.com/sass/sass

 

Compass is an open-source CSS Authoring Framework ...

http://compass-style.org

From source:

 

 

https://github.com/sass/sass

 

http://compass-style.org

 

You've stated credible sources there so it's hard to argue against them, but for me anyway a css framework in its truest sense wouldn't need compiling, thats why I'd personally describe it as a preprocessor. Maybe they have described it in that way as to not scare off newcomers? who knows. And I guess compass is pretty hard to describe accurately as it is basically just a large collection of sass mixins that again get compiled into css.

 

I look at sass as something like Coffeescript for JavaScript and HAML for HTML.

 

Despite any confusion over how to describe SASS & Compass they are both great, but should be used with caution, if you're not careful with nesting and mixins you can end up with very bloated and overly specific CSS so it pays to look at the css that is generated. Silent extends are a great help in keeping the resulting css lean.

http://csswizardry.com/2014/01/extending-silent-classes-in-sass/

You also need to be a bit careful about installing SASS and Compass these days, since the current versions of each are not compatible with each other (as I discovered the other day when I updated my version of SASS and it completely broke Compass). If you just install Compass (i.e. gem install compass) it will pull in the version of SASS it needs to use.

 

A number of high profile web developers, including Ben Frain (who wrote a book about it) and Chris Coyier have stopped using Compass as they are now compiling SASS with Grunt and using Grunt plugins like Autoprefixer to add css vendor prefixes during the build stage (which used to be a big selling point for Compass).

 

Food for thought.

I agree this can be a little confusing. The up to date version of Compass is 1.x, which is compatible with Sass 3.3 and has been around for a while but needs to be installed by ( gem install compass --pre ), you can find it on the master branch of its github repo. It's much more powerful than the current stable version which relies on Sass 3.2.

The difficulty is that the lead dev (Chris Eppstien) is also one of the main devs of Sass, and they've been hard at work on releasing Sass 3.4. I'm sure once this falls, attention will be refocused on releasing the newer version of Compass as the stable version.

Compass 1.x pulls in data from the same source as caniuse and global usage statistics, so any prefixes and legacy browser hacks are completely up to date, much the same as Autoprefixer.

It's also a lot less bloated, CSS3PIE and Blueprint have been removed and many modules have been rewritten.

But it is fair to say that Compass is much more than just a library of mixins.

If you need the docs for the newer Compass they're at http://beta.compass-style.org

Thanks Wynn, that's very helpful.

 

What made things even more confusing was that I tried to update Susy at the same time, and hadn't realised there was a new version which needs SASS 3.3. That's what you get for relying on the same dev stack for too long!

Edited July 31, 201412 yr by DorianBass

You also need to be a bit careful about installing SASS and Compass these days, since the current versions of each are not compatible with each other (as I discovered the other day when I updated my version of SASS and it completely broke Compass). If you just install Compass (i.e. gem install compass) it will pull in the version of SASS it needs to use.

 

A number of high profile web developers, including Ben Frain (who wrote a book about it) and Chris Coyier have stopped using Compass as they are now compiling SASS with Grunt and using Grunt plugins like Autoprefixer to add css vendor prefixes during the build stage (which used to be a big selling point for Compass).

 

Food for thought.

 

I too now don't see much point in Compass as grunt can take care of most of that stuff for us, not to mention some nice javascript things like concatenating multiple files together and minifying the result, plus automatic lossless image optimisation. Grunt is fantastic, it would be nice to see if there is a way to get grunt to operate on the server for when clients upload their images, afterall it is written in node..

 

Thanks for pointing out the compatability issues with compass you could save me a potential headache there if I do decide to use it in a project

Edited July 31, 201412 yr by rbrtsmith