JavaScripters Event on Sep 10, 2016 · 10:30 AM: Sass

transcript

swww.javascripters.org

Sass for Beginners- Karan Sharma

JavaScriptersCommunity to Connect, Share & Explore

http://www.javascripters.org

Email: pune.javascripters@gmail.com

About JavaScriptersJavaScripters 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

List of upcoming events

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

11. Total (3) online webinar under planning

Our Sponsor

About Speaker

• CSS can’t be updated that fast.

• Still need more features.

• Pre-processors to the rescue !

What is a preprocessor ?

SASS v/s SCSS

$font-stack: Helvetica, sans-serif;

$primary-color: #333;

body {

font: 100% $font-stack; color: $primary-color;

Variables

margin: 0; padding: 0; list-style: none;

display: inline-block;

display: block; padding: 6px 12px; text-decoration: none;

Nesting

•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

• Modular Code

• Start With “_”

• Used with “@import”

• CSS @import and SASS @import is different

Partials / Imports

// _reset.scss

html, body, ul, ol {

margin: 0; padding: 0;

// base.scss

@import 'reset';

body {

font: 100% Helvetica, sans-serif; background-color: #efefef;

@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 !

.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

.container {

width: 100%;

article[role="main"] {

float: left;

width: 600px / 960px * 100%;

aside[role="complementary"] {

float: right; width: 300px / 960px * 100%;

Operators

Registers for upcoming events