This document summarizes a technical session on Syntactically Awesome Stylesheets (Sass). The session objectives are to introduce Sass and its advantages over regular CSS, demonstrate its features like variables, nesting, mixins and extends, and how to use Sass with Compass. The document provides examples of Sass code and the corresponding CSS output for these features. It also explains how to install Sass via command line or applications and set up a Compass project.
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
Â
Syntactically awesome stylesheets (Sass)
1. Welcome to the technical session
on
Syntactically Awesome Stylesheets
2. How to write
Maintainable CSS
by using
Presented by -
Tahmina Khatoon
Software Engineer
3. Objectives
⢠Introduction to Sass
â Why adding Sass in our workflow
â Advantages of Sass
⢠The power of Sass
â How to convert our CSS into Sass
⢠Compass
â What is Compass
â How to use sass with compass
⢠Example
â Example of Sass Project
9/1/2014 3
4. Measuring simplicity of CSS
⢠Slight variations of colors, fonts, numbers, &
other properties arise
⢠Effective curbing of repetition can decline
⢠Stylesheet size may become unmanageable
9/1/2014 4
5. CSS Preposassor
⢠CSS preprocessors take code written in the
preprocessed language and then convert that
code into CSS.
⢠3 of the more popular CSS preprocessors are
Sass, LESS and Stylus
9/1/2014 Technical session on Sass 5
6. Sass
⢠Syntactically Awesome Stylesheets
⢠Looks like CSS, but adds features to combat shortcomings
⢠Preprocessor, like CoffeeScript & Haml
9/1/2014 Technical session on Sass 6
7. History of Sass
⢠Initially designed by Hampton Catlin,
also the creator of Haml and developed
by Nathan Weizenbaum
⢠After its initial versions, Weizenbaum
and Chris Eppstein have continued to
extend Sass with SassScript
Hampton Catlin
9/1/2014 Technical session on Sass 7
8. File Extension
.sass
⢠Older original file type
⢠Allows to write css without
any curly-brackets or semi-colons
⢠Selectors and properties are
distinguished by indentation
.scss
⢠More similar to regular css
⢠it adds in all the sass
helpers like indentation,
variables and more
⢠Any regular .css file is a valid
.scss file
9/1/2014 Technical session on Sass 8
11. Sass features
⢠Variable
⢠Importing
⢠Nesting Selectors
⢠Mixin
⢠Extend
⢠Directive
⢠Math + Color
⢠and more ...
9/1/2014 Technical session on Sass 11
12. Ways to start using Sass ...
⢠Command lines
⢠Applications
9/1/2014 Technical session on Sass 12
13. Ways to start using Sass ...
Pre-installation
⢠Linux
â Need to install Ruby
⢠Windows
â Need to install Ruby
⢠Mac
â Ruby is pre-installed
Install Sass
Open your Terminal or Command Prompt.
Command lines
gem install sass
Check sass version
sass -v
9/1/2014 Technical session on Sass 13
14. Ways to start using Sass ...
⢠Applications
â CodeKit (Paid)
â Compass.app (Paid, Open Source)
â Hammer (Paid)
â Koala (Open Source)
â LiveReload (Paid, Open Source)
â Mixture (Paid)
â Prepros (Paid, Open Source)
â Scout (Open Source)
9/1/2014 Technical session on Sass 14
15. Compile & Watch
Compile any sass file
sass input.sass output.css
Watch any sass file
sass â-watch input.sass:output.css
Watch any folder
sass â-watch sass:stylesheet
For help
sass -âhelp
9/1/2014 Technical session on Sass 15
16. Commenting
application.scss
// This comment will not be output
// to the compiled css file
/* This comment will display */
application.css
/* This comment will display */
9/1/2014 Technical session on Sass 16
17. Importing
⢠@import from a CSS file should almost
never be used, as it can prevent
stylesheets from being downloaded
concurrently.
⢠@import with .scss or .sass happens
during compile rather than client-side
⢠File extension is not required.
application.css
/**
* Import style
* âform.cssâ has found,
* when application.css
* has requested by browser
*/
@import âform.cssâ;
9/1/2014 Technical session on Sass 17
18. Importing ...
application.scss
/**
* Import style âformâ has found,
* when application.css is processed by compiler
*/
@import âformâ;
application.scss
form.scss
application.css
9/1/2014 Technical session on Sass 18
19. Importing ...
application.scss
/**
* Import style âformâ has found,
* when application.css is processed by compiler
*/
@import âformâ;
application.scss
form.scss
application.css
form.css
9/1/2014 Technical session on Sass 19
20. Partials
application.scss
/**
* Import style âformâ has found,
* when application.css is processed by compiler
*/
@import âformâ;
application.scss
_form.scss
application.css
9/1/2014 Technical session on Sass 20
21. Nesting
⢠CSS does support logical nesting, but the code blocks
themselves are not nested.
⢠Sass allows the nested code to be inserted within each other
nesting.scss nesting.scss
.content{
border: 1px solid #ccc;
padding: 20px;
}
.content h2{
color: #FF0000;
}
.content p{
font-size: 12px;
}
.content{
border: 1px solid #ccc;
padding: 20px;
h2{
color: #FF0000;
}
p{
font-size: 12px;
}
}
9/1/2014 Technical session on Sass 21
22. Nesting features
⢠Property nesting
⢠Parent selector
⢠Before reference selector
9/1/2014 Technical session on Sass 22
23. Variables
⢠Native CSS variable support is still in its infancy,
but Sass affords us a way to set reusable values
⢠Variable names begin with $, like $base
variables.scss
$base: #777777;
.sidebar {
border: 1px solid $base;
p {
color: $base;
}
}
variables.css
.sidebar {
border: 1px solid #777777;
}
.sidebar p {
color: #777777;
}
9/1/2014 Technical session on Sass 23
24. Variables ...
⢠Default Flag
â Variable definitions can optionally take the
!default flag
default.scss
$blue: blue;
$blue: red;
.content-navigation {
border-color: $blue;
color:
darken($blue, 20%);
}
/**
* Result red color
*/
default.css
$blue: blue;
$blue: red !default;
.content-navigation {
border-color: $blue;
color:
darken($blue, 20%);
}
/**
* Result bluecolor
*/
9/1/2014 Technical session on Sass 24
25. Variables ...
⢠Types of variables
â Booleans
â Numbers - can be set with or without units:
â Colors
â Strings - can be set with or without quotes:
â Lists
â Null
9/1/2014 Technical session on Sass 25
26. Variables ...
⢠Scope of variables
â Variables set inside a declaration (within { }) aren't usable outside that
block
â Setting new values to variables set outside a declaration changes
future instances
scope.scss
$color-base: #777777;
.sidebar {
$color-base: #222222;
background: $color-base;
}
p {
color: $color-base;
}
scope.css
.sidebar {
background: #222222;
}
p {
color: #222222;
}
9/1/2014 Technical session on Sass 26
27. Variables ...
⢠Interpolation
â Use the Ruby-esque #{$variable} to shim variables into selectors,
property names, and strings
interpolation.scss
/* Interpolation */
$side: top;
sup {
position: relative;
#{$side}: -0.5em;
}
.callout-#{$side} {
background: #777;
}
interpolation.css
/* Interpolation */
sup {
position: relative;
top: -0.5em;
}
.callout-top {
background: #777;
}
9/1/2014 Technical session on Sass 27
28. Mixins
⢠CSS does not support mixins. Any repeated code must be
repeated in each location.
⢠A mixin is a section of code that contains any valid Sass code.
⢠Whenever a mixin is called, the result of translating the mixin
is inserted at the calling location.
⢠Mixins allow for efficient and clean code repetitions, as well
as easy alteration of code
Before mixin (at CSS) After mixin (at Sass)
9/1/2014 Technical session on Sass 28
34. Placeholder
⢠Placeholder selectors are denoted with a %
⢠Can be extended, but never become a selector
of their own
9/1/2014 Technical session on Sass 34
36. Functions
⢠SassScript defines some useful functions that are
called using the normal CSS function syntax
function.scss
$base-color: #000000;
body{
background: lighten($base-color,
20%);
}
function.css
body {
background: #333333;
}
9/1/2014 Technical session on Sass 36
37. Functions ...
⢠Several predefined functions
â RGB Functions
â Opacity Functions
â String Functions
â Number Functions
â List Functions
â Map Functions
â Introspection Functions
See http://sass-lang.com/documentation/Sass/Script/Functions.html
for a full listing of Sass functions and their argument names
9/1/2014 Technical session on Sass 37
40. Compass
⢠Open-source CSS Authoring Framework
⢠Adds reusable patterns, utilities, and modules
like vertical rhythm and spriting
⢠Created by Chris Eppstein as charityware
⢠Other core team members: Scott Davis, Eric
Meyer, Brandon Mathis, and Anthony Short
9/1/2014 Technical session on Sass 40
41. Advantages of using compass
⢠Experience cleaner markup without
presentational classes.
⢠Itâs chock full of the webâs best reusable
patterns.
⢠Compass mixins make CSS3 easy.
⢠Create beautiful typographic rhythms.
9/1/2014 Technical session on Sass 41
42. Compass installation
Install compass
gem install compass
For help
compass -âhelp
9/1/2014 Technical session on Sass 42
43. Project setup with compass
Initialize compass project
compass init
Watch any folder
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascriptsâ
# You can select your preferred output style here (can be overridden via the command
line):
# output_style = :expanded or :nested or :compact or :compressed
Watch any folder
compass watch
9/1/2014 Technical session on Sass 43
44. Compass Utilities
⢠Links â Tools for styling anchor links.
⢠Lists â Tools for styling lists.
⢠Text â Style helpers for your text.
⢠Color â Utilities for working with colors.
⢠General â Generally useful utilities that don't fit elsewhere.
⢠Sprites â Sprite mixins.
⢠Tables â Style helpers for your tables.
9/1/2014 Technical session on Sass 44