Bliblidotcom - SASS Introduction
- 2. About Me
• Name : Irfan Maulana
• Position : Software Development Engineer
• Role : Front End Developer
- 3. About CSS Pre-Processor
• Pre-processors extend CSS with variables, operators, interpolations, functions, mixins and many more other usable assets.
- 4. Why We Need CSS Pre-Processor
• CSS is primitive and incomplete.
• Building a function, reusing a definition or inheritance are hard to achieve.
• For bigger projects, or complex systems, maintenance is a very big problem.
- 5. Getting to know SASS
• Sass is one of CSS Pre-processor vendor, other popular vendor is LESS and Stylus.
• Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
source : http://sass-lang.com/
• Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that
make writing CSS fun again.
- 6. SASS Goodness
CSS COMPATIBLE
Sass is completely compatible with all versions of CSS. We take this compatibility seriously, so that you
CSS libraries.
FEATURE RICH
Sass boasts more features and abilities than any other CSS extension language out there. The Sass Core
only keep up, but stay ahead.
MATURE
Sass has been actively supported for over 9 years by its loving Core Team
INDUSTRY APPROVED
Over and over again, the industry is choosing Sass as the premier CSS extension language.
LARGE COMMUNITY
Sass is actively supported and developed by a consortium of several tech companies and hundreds of
FRAMEWORKS
There are endless number of frameworks built with Sass. Compass, Bourbon, and Susy just to name
- 7. SASS Instalation
WITH RUBY
Download Ruby : http://rubyinstaller.org/
type : gem install sass
http://sass-lang.com/install
Or
WITH NODEJS
Download nodejs https://nodejs.org/en/download/
type : npm install node-sass
or you can use built in plugin from build tool like grunt, gulp
- 8. SASS Syntax
SASS have two different syntax, called SASS and SCSS syntax.
SASS syntax is the original one that influence by HAML, SASS syntax is very different with native CSS in case of tab sensitive as
CSS in case of tab sensitive as their approach.
SCSS is the rescue for CSS Developer that want to migrate to SASS Way.
SCSS has very same syntax with native CSS, so we will use this syntax in our session here.
http://thesassway.com/editorial/sass-vs-scss-which-syntax-is-better
- 10. 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:
Output:
- 11. Nesting
Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Be aware that overly
nested rules will result in over-qualified CSS that could prove hard to maintain and is generally considered bad practice.
Here's an example:
- 14. Partial and Import
SASS support partial file that will merge to one file.
For partial file you can add _ (underscore) in front of file. Ex : _reset.scss
And for using that partial file you can use @import
Example :
@import “reset”;
- 15. 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 an example :
- 16. Extends/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.
Here an example :
- 19. Operators
Doing math in your CSS is very helpful.
Sass has a handful of standard math operators like +, -, *, /, and %.
Here an example :
- 26. Contact Me
• Facebook : /mazipanneh
• Twitter : @mazipan
• Linkedin : /in/irfanmaulanamazipan
• Slideshare : /IrfanMaulana21
• Github : mazipan
• Email : mazipanneh@gmail.com
• Blog : mazipanneh , mazipan.github.io