Sass vs Photoshop

You are able to declare custom functions with Sass (for example, converting units) which can be easily invoked, even when using shorthand properties. This results in cleaner, more reusable code.

Sass allows you to nest selectors which results in code that is both faster to write and cleaner to read.

For example, this:

.parent 
  color: blue
  .child
    color: yellow

Will compile to this:

.parent {
  color: blue;
}
.parent .child {
  color: yellow;
}

Another big advantage for Sass is the very active community pushing the development forward at a rapid pace. Sass is constantly coming out with bug fixes, and are often the first to come out with improvements.

This is an important factor to keep in mind when picking a preprocessor to invest your time into.

It comes with two possible syntaxes:

• Sass - No parens or semicolons allowed and the nesting is dictated with whitespace.
• SCSS - SCSS syntax is a superset of CSS – which means SCSS can be written as CSS, but has been expanded to include the features of Sass as well.

SCSS is easier to pick up for beginners and Sass has a cleaner syntax. Having both syntaxes means you can pick the one that best suits your coding style.

The mandatory syntax rules for both SCSS and Sass results in a more consistent code. For a more detailed analysis between Sass and SCSS go here. To see a nice comparison of the Sass syntax against CSS and SCSS go here.

Sass simplifies minifying CSS files by offering a one-line command that will output a minified version.

It's very comfortable and easy to write/learn Sass, even for beginners.

Sass can be used with a framework called Compass, which provides additional functions and mixins which can reduce the amount of code you have to write.
For example, Compass will take care of vendor prefixes.

This:

div {
    background-image: -webkit-linear-gradient(#F00, #000);
    background-image: -moz-linear-gradient(#F00, #000);
    background-image: -o-linear-gradient(#F00, #000);
    background-image: linear-gradient(#F00, #000);
   }

Can be written as:

.gradient {
    @include background-image(linear-gradient(#F00, #000));
}

For a full list of features, check out the Compass documentation.

Rather than being limited to editing the outputted CSS file in devtools, with source maps you are able to manipulate the original .scss file.

There is also a C/C++ port of the Sass CSS precompiler called Libsass that decouples Sass from Ruby. It is very fast, portable and easy to build and integrate with a variety of platforms and languages.

The latest implementation of Sass is written in Dart, and compiles to pure JS with no native code or external dependencies, means you no longer need Ruby or libSass.

Since it's written in Ruby, it's easier and faster to use with Ruby apps.

Photoshop is used by professionals everywhere in a wide variety of fields including photography, graphic design and digital art. It is the de facto standard for image manipulation. If you've seen a magazine ad featuring a model, you've probably seen the effects of Photoshop. You won't be alone when using Photoshop.

A wide variety of plugins that add new effects, improve existing functionality and simplify workflow are available.

There's a huge number of both free and paid tutorials available online. Websites like Lynda.com offer premium high-quality, in-depth tutorials, but there are plenty of free alternatives to be found on YouTube, blogs and specialized sites on the Internet.

A stripped down version of Photoshop, called Photoshop Elements can be bought as a standalone application for $100.

Photoshop includes content-aware tools such as content-aware fill that can fill in a select area based on what surrounds it.

Photoshop is the most fully featured image editing software available today allowing you to perform highly advanced image manipulation.

It has tools for RAW image adjustments, lens correction, retouching, image stitching, HDR, fixing framing. It supports most professional color modes and file formats. It includes extensive lists of filters, styles, effects, fonts as well as tools for painting, sketching and typography work. It understands both raster and vector graphics. It even includes tools for video editing, working with 3D objects and support for 3D printing.

You can save all projects directly to the Creative Cloud allowing you to access them from any device and with any relevant Adobe software.

Lightroom is another image editing software from Adobe that's specifically designed for photo editing and managing of large quantities of digital images.

There's a free mobile app available for iOS, Android & Windows Phone.