sass - css with superpower

Download SASS - CSS with Superpower

Post on 17-Feb-2017

140 views

Category:

Technology

0 download

Embed Size (px)

TRANSCRIPT

PowerPoint Presentation

CSS with SUPERPOWERS

Presented By: Kanchha Kaji Prajapati (creativekaji.com)

2

Kanchha Kaji Prajapati (creativekaji)

Facebook: www.facebook.com/creativekaji Twitter: www.twitter.com/creativekaji

Email: creativekaji@gmail.com Website: Creativekaji.com

3

OUTLINEWhat is SASS?Why use SAAS?FeaturesSetupPractical

4

CSS hopefully needs no introduction

5

Who has heard of SASS?

6

Who has used SASS?

7

INTRO to SASS

8

WHAT IS SASS?Syntactically Awesome Stylesheets - Developed in 2007 by Hampton CatlinPreprocessor for CSSEvery valid CSS stylesheet is valid SCSSCommonly used in Ruby on Rails applications but can be used in any web project.

9

WHY USE SASS?Allow writing clean CSS in a programming construct instead of static rulesReduce repetition with CSSCreate more manageable, reusable, compact stylesheetsFaster development timeProgrammatic CSS features

10

SASS & SCSS$text-color: #444$text-size: 15px$link-color: #111

#selectorcolor: $text-colorfont-size: $text-colora color: $link-color2 FORMATTING CONVENTIONS$text-color: #444;$text-size: 15px;$link-color: #111;

#selector {color: $text-color;font-size: $text-color;a { color: $link-color; }}SASS SCSS

11

SASS has 5 primary featuresVariablesNestingMixinPartialsExtent/Inheritance

12

You can test out SASS during this presentation!

http://www.sassmeister.com/http://www.codepen.io

13

1. Variables$primary-color: #333;

body { font: 100% $font-stack; color: $primary-color;}

14

2. Nestingnav { ul { margin: 0; padding: 0; list-style: none; }

li { display: inline-block; }

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

15

3. Mixin@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius;}.box { @include border-radius(10px); }

16

4. Partial// _reset.scss

html,body,ul,ol { margin: 0; padding: 0;}

// base.scss

@import 'reset';

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

17

5. Extend/Inheritance.message { border: 1px solid #ccc; padding: 10px; color: #333;}

.success { @extend .message; border-color: green;}

18

More+, -, *, /, and %article[role="main"] { float: left; width: 600px / 960px * 100%;}

OPERATORES

19

MoreCOLOR FUNCTIONS$primary-color : #0000;h1{background-color:lighten($primary-color, 50%);}other color functionsdarken, saturate, rgba etc

For more:http://sass-lang.com/documentation/Sass/Script/Functions.html

20

MoreCOLOR FUNCTIONS$primary-color : #0000;h1{background-color:lighten($primary-color, 50%);}other color functionsdarken, saturate, rgba etc

For more:http://sass-lang.com/documentation/Sass/Script/Functions.html

21

INSTALLATION

23

Using Rubynrails

1) Download from http://railsinstaller.org/en

2) Install Sass--------------------------gem install sasssass version check : sass -v

3)Install compass--------------------------gem install compass

Create a test project------------------------

compass create sass-test

Compile Sass to CSS------------------------compass watch

Important Links--------------------------------------------------------1)http://thesassway.com/beginner/getting-started-with-sass-and-compass2)http://thesassway.com/beginner/how-to-structure-a-sass-project3)http://sass-lang.com/guide

THANK YOU ANY QUESTION?

27