Loading presentation...

Present Remotely

Send the link below via email or IM


Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.


Getting Specific with SASS

Beautiful applications with less code


on 26 March 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Getting Specific with SASS

makes Cascading Style Sheets SASS "SASS inline under a minute Q: What color will the text be? Syntactically Awesome Style Sheets POP QUIZ! Selectors SASS Write less style code with Quick review of... Diving into... Developed by: Nathan Weizenbaum "object-oriented-like CSS" Why are my stylesheets
not working?! CSS Review + When writing thousands of lines,
important to write DRY code
"Why use SASS?"
SASS Intro don't (ab)use !important
avoid writing styles inline
'0020' & '0010' are weighted equally. Order matters
minimize number of selectors Keep in mind <p style="color:green;">This is a paragraph.</p> Goodies More Variables Nesting Mixins CSS 101 .content-navigation {
border-color: #3bbfce;
color: #2b9eab;

.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
} internal <html>
<style type="text/css">

p { background: green; }

... external <html>
<link rel='stylesheet' href='path/to/style.css' type='text/css' media='all' />
</head> p { background: green; } index.html path/to/style.css Different ways of selecting HTML elements ID <body>, <p>, <span>, <a>, <ol>, <li>, etc..
<p> Hello World! </p> ELEMENTS, PSUEDO-ELEMENTS ATTRIBUTES, CLASSES, PSEUDO-CLASSES p { font-size: 12px; color: #FFF }
p:first-letter { font-size: 24px; color: red} CSS HTML psuedo-element(no spaces!) <a href="#">This is a link</a>
<p class="small">Hello World</p> a { color: blue; }
a:hover { color: green; } CSS HTML psuedo-class <div id="content"></div> div#content { ... } CSS HTML 3 ways to write style rules H ello World! p.small { color: yellow; }
p.small { color: red; }

input[type=text] { color: grey; } This is a link Hello World <head>
#wrapper p { color: red; }
p.about-me { color: orange; }
.content p { color: green; }
body div div p { color: blue; }
p { color: purple; }

<div id="wrapper">
<div class="content">
<p class="about-me"> Hello World! </p>
</body> Hello World! 0101
0001 @chrisngonzales WHY?! SPECIFICITY 4 categories that define specificity level of a given selector: 1. Inline styles (Presence of style in document). 2. IDs (# of ID selectors) 3. Classes, attributes and pseudo-classes (# of class selectors). 4. Elements and pseudo-elements (# of Element (type) selectors).
Including for instance :before and :after 0,0,0,0 CSS fun again" Two types of syntaxes Nested Rules
Selector Inheritance $blue: #3bbfce
$margin: 16px

border-color: $blue
color: darken($blue, 9%)

padding: $margin / 2
margin: $margin / 2
border-color: $blue .css .sass table.hl {
margin: 2em 0;
table.hl td.ln {
text-align: right;
} table.hl
margin: 2em 0
text-align: right .css .sass #data {
float: left;
margin-left: 10px;
#data th {
text-align: center;
font-weight: bold;
#data td, #data th {
padding: 2px;
} @mixin table-base
text-align: center
font-weight: bold
td, th
padding: 2px

@mixin left($dist)
float: left
margin-left: $dist

@include left(10px)
@include table-base .css .sass .error, .badError {
border: 1px #f00;
background: #fdd;

.badError {
border-width: 3px;
} .error
border: 1px #f00
background: #fdd

@extend .error
border-width: 3px .css .sass Selector Inheritance to check out! http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html functions: opacity($color)
import: @import "colors.scss";
Firebug integration gem install sass
Full transcript