SASS PREPROCESSOR

ABOUT CSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.
CSS is the language used to make the web beautiful.

CSS DRWABACKS

Using CSS only might work for you but when making big websites with multiple pages, there might be some features you wish CSS has. Take a look at the following disadvantages of using CSS alone.

• No way to re-use common style rules.
• No way to specify variables that can be defined and re-used all through the style sheet.
• You can’t execute computations where you can add numerical values to elements.

WHAT ARE CSS PREPROCESSORS

As mentioned earlier, CSS is the language used to make the web beautiful.Preprocessors can be used to help make CSS more beautiful.
CSS preprocessors extend the basic functionalities, overcoming many limitations of traditional CSS by adding features such as variables, nesting selectors and mixins, creating CSS that is more maintainable and efficient.
CSS written in a preprocessed language must also be converted or compiled into traditional CSS syntax. There are many apps that can be used to do this and will be discussed further in this article.

ADVANTAGES OF USING PRE PROCESSING METHODS

While using CSS alone might give you nuisance, using pre-processing methods can save you a lot of time and effort. Check out the list of advantages of using pre-processing methods below.

• Allows you to use variables that can be re-used all throughout the style sheet.
• Higher level style syntax that provides advanced CSS features.
• Compiled CSS files are uploaded to the production web server

TYPES OF CSS PREPROCESSORS

CLAY

SASS

DtCSS

CSS PREPROCESSOR 

LESS

SWITCH CSS

STYLUS

REWORK

CSS-CRUSH

MYTH

Three popular preprocessors are:

SASS

LESS

STYLUS

*****SASS VS LESS , WHICH ONE SHOULD WE PREPFER

SASS DIFFERNET TO CSS

Sass looks similar to CSS but has its obvious differences once you dive in. There are two ways of writing Sass and it’s ultimately up to you which style you prefer. I use the indented and bracketed style (.scss) in my projects because I like to really visualize where a block ends and begins when a lot of code becomes nested. Once processed the Sass code compiles to traditional CSS automatically using a preprocessing engine.
There are many apps available which allow precompiling your Sass to be seamless and downright easy. To install, you can use the command line as long as you have Ruby installed on your machine. If you’re not comfortable with the command line there are other options (more on this below) and if this is over your head visit Sass-lang.com to learn how to do this in an easy step-by-step format. In the end, using any method be it command line or app, the Sass installation will watch your changes and automatically compile down to traditional CSS for you.
I highly recommend using apps such as Codekit, LiveReload, or Mixture which help you set up a Sass project on a Mac from scratch or if you’re a Windows user I recommend PrePros. Codekit, my choice of preprocessor, helps me by preprocessing my Sass as well as validating and minifying your code to allow your website to run quickly and effectively. (The ability to create Compass or Bourbon based projects within Codekit is also an awesome feature but is beyond the scope of this article.) After you get more comfortable with Sass be sure to check out how to use Compass and Bourbon in your Sass projects.

SCSS

SASS

SASS (Syntactically Awesome Stylesheet) is a CSS pre-processor which helps to reduce repetition with CSS and saves time. It is more stable and powerful CSS extension language that describes style of document structurally.

Sass stands for “Syntactically Awesome Style Sheets”. Sass allows us to streamline our CSS coding by giving us an arsenal of methods at our disposal. In some ways, it’s a step into the world of “object oriented” CSS – we can now extend classes previously defined. We can also nest styles, create functions, set variables, do math, and a host of other goodness. It all sounds amazing, doesn’t it? That’s because…it is.
So what’s all the hype about anyway? Why learn a new language/syntax, when we already know CSS? Why should we have to run a bunch of stuff to make Sass work in the first place, and have to readjust our workflow? These are all common questions we come across before taking the plunge. The truth is though, with a tiny little bit of guidance and effort, you could set yourself up to work fast, boot up projects quickly, and code CSS like a beast. Once you get your workflow in check, and couple that with the fact that Sass already speeds things up for you considerably, you’ll be moving lightning quick and won’t be turning back. Let’s dig deeper.

Sass stands for Syntactically Awesome Stylesheets and was created by Hampton Catlin. Sass introduces new concepts like variables, mixins, and nesting into the CSS code you already know and love. These concepts ultimately make your CSS awesome, easier to write and more dynamic. All of these features combined, speed up any designer’s or developer’s workflow.
What commonly confuses people is the alternative ways to write Sass. You will see other tutorials or explanations of Sass using the .SCSS or the .Sass extension for their Sass files. This is apparent because there are two ways of writing the code which produce the same output. The most common I’ve seen, and the method I currently use is the bracketed version known as .SCSS. Another method is the .Sass extension which relies more heavily on indentation rather than punctual elements and is white space dependent. With this syntax there’s no need for semi-colons or brackets as you see in CSS and the .SCSS syntax.

SASS stands for Syntactically Awesome Style Sheets and was  designed and created by Hampton Catlin. SASS manipulates CSS using variables, mixins, inheritance and nesting rules. Given the extensions .sass and .scss respectively, it’s translated to well-formatted CSS using a command line tool or web-framework plugin.
SASS makes it easier to write less CSS codes and manipulate them dynamically. It’s a great way to write more functional CSS codes and can speed up the workflow of every web developer and designer.

SASS VS SCSS

When Sass first came out, the main syntax was noticably different from CSS. It used indentation instead of braces, didn’t require semi-colons and had shorthand operators. In short, it looked a lot like Haml.

Some folks didn’t take too kindly to the new syntax, and in version 3 Sass changed it’s main syntax to .scss. SCSS is a superset of CSS, and is basically written the exact same, but with all the fun new Sass features.

That said, you can still use the original syntax if you want to. I personally use .scss, and I will be using the .scss syntax in this article.

Before we get into any examples and learn exactly how Sass works, let’s clarify something that bugs a lot of people. Sass and SCSS are often tossed around interchangeably by people who already know about it. To a newcomer, it can be confusing. Hugo Giraudel wrote a full article on the difference between Sass and SCSS, but I’ll cover the basics here.

• Sass (Syntactically Awesome Style Sheets) refers to the preprocessor and syntax as a whole. It takes on its own syntax (the indented syntax), and compiles to readable CSS. We refer to the overall language as Sass.
• SCSS (Sassy CSS) falls under the Sass umbrella. It is a CSS syntax that’s been turbocharged with all the goodness of Sass. Valid CSS is also valid SCSS, so the transition is swift and painless, and you can learn as much as you want at any time to improve your skills.

When I talk about Sass, I mean the Sass umbrella. I actually code with SCSS, and so do many people. It’s the natural step into the world of Sass, because you can dump all your CSS into an SCSS file and compile it perfectly. So, how exactly does all of this work?

Sass, Syntactically Awesome Stylesheets, came first and is a strict indented syntax. SCSS, Sassy CSS, followed shortly after providing the same firing power of Sass but with a more flexible syntax, including the ability to write plain CSS.

Before we begin on how to use SASS, let’s compare .sass and .scss extensions of SASS. First I will provide a simple CSS code and then I will show you how to simplify them on both extensions of SASS.

CSS Code

For our CSS, I used a header tag and put a zero value for margin and padding then white color for its text color.

header {
     margin: 0;
     padding: 0;
     color: #fff;
}

.scss Extension Format (New Way of Writing SASS)

To format this into .scss extension format, we will use a variable $color and give it a hexadecimal color value of #fff for white color. And then under the CSS style, instead of putting a hexadecimal color value of #fff, use the variable $color that was set in the beginning of the code.

$color:  #fff;
header {
    margin: 0;
    padding:0;
    color: $color;
}

.sass Extension Format (Old Way of Writing SASS)

For our .sass extension, we will have the same variable and value just like the .scss extension format, but, this time, without semi-colons and brackets. Notice that indentions are more reliant. This is the old format in writing SASS.

$color: #fff
header
   margin: 0
   padding: 0
   color: $color

*******HOW TO IMPLEMENT SASS

CSS and Sass are compiled using Ruby therefore Ruby needs to be installed to produce CSS files. Please follow the directions from before to install, or ensure Ruby is installed.
Once Ruby is installed the gem install sass command needs to be run from the command line to install SCSS and Sass.

Sass needs to be installed on your machine. It’s a Ruby Gem, which means you need to have Ruby installed on your machine. Ok ok…install something to install something to write some modified CSS. I know it sounds strange and overkill, but bear with me. If you’re using a mac, Ruby is already installed. If not, you can get Ruby installers easily for windows and linux. You can get the full rundown about installing Sass here. After installing, you’re able to use Sass! If you’r comfortable using the command line, then you’re ready to get going. Now that Sass is installed, you can “watch” a Sass file, and output it to a CSS file on save. More info about all that here.
If you prefer a more visual approach with a GUI, fear not. There are many apps out there to get you started. I personally use the Compass.app, which is cheap and awesome. [Codekit}(https://incident57.com/codekit/_also has great reviews and is very affordable. There are free options too, so the choices are yours. Now that we’re fully covered on all bases, let’s look at some examples.

WHY TO USE SASS

• It is pre-processing language which provides indented syntax (its own syntax) for CSS.
• It provides some features which are used for creating stylesheets that allows writing code more efficiently and easy to maintain.
• It is super set of CSS which means it contains all the features of CSS and is an open source pre-processor, coded in Ruby.
• It provides document style in good structure format than flat CSS. It uses re-usable methods, logic statements and some of the built in functions such as color manipulation, mathematics and parameter lists.

SASS FEATURES

• It is more stable, powerful and compatible with versions of CSS.
• It is super set of CSS and is based on the JavaScript.
• It is known as syntactic sugar for CSS which means it makes easier way for user to read or express the things more clearly.
• It uses its own syntax and compiles to readable CSS.
• You can easily write CSS in less code within less time.
• It is an open source pre-processor which is interpreted into CSS.

SASS ADVNTAGES 

• It allows writing clean CSS in a programming construct.
• It helps in writing CSS quicker.
• It is superset of CSS which helps designers and developers work more efficiently and quickly.
• As Sass is compatible with all versions of CSS, we can use any available CSS libraries.
• It is possible to use nested syntax and useful functions such as color manipulation, mathematics and other values.

SASS DISADVANTAGES

• It takes time for developer to learn new features present in this pre-processor.
• If more number of people working on the same site, then will use the same preprocessor. Some people use the Sass and some people use the CSS to edit the files directly. So it will become difficult to work with site.
• There are chances of losing benefits of browser's built-in element inspector.

http://sass-lang.com/guide

http://www.tutorialspoint.com/sass/using_sass.htm

https://scotch.io/tutorials/getting-started-with-sass

https://www.codeschool.com/courses/assembling-sass

http://1stwebdesigner.com/learn-sass-tutorial/

http://learn.shayhowe.com/advanced-html-css/preprocessors/

http://www.sassmeister.com

http://www.webdesignerdepot.com/2013/11/the-beginners-guide-to-sass/

http://callmenick.com/post/an-introduction-to-sass-scss

http://blogs.adobe.com/dreamweaver/2015/02/getting-started-with-css-preprocessors-less-and-sass.html

https://www.youtube.com/watch?v=zPFsgxPb430