CSS with SUPERPOWERS

Presented By: Kanchha Kaji Prajapati (creativekaji.com)

Kanchha Kaji Prajapati (creativekaji)

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

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

OUTLINE

2. What is SASS?3. Why use SAAS?4. Features5. Setup6. Practical

CSS hopefully needs no introduction

Who has heard of SASS?

Who has used SASS?

INTRO to SASS

WHAT IS SASS?

• Syntactically Awesome Stylesheets – • - Developed in 2007 by Hampton Catlin

• Preprocessor for CSS• Every valid CSS stylesheet is valid SCSS• Commonly used in Ruby on Rails applications but can be

used in any web project.

WHY USE SASS?

• Allow writing clean CSS in a programming construct instead of static rules

• Reduce repetition with CSS• Create more manageable, reusable, compact

stylesheets• Faster development time• Programmatic CSS features

SASS & SCSS

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

#selectorcolor: $text-colorfont-size: $text-colora color: $link-color

2 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

SASS has 5 primary features

1. Variables

2. Nesting

3. Mixin

4. Partials

5. Extent/Inheritance

You can test out SASS during this presentation!

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

1. Variables

$primary-color: #333;

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

2. Nesting

nav { ul { margin: 0; padding: 0; list-style: none; }

li { display: inline-block; }

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

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); }

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;

}

5. Extend/Inheritance

.message {

border: 1px solid #ccc;

padding: 10px;

color: #333;

}

.success {

@extend .message;

border-color: green;

}

More…

+, -, *, /, and %

article[role="main"] {

float: left;

width: 600px / 960px * 100%;

}

OPERATORES

More…

COLOR FUNCTIONS

$primary-color : #0000;

h1{

background-color:lighten($primary-color, 50%);

}

other color functions

darken, saturate, rgba etc

For more:

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

More…

COLOR FUNCTIONS

$primary-color : #0000;

h1{

background-color:lighten($primary-color, 50%);

}

other color functions

darken, saturate, rgba etc

For more:

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

INSTALLATION

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?