Sass Course in Chandigarh

SASS (Syntactically Awesome Style Sheets) Training Course :

Webtech Learning provide you best training in Sass. Learn Sass and start improving your front-end CSS workflow. Try Sass on large-scale applications for efficient, time-saving styling. Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

Course Topics

• Preprocessing
• Variables
• Nesting
• Partials
• Import
• Mixins
• Inheritance
• Operators

Variables

Think of variables as a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you’ll want to reuse. Sass uses the $ symbol to make something a variable. Here’s an example:

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;
body {
  font: 100% $font-stack;
  color: $primary-color;
}

Nesting

When you write HTML you’ve probably noticed that it has a fairly clear nested, visual hierarchy. CSS, on the other hand, isn’t. Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Here’s an example of some typical styles for a site’s navigation:
 

Partials

You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is simply a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should be generated into a CSS file. Sass partials are used with the @import directive.
 

Import

CSS has an import option that lets you split your CSS into smaller, more maintainable portions. The only drawback is that each time you use @import in CSS it creates another HTTP request. Sass builds on top of the current CSS @import but instead of requiring an HTTP request, Sass will take the file that you want to import and combine it with the file you’re importing into so you can serve a single CSS file to the web browser.
 

Mixins

Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes. Here’s an example for border-radius.
 

Extend/Inheritance

This is one of the most useful features of Sass. Using @extend lets you share a set of CSS properties from one selector to another. It helps keep your Sass very DRY. In our example we’re going to create a simple series of messaging for errors, warnings and successes.

Operators

Doing math in your CSS is very helpful. Sass has a handful of standard math operators like +, -, *, /, and %. In our example we’re going to do some simple math to calculate widths for an aside & article.
 

Course Prerequisites