Download - SASS - CSS with Superpower
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: [email protected] 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?