Scribd
Upload
37 views

CSS3 and Sass: Mark Volkmann Object Computing, Inc. Strange Loop 2011

This document discusses CSS and Sass. It covers topics like separating formatting from content, CSS selectors, properties, layouts, the CSS box model, and CSS3. CSS3 is defined by many modular specifications at various stages of the standardization process, and browser support for CSS3 features varies. Sass allows CSS stylesheets to use features like variables, nested rules, and mixins to help organize and maintain complex style sheets.

Uploaded by

edvanio2014
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
37 views

CSS3 and Sass: Mark Volkmann Object Computing, Inc. Strange Loop 2011

This document discusses CSS and Sass. It covers topics like separating formatting from content, CSS selectors, properties, layouts, the CSS box model, and CSS3. CSS3 is defined by many modular specifications at various stages of the standardization process, and browser support for CSS3 features varies. Sass allows CSS stylesheets to use features like variables, nested rules, and mixins to help organize and maintain complex style sheets.

Uploaded by

edvanio2014
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 51

CSS3 and Sass

Mark Volkmann
Object Computing, Inc.
mark@ociweb.com
Strange Loop 2011
CSS
Separates formatting from content
Can specify formatting for
all elements with a given name
all elements with a given class
the element with a given id
elements with certain relationships

Major topics to learn


selectors
properties
layout

W3C documents
CSS1 Recommendation (1996)
CSS2 Recommendation (1998)
CSS3 - defined by many documents at various stages of approval; many are Working Drafts

CSS3 and Sass 2


Three Ways To Specify
1) HTML element style attribute
ex. <div style="color: red; font-size: 18pt;">Some Text</div>
discouraged

2) style element
inside head element in HTML

ex. <style type="text/css"> ...rules... </style>

discouraged

3) link element
inside head element in HTML

references an external .css file containing rules


ex. <link rel="stylesheet" type="text/css" href="filename.css"/>

recommended

Evaluated in the order listed above


first property value found for each element wins; important when there are conflicts

CSS3 and Sass 3


Rules
Specify properties to be applied to selected elements
More than one rule can be applied to the same element
Format
selector-list { property-list }
selector-list is a comma-separated list of selectors

property-list is a list of name/value pairs


names and values are separated by a colon

pairs are separated by a semi-colon

while not required, convention is to include a semi-colon after last pair

Example
#elephant, .title {
color: purple;
font-size: 24pt;
}

Comments
/* comment-text */

CSS3 and Sass 4


Selectors ...
By element name
just the name - for example, div, p, td

By class name
matches elements that have specified value for their class attribute
for example, <div class="title"> applies to all div tags that have a class of “title”

class name preceded by a period in definition - for example, .title, .header


can also specify element name - for example, div.title

By id
matches the element that has specified value for its id attribute
values of id attributes must be
for example, <div id="education"> unique within the document
regardless of element name
id preceded by a pound sign - for example, #date, #tax
can also specify element name - for example, div#date

CSS3 and Sass 5


... Selectors
By context - descendants
separate with spaces - for example, div.fy2010 table.taxes td

By context - children
a > b selects elements named “b” that are direct children of an element named “a”

for example, div.fy2010 > table.taxes > td td not inside a thead, tfoot or tbody

There are more, but that’s enough for an overview

CSS3 and Sass 6


Box Model
Many properties are related to the box model of elements
Margin - space between border and neighboring elements
Border - can specify type, thickness and color
types: dashed, dotted, double, groove, inset, outset, ridge or solid
thickness is specified with a length, typically in pixels (px)

Padding - space between content and border


margin
padding

content border

CSS3 and Sass 7


demo.html ...
<html>
<head>
<title>CSS Demo</title>
<link rel="stylesheet" type="text/css" href="demo.css"/>
</head>
<body>
<div class="title">CSS Demo</div>
<div class="whippet" id="first">
<span class="name">Rudy</span>
<img src="rudy.jpg" alt="Rudy"
height="100"/>
</div>
<div class="whippet" id="second">
<span class="name">Dasher</span>
<img src="dasher.jpg" alt="Dasher"
height="100"/>
</div>

CSS3 and Sass 8


... demo.html
<p class="quote">
I wonder if I've been changed in the night? Let me think.
Was I the same when I got up this morning?
I almost think I can remember feeling a little different.
But if I'm not the same, the next question is 'Who in the world am I?'
Ah, that's the great puzzle!
</p>
<form method="post" action="">
<div>
<button>Red</button>
<button>Green</button>
<button>Blue</button>
</div>
</form>
</body>
</html>

CSS3 and Sass 9


demo.css ...
.quote {
width: 370px;
}
a pseudo-class
.quote:first-letter {
font-size: 24pt;
}

.title {
color: purple;
font-size: 24pt;
}

.whippet {
background-color: yellow;
color: blue;
}

.whippet span {
vertical-align: top;
}

CSS3 and Sass 10


... demo.css

#first {
font-style: italic;
}

#second img {
border: solid red 5px;
}
a pseudo-class
button:hover {
color: red;
}

CSS3 and Sass 11


CSS3
Defined by a long list of modularized W3C specifications
at various stages of specification
at various stages of browser implementation

Current browsers
don’t support some CSS3 features
treat others as experimental
IE support is very limited
Firefox, Chrome and Safari support is better

To check for browser support of a CSS property


http://caniuse.com
http://thebookofcss3.com/resources/
click links for each chapter to see tables of supported properties

CSS3 and Sass 12


CSS3 Experimental?
Rather than support new CSS property names (and some property values),
browsers support alternate names that begin with
-ms- for IE
-moz- for Firefox
-o- for Opera
-webkit- for Safari, iPhone, iOS, Chrome, Android

When features are no longer considered experimental,


unprefixed names will be supported
Example
for now instead of box-shadow,
use -webkit-box-shadow or -moz-box-shadow

CSS3 and Sass 13


CSS3 Documents Past WD
Recommendations from http://www.w3.org/standards/techs/css on 9/4/11

A MathML for CSS Profile - 07 June 2011

CSS Color Level 3 - 07 June 2011

Proposed Recommendations
CSS Namespaces - 11 August 2011

Selectors Level 3 - 15 December 2009

Candidate Recommendations
CSS Multi-column Layout - 12 April 2011

CSS Backgrounds and Borders Level 3 - 15 February 2011

CSS Style Attributes - 12 October 2010

Media Queries - 27 July 2010

Selectors API Level 1 - 22 December 2009

CSS Mobile Profile 2.0 - 10 December 2008

CSS Marquee Level 3 - 5 December 2008

CSS3 Basic User Interface - 11 May 2004

CSS TV Profile 1.0 - 14 May 2003

CSS3 and Sass 14


CSS3 Working Drafts
CSS Speech - 18 August 2011 CSS 2D Transforms Level 3 - 01 December 2009

CSS Print Profile - 13 October 2006 CSS Transitions Level 3 - 01 December 2009

CSS3 Paged Media - 10 October 2006 CSS 3D Transforms Level 3 - 20 March 2009

CSS Text Level 3 - 1 September 2011 CSS Animations Level 3 - 20 March 2009

CSS Writing Modes Level 3 - 1 September 2011 Behavioral Extensions to CSS - 19 October 2007

CSS Conditional Rules Level 3 - 1 September 2011 CSS Grid Positioning Level 3 - 5 September 2007

CSSOM View - 4 August 2011 CSS Basic Box Model - 9 August 2007

CSS Image Values and Replaced Content Level 3 - 12 July 2011 CSS3 Values and Units - 19 September 2006

CSSOM (CSS Object Model) - 12 July 2011 CSS3 Cascading and Inheritance - 15 December 2005

CSS3 Ruby - 30 June 2011 CSS3 Hyperlink Presentation - 24 February 2004

CSS Regions - 09 June 2011 The CSS 'Reader' Media Type - 24 February 2004

CSS Lists and Counters Level 3 - 24 May 2011 CSS3 Presentation Levels - 13 August 2003

CSS Fonts Level 3 - 24 March 2011 CSS3 Syntax - 13 August 2003

Flexible Box Layout - 22 March 2011 CSS3 Generated and Replaced Content - 14 May 2003

CSS Generated Content for Paged Media - 08 June 2010 CSS3 Border - 7 November 2002

CSS Template Layout - 29 April 2010 CSS3 Line - 15 May 2002

Selectors API Level 2 - 19 January 2010

CSS3 and Sass 15


Media Queries
W3C Candidate Recommendation 27 July 2010
http://www.w3.org/TR/css3-mediaqueries/
“media-dependent style sheets tailored for different media types ...
extend the functionality of media types by allowing more precise labeling of style sheets”
“A media query consists of a media type and zero or more expressions
that check for the conditions of particular media features.”

CSS3 and Sass 16


Fonts Level 3
W3C Working Draft 24 March 2011
http://www.w3.org/TR/2011/WD-css3-fonts-20110324/
“describes how font properties are specified and how font resources are loaded dynamically”

CSS3 and Sass 17


Text Level 3
W3C Working Draft 01 September 2011
http://www.w3.org/TR/css3-color/
“defines properties for text manipulation and specifies their processing model ... covers line breaking,
justification and alignment, white space handling, text decoration and text transformation.”

Adds many new properties


but most aren’t well supported yet
only text-shadow and a WebKit variant of text-stroke are covered

CSS3 and Sass 18


Multi-column Layout
W3C Candidate Recommendation 12 April 2011
http://www.w3.org/TR/css3-multicol-20110412/
“content can be flowed into multiple columns with a gap and a rule between them”

CSS3 and Sass 19


Backgrounds and Borders
W3C Candidate Recommendation 15 February 2011
http://www.w3.org/TR/css3-background/
“includes and extends the functionality of CSS level 2 ...
The main extensions are borders consisting of images, boxes with multiple backgrounds,
boxes with rounded corners and boxes with shadows.”

CSS3 and Sass 20


Image Values and Replaced Content Level 3

W3C Working Draft 12 July 2011


http://www.w3.org/TR/2011/WD-css3-images-20110712/
“two parts ...
defines the syntax for image values in CSS ...
defines properties used to control the interaction of replaced content and the CSS layout algorithms”
gradients are a subset of the first part

red yellow

CSS3 and Sass 21


Flexible Box Layout ...
W3C Working Draft 22 March 2011
http://www.w3.org/TR/2011/WD-css3-flexbox-20110322/
“In this new box model, the children of a box are laid out either horizontally or vertically,
and unused space can be assigned to a particular child or distributed among the children
by assignment of "flex" to the children that should expand.
Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal)
can be used to build layouts in two dimensions.
This model is based on the box model in the XUL user-interface language
used for the user interface of many Mozilla-based applications (such as Firefox).”

Also referred to as “Flex Box”


Greatly simplifies layout
over using properties like float and position

CSS3 and Sass 22


... Flexible Box Layout

CSS3 and Sass 23


Transitions Level 3
W3C Working Draft 01 December 2009
http://www.w3.org/TR/2009/WD-css3-transitions-20091201/

“allows property changes in CSS values to occur smoothly over a specified duration”
rather than immediately and all at once

Can transition any “animatable CSS property”

CSS3 and Sass 24


2D Transforms
W3C Working Draft 01 December 2009
http://www.w3.org/TR/2009/WD-css3-2d-transforms-20091201/

“allows elements rendered by CSS to be transformed in two-dimensional space”

CSS3 and Sass 25


3D Transforms
W3C Working Draft 20 March 2009
http://www.w3.org/TR/2009/WD-css3-3d-transforms-20090320/

“extends CSS Transforms to allow elements rendered by CSS to be transformed in three-dimensional space”

CSS3 and Sass 26


Sass
Stands for “Syntactically Awesome StyleSheets”
Converts an alternate CSS syntax to the W3C CSS syntax
two alternate syntaxes
a Ruby application, but understanding Ruby isn’t required

Main features
variables - avoids repeating property values; supports math
nesting - avoids repeating selectors
mixins - reuses lines of CSS; optionally parameterized
selector inheritance - a selector can inherit styles from another

Created by
Hampton Catlin, Nathan Weizenbaum, Chris Eppstein and others

http://sass-lang.com

CSS3 and Sass 27


Installing Sass
Install Ruby if not already installed
can check with “ruby -v”

see http://www.ruby-lang.org/en/downloads/
need version 1.8.7 or above

Run “gem install sass”


example output
Successfully installed sass-3.1.3
1 gem installed
Installing ri documentation for sass-3.1.5...
Installing RDoc documentation for sass-3.1.5...

Alternative ... from Git


git clone git://github.com/nex3/sass.git
cd sass
rake install

CSS3 and Sass 28


Running Sass
Get version
sass -v -> Sass 3.1.5 (Brainy Betty)

Output to stdout
sass {name}.scss by default, creates a
.sass-cache directory
useful for testing that stores compiled templates
to speed up subsequent runs
Output to a CSS file
sass {name}.scss:{name}.css

Other options described later


Errors in input file
described at command-line and in generated .css files

Link to generated .css files in .html files, not .scss files


<link rel="stylesheet" type="text/css" href="{name}.css"/>

CSS3 and Sass 29


Two Syntaxes
Sass syntax
the original
more concise
uses indentation instead of braces and newlines instead of semicolons

file extension is .sass

SCSS syntax
“Sassy CSS”
extension of CSS3 syntax
all CSS3 syntax is valid SCSS syntax

file extension is .scss

preferred

Syntax used is indicated to sass command


by the file extension

CSS3 and Sass 30


Syntax Comparison
#main { SCSS #main Sass
color: blue; color: blue
font-size: 18pt; font-size: 18pt
a { a
font: { font:
weight: bold; weight: bold
family: serif; family: serif
} &:hover
&:hover { background-color: #eee
background-color: #eee;
}
} #main { generated CSS
} color: blue;
font-size: 18pt; }
#main a {
font-weight: bold;
illustrates use of nested rules
which are described later; font-family: serif; }
& inserts the parent selector (a in this case) #main a:hover {
in front of a pseudoclass (:hover in this case) background-color: #eee; }

CSS3 and Sass 31


Syntax Conversion
From Sass to SCSS
sass-convert {name}.sass {name}.scss

From SCSS to Sass


sass-convert {name}.scss {name}.sass

CSS3 and Sass 32


style Option
Controls style of CSS output #main { nested #main { expanded
color: #fff; color: #fff;
Values are background-color: #000; } background-color: #000;

nested - logically nested; default #main p { }


width: 10em; } #main p {
expanded - closest to hand-written CSS width: 10em;
my preference .huge { }
font-size: 10em;
compact - each rule on one line font-weight: bold; .huge {
compressed - everything on one line text-decoration: underline; } font-size: 10em;
font-weight: bold;
comments removed
text-decoration: underline;

To set from command-line }

--style={value}
-t={value}

CSS3 and Sass 33


watch Option
Watches input files for changes and automatically generates new .css files
don’t have to manually run sass command after each change
just perform a browser refresh to test changes

To watch a specific file for changes


sass --watch {name}.scss:{name}.css

To watch a directory for changes


sass --watch {sass-dir}:{css-dir}
example: sass --watch stylesheets/sass:stylesheets/css

if Sass files are in current directory and


generated .css files should be placed there also,
sass --watch .:.

CSS3 and Sass 34


Comments
Like CSS, Sass supports multiline comments
/* comment */
copied to generated .css files

Sass also supports single line comments


// comment
not copied to generated .css files

CSS3 and Sass 35


SCSS

Nesting
Useful when multiple selectors specify the same ancestor(s)
avoids repeating ancestors in each selector #foo { SCSS
#foo td { CSS td {
border: solid red 2px; border: solid red 2px;
} }
#foo li { li {
font-style: italic; font-style: italic;
} }
}

Alternative to shorthand properties


#foo { CSS #foo { SCSS
font-family: Tahoma, sans-serif; font: {
font-size: 18pt; family: Tahoma, sans-serif;
font-style: italic; size: 18pt;
font-weight: bold; style: italic;
} weight: bold;
#foo { CSS shorthand
}
font: italic bold 18pt Tahoma, sans-serif; see border properties example at
} http://sass-lang.com/tutorial.html
}

CSS3 and Sass 36


SassScript
Extensions to CSS that support
variables
arithmetic operators: + - * / %
computed property values
interpolation for computed selectors, property names and property values
additional functions beyond those in CSS
directives
control: @if, @else if, @else, @for, @each, @while

mixin: @mixin, @include

other: @debug, @warn, @function

CSS3 and Sass 37


Variables
Avoid repeating values and
make changes across multiple usages easier
ex. instead of changing red to green in many places, change value of a variable in one place

Names begin with $


Assigned like properties
$name: value;
to assign a value only if it doesn’t already have one, $name: value !default;

Values can include mathematical operators and calls to functions


operators are + - * / % with normal precedence

parentheses can be used to control evaluation order


functions are covered later

Scoped to CSS rule in which defined


global if not defined inside any rule

CSS3 and Sass 38


Variables Example ...

<html> variables.html
<head>
<link rel="stylesheet" type="text/css" href="variables.css"/>
</head>
<body>
<h3>Sass Variables</h3>
<div id="d1">One</div>
<div id="d2">Two</div>
<div id="d3">Three</div>
</body>
</html>

CSS3 and Sass 39


... Variables Example
$borderWidth: 4px; variables.scss #d1 { variables.scss
$color1: green; background-color: $color1;
$padding: 10px; float: left;
$width: 120; width: $halfWidth;
$halfWidth: $width/2 - $padding - $borderWidth/2; }
#d2 {
div { background-color: complement($color1);
border: solid black $borderWidth; border-left-width: 0;
color: white; float: left;
font: 18pt bold monospace; width: $halfWidth;
padding: $padding; }
text-align: center; #d3 {
} background-color: invert($color1);
border-top-width: 0;
clear: left;
width: $width;
}

CSS3 and Sass 40


Interpolation
Used to compute
selectors
property names
property values

Syntax is #{expression}
Example
$planet: Mars; SCSS .Mars4 { generated CSS
$number: 3; border-top-width: 6pt;
$side: top; }

.#{$planet}#{$number + 1} {
border-#{$side}-width: #{$number * 2}pt;
}

CSS3 and Sass 41


Data Types
Boolean
literal values true and false and operators and, or and not

Number
can have CSS units like pt, px and in - ex. 24pt
arithmetic operations perform automatic conversions 2in - 4mm = 1.843in

String
in double-quotes, single-quotes or unquoted; use + to concatenate

Color
name, hex value or call to one of many functions that return a color

List
values separated by spaces or commas
some properties take a list value
examples include margin, padding and border-color
(order is top, right, bottom, left which is clockwise from 12 o’clock)
border-color: red orange yellow green;

CSS3 and Sass 42


Functions
Strings
quote, unquote
adds/removes outer quotes if they don’t/do exist

Math
abs, ceil, floor, round, percentage (simply multiplies by 100)

Lists
join, length, nth

Introspection
comparable (takes two numbers with optional units and returns true if they can be compared, added and subtracted)
type-of, unit, unitless for example, an absolute length cannot
be compared to a relative one;
Other comparable(50px, 5ex) returns false

if(condition, true-value, false-value)


not very useful in practice because Sass doesn’t have access to
dynamic information such as time, date, user preferences, ...

CSS3 and Sass 43


Color-related Functions
returns the amount of these
(0 to 255) in a given color
RBG
mix(color1, color2, weight:50%)
rgb, rgba, red, green, blue, mix weight is percentage of color1

HSL
hsl, hsla, hue, saturation, lightness
adjust-hue, complement, grayscale, invert, lighten, darken
saturate, desaturate

Opacity
alpha (or opacity), rgba, opacify (or fade-in), transparentize (or fade-out)

Other color-related
changes one or more properties of a color;
adjust-color, scale-color, change-color see example on next slide

CSS3 and Sass 44


Function Calls
Can call with positional or keyword arguments
Keyword arguments are best when
there are a large number of arguments (difficult to remember their order)
some arguments have default values (want to specify only a subset)

Keyword arguments can be passed in any order


$color: #F0F; // purple SCSS

#d1 {
font: 24pt bold monospace;
color: change-color($color, $blue: 0, $green: 256);
}
$color is a positional argument;
$blue and $green are a keyword arguments;
results in yellow

CSS3 and Sass 45


Imports
Extends CSS @import so Sass files can import others
regardless of which syntax it uses (SCSS or Sass)

“Partials”
Sass files only meant to be imported into others
starting filename with an underscore tells Sass
not to generate a .css files from it

@import "file-name";
don’t need to specify file extension or leading underscore for partials
looks in current directory by default
can specify other locations with --load-path command-line option
can import more than one file
with multiple @import statements or
listing multiple filenames separated by commas

CSS3 and Sass 46


Selector Inheritance
Adds all properties in one rule to another
Inside destination rule, add one or more must be a “single element” selector,
@extend {source-rule-selector}; for example, “td”, but not “#foo td”

Can extend a rule that extends another rule


.warning { SCSS
Properties defined later take precedence border: solid black 3px;
<html>
background-color: orange;
<head> color: white;
<link rel="stylesheet" type="text/css" href="extend.css"/> font: 18pt sans-serif;
</head> padding: 10px;
<body>
width: 250px;
<div class="warning">The sky is falling!</div>
}
<div class="error">Goodbye cruel world!</div>
</body> .error {
</html> @extend .warning;
background-color: red;
}

gets complicated when an extended selector appears in


other multi-element selectors (combinatorial explosion)
(see reference section on “Merging Selector Sequences”)

CSS3 and Sass 47


Mixins
Reuse lines of Sass
Optionally parameterized
parameters are variable names with optional default values

@mixin
@mixin transition($property, $duration, $function: ease-in-out) {
defines content -moz-transition: $property, $duration, $function;
default
can @include -ms-transition: $property, $duration, $function;
value
other mixins -o-transition: $property, $duration, $function;
-webkit-transition: $property, $duration, $function;
@include
transition: $property, $duration, $function;
includes content }
can use positional
and/or div { This example demonstrates
keyword arguments border: solid red 2px; making it easier to use
CSS3 experimental properties
width: 600px;
that differ across current browsers.
@include transition(all, 3s);
}

CSS3 and Sass 48


Control Directives
Mainly used inside mixins and custom functions
Conditional logic
@if, @else if and @else

Iteration
@for ${var} from {start} [to | through] {end} { ... }
end is exclusive with to and inclusive with through

@each ${var} in {list} { ... }


@while {condition} { ... }
can reassign variables inside body to affect condition

CSS3 and Sass 49


Custom Functions
Typically used to compute @function season-color($season) {

property values @if $season == spring {


@return green;
Defined in two ways } @else if $season == summer {
@return red
@function } @else if $season == fall {

adding Ruby methods to the module @return brown


Sass::Script::Functions } @else if $season == winter {
@return white
} @else {
@return black
}
}

$season: summer;

#d1 {
background-color: season-color($season);
height: 100px;
width: 100px;
}

CSS3 and Sass 50


Recommendations
Change file extension of existing .css files to .scss
Replace repeated property values with variables
Replace repeated property lines in rules with mixins or selector inheritance
Use Compass mixins for setting common sets of properties
Compass is a framework built on top of Sass
adds predefined mixins, CSS property reset and
support for Blueprint framework that provides grid layout and more

ex. CSS3 experimental properties that support border radii, transitions and transforms

CSS3 and Sass 51

You might also like