SASS CSS PREPROCESOOR - INTRODUCTION

This will introduce you SASS way

Transcript

1. SASS INTRODUCTION Irfan Maulana | Front End Developer
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 can seamlessly use any available CSS libraries. FEATURE RICH Sass boasts more features and abilities than any other CSS extension language out there. The Sass Core Team has worked endlessly to not 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 developers. FRAMEWORKS There are endless number of frameworks built with Sass. Compass, Bourbon, and Susy just to name a few.
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 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
9. Lets Deep Dive The SASS Way http://sass-lang.com/guide
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:
12. Nesting – continues… Outpout:
13. Nesting – continues… We can add prefix of parent with & Here an example : Output :
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 :
17. Extends/Inheritance – continues Output :
18. Extends/Inheritance – continues We can use placeholder selector that will not produce class to be extended. Here an example : Output :
19. Operators Doing math in your CSS is very helpful. Sass has a handful of standard math operators like +, -, *, /, and %. Here an example :
20. Operators – continues Output :
21. Expressions – @if @else Example : Output :
22. Expressions – @for Example : Output :
23. Expressions – @each Example : Output :
24. Expressions – @while Example : Output :
25. See the code https://github.com/mazipan/awesome-bemcss
26. Contact Me • Facebook : /mazipanneh • Twitter : @mazipan • Linkedin : /in/irfanmaulanamazipan • Slideshare : /IrfanMaulana21 • Github : mazipan • Email : mazipanneh@gmail.com • Blog : mazipanneh , mazipan.github.io
27. Reference http://sass-lang.com/documentation/file.SASS_REFERENCE.html
28. THANK YOU