More Related Content
What's hot
What's hot (9)
Viewers also liked
Viewers also liked (20)
Similar to JavaScripters Event on Sep 10, 2016 · 10:30 AM: Sass
Similar to JavaScripters Event on Sep 10, 2016 · 10:30 AM: Sass (20)
Recently uploaded
Recently uploaded (20)
JavaScripters Event on Sep 10, 2016 · 10:30 AM: Sass
- 1. JS JavaScripters www.javascripters.org Sass for Beginners - Karan Sharma
- 2. JS JavaScripters www.javascripters.org JavaScripters Community to Connect, Share & Explore http://www.javascripters.org Email: pune.javascripters@gmail.com
- 3. JS JavaScripters www.javascripters.org 3 About JavaScripters JavaScripters is an initiative taken for front-end engineers community to share and gain JavaScript basic and advance knowledge along with moto to connect all javascripters together. We conduct technical discussion forums, sessions, workshops, trainings and knowledge sharing meet-ups around the city, for all front-end / UI engineers on core & advance(object oriented) level javascript concepts, along with all latest javascript frameworks like AngularJS, NodeJs, emberJs, TypeScript, ReactJs technologies by experts. • Since : April 2015 • Members : Around 2500+ • Speakers & Mentors : 17 • Events/ Meetup Conducted: 5 • Feature Planned Events : 10 events confirmed till December 2016 Our initiatives: WhatsApp Group (2) Meetup Groups JavaScriptes PuneJs HTML5-Web-Mobile-Development-Meetup Pune-UX-UI-Engineers WebF
- 4. JS JavaScripters www.javascripters.org List of upcoming events 4 1.JS Performance tips and tricks 2.JavaScript Design Patterns 3.BootStrap , CSS and Responsive Design 4.Introduction of Design thinking for front-end Engineers 5.React JS with Material design 6.Introduction to Angular 2.x 7.Practice with TypeSpcript 8.Introduction to ES6 9.Automated javascript workflow with Gulp 10.NodeJs practice session
- 7. JS JavaScripters www.javascripters.org • CSS can’t be updated that fast. • Still need more features. • Pre-processors to the rescue ! What is a preprocessor ?
- 10. JS JavaScripters www.javascripters.org $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; } Variables
- 12. JS JavaScripters www.javascripters.org nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } Nesting
- 13. JS JavaScripters www.javascripters.org •SMACSS (pronounced “smacks”) is more style guide than rigid framework. •There is no library within here for you to download or install. •SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. SMACSS
- 15. JS JavaScripters www.javascripters.org • Modular Code • Start With “_” • Used with “@import” • CSS @import and SASS @import is different Partials / Imports
- 16. JS JavaScripters www.javascripters.org // _reset.scss html, body, ul, ol { margin: 0; padding: 0; } // base.scss @import 'reset'; body { font: 100% Helvetica, sans-serif; background-color: #efefef; }
- 17. JS JavaScripters www.javascripters.org @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); } Mixins !
- 18. JS JavaScripters www.javascripters.org .message { border: 1px solid #ccc; padding: 10px; color: #333; } .success { @extend .message; border-color: green; } .error { @extend .message; border-color: red; } .warning { @extend .message; border-color: yellow; } Extend/Inheritance
- 19. JS JavaScripters www.javascripters.org .container { width: 100%; } article[role="main"] { float: left; width: 600px / 960px * 100%; } aside[role="complementary"] { float: right; width: 300px / 960px * 100%; } Operators
- 21. JS JavaScripters www.javascripters.org Registers for upcoming events 21 1.JS Performance tips and tricks 2.JavaScript Design Patterns 3.BootStrap , CSS and Responsive Design 4.Introduction of Design thinking for front-end Engineers 5.React JS with Material design 6.Introduction to Angular 2.x 7.Practice with TypeScript 8.Introduction to ES6 9.Automated javascript workflow with Gulp 10.NodeJs practice session
Editor's Notes
- Browsers don’t update fast enough. Developers want to use new features in production code. But don’t want to loose support.
- 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:
- Give a demo of how bootstrap and big websites uses variables
- How does nesting help with smacc Maintaining css specificity
- 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 not be generated into a CSS file. Sass partials are used with the @import directive.
- 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.
- 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.
- 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.