JavaScripters Event on Sep 10, 2016 · 10:30 AM: The absolute beginner’s guide to sass

JS

Java

Scri

pter

swww.javascripters.org

JS

Java

Scri

pter


JavaScriptersCommunity to Connect, Share & Explore

http://www.javascripters.org

Email: [email protected]

http://www.javascripters.org/

mailto:[email protected]

JS

Java

Scri

pter


JS

Java

Scri

pter


The Absolute Beginner’s Guide to Sass

TOPIC

~ BY IMRAN SHAIKH & KARAN SHARMA

https://www.meetup.com/JavaScripters/events/233180390/

JS

Java

Scri

pter


JS

Java

Scri

pter


3

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

JS

Java

Scri

pter


JS

Java

Scri

pter


List of upcoming events

4

1. Scalable JavaScript Design Patterns 2. Visualise your application data with d3.js and

angular3. Developing javascript code for efficiency4. Introduction of Design thinking for front-end

Engineers5. React JS with Material design6. Introduction to Angular 2.x7. Practice with TypeSpcript8. Introduction to ES69. Automated javascript workflow with Gulp10.NodeJs practice session11. Total (3) online webinar under planning

JS

Java

Scri

pter


JS

Java

Scri

pter


Our Sponsor

JS

Java

Scri

pter


JS

Java

Scri

pter


Imran Shaikh will cover (CSS Specificity Rules)Speaker Introduction : Imran Shaikh working as Principal UI Engineer in VUClip, with 11 and half years of Web development experience and certified usability analyst from Human factor international Inc, USA.

For more details visit: http://www.shaikh-imran.comLinkedIn : https://in.linkedin.com/in/shaikhimran786Email : [email protected]

Karan Sharma will cover (Sass/ Scss)Speaker Introduction : Karan Sharma is passionate Web developer and student, love to do research in web development currently working with Signzy, he recently been involved as Firefox student ambassador. Contributor to jQuery foundation projects. Also modifies bootstrap code and an active open source contributor. Check him out on github.

LinkedIn : https://in.linkedin.com/in/karan1276Email: [email protected]

About Speaker

http://www.shaikh-imran.com/

https://in.linkedin.com/in/shaikhimran786

https://in.linkedin.com/in/karan1276

JS

Java

Scri

pter


JS

Java

Scri

pter


What is Specificity?

“If two selectors apply to the same element, the one with higher specificity wins.”

Specificity hierarchyEvery selector has its place in the specificity hierarchy. There are four distinct categories which define the specificity level of a given selector:

1. Inline styles (Presence of style in document).An inline style lives within your XHTML document. It is attached directly to the element to be styled.

E.g. <h1 style="color: #fff;">

2. IDs (# of ID selectors)ID is an identifier for your page elements,

such as #div.

3. Classes, attributes and pseudo-classes (# of class selectors).

This group includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc.

4. Elements and pseudo-elements (# of Element (type) selectors).Including for instance :before and :after.

CSS Specificity

JS

Java

Scri

pter


JS

Java

Scri

pter


CSS Specificity Rules

JS

Java

Scri

pter


JS

Java

Scri

pter


CSS Specificity Rules Example 1

JS

Java

Scri

pter


JS

Java

Scri

pter



JS

Java

Scri

pter


JS

Java

Scri

pter



JS

Java

Scri

pter


JS

Java

Scri

pter



JS

Java

Scri

pter


JS

Java

Scri

pter



JS

Java

Scri

pter


JS

Java

Scri

pter


• The universal selector (*) has no specificity value (0,0,0,0)

• Pseudo-elements (e.g. :first-line) get 0,0,0,1 unlike their psuedo-class brethren which get 0,0,1,0

• The pseudo-class :not() adds no specificity by itself, only what's inside it's parentheses.

• The !important value appended a CSS property value is an automatic win. It overrides even inline styles from the markup. The only way an !important value can be overridden is with another !important rule declared later in the CSS and with equal or great specificity value otherwise. You could think of it as adding 1,0,0,0,0 to the specificity value.

Points to Remember

JS

Java

Scri

pter


JS

Java

Scri

pter


● CSS specificity calculator https://specificity.keegan.st/

● Smashing Magazine has a pretty comprehensive article (http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/) on CSS Specificity

● W3 spec on specificity in CSS3● IE Quirks (try viewing this page in Fx and then IE)

● Fuzzy Specificity Hack (http://fu2k.org/alex/css/hacks/fuzzyspecificity): IE (even beta 8!) and older Opera browsers have a bug honoring the correct

Resources

https://specificity.keegan.st/

http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/



http://www.w3.org/TR/css3-selectors/#specificity

http://www.brunildo.org/test/IEASpec.html#a

http://fu2k.org/alex/css/hacks/fuzzyspecificity

JS

Java

Scri

pter


JS

Java

Scri

pter


Register for upcoming events

16

1. Scalable JavaScript Design Patterns 2. Visualise your application data with d3.js and

angular3. Developing javascript code for efficiency4. Introduction of Design thinking for front-end

Engineers5. React JS with Material design6. Introduction to Angular 2.x7. Practice with TypeSpcript8. Introduction to ES69. Automated javascript workflow with Gulp10.NodeJs practice session11. Total (3) online webinar under planning

Software

JavaScripters Event on Sep 10, 2016 · 10:30 AM: The absolute beginner’s guide to sass