The document discusses Sass, a CSS extension language that adds powerful features like variables, nested rules, mixins, functions and more. It outlines problems with traditional CSS like repetition, maintenance issues and lack of abstraction capabilities. Sass aims to solve these through its additional features that allow for more modular, reusable and maintainable stylesheets. It also introduces Compass, a Sass extension framework and library, and discusses best practices like organization, sprites and separation of concerns.
30. What is Sass?
• Born from Real World Experience
• Brings Software Development
Methodologies to Stylesheets:
‣ Reusable, distributable libraries
‣ DRY
‣ Define abstractions
‣ Adhere to architectural boundaries
31. What is Sass?
New Primitives:
• Variables • Calculations
• Mixins • Functions
• Selector • Conditionals
Inheritance • Loops
32. What is Sass?
It’s what CSS would have been if we had
known then what we know now:
Most stylesheets are written by
programmers.
59. Partials: Just like with html templates, underscores denote a
partial and can only be imported by other stylesheets.
Convention: Each folder has a file of the same name that
imports the files contained within it in the correct order.
61. Sitewide Styles
Forum Blog Articles Directory
I T F L P F I A C S L R
n h o i o o n r o e i e
d r r s s r d t m a s v
e e m t t m e i m r t i
x a x c e c i e
d l n h n w
e t g
92. My Teammates
Lead Developer of Sass
Nathan Wiezenbaum (@nex3)
The Compass Core Team
Eric Meyer (@eriiicam)
Brandon Mathis (@imathis)
Scott Davis (@jetviper21)
Nico Hagenburger (@hagenburger)
93. Compass is Charityware
If you use Compass and it makes your life better, please help
make someone else’s life better by making a tax-deductible
donation to the United Mitochondrial Disease Foundation.
http://umdf.org/compass
Hinweis der Redaktion
\n
\n
\n
\n
\n
\n
\n
\n
\n
Yes, it’s an acronym.\n But, it’s *not* all caps.\n Why? I don’t know. \n Alternate Syntax\nCompiles to CSS\nTo understand Sass, you must know CSS\n \n
\n
CSS Selectors are great -- that’s why we use them in jQuery & Haml\nProperties are simple key/value pairs.\nCSS is elegantly simple.\n
Maybe my memory doesn’t go back very far.\n\nI’m sure punch cards and assembler sucked.\n
9 Browsers\n25 Versions\nPace of development is increasing\n
\n
\n
\n
\n
\n
\n
\n
CSS is a major front for the Browser War v2.0\nCasualty of War: Front-End Developers\nWhat do all of these new features have in common?\nThey’re all about the browser -- None of them address how we author stylesheets. \n
\n
\n
\n
I think rails is a great example of this. Ruby is incredibly powerful, that power makes the best practices of web programming accessible and scaffolds the n00bs during the learning process as they peel the layers of abstraction back.\n
\n
What if we gave stylesheets some brains?\n
\n
Alternate Syntax\nCompiles to CSS\nWe’ll get to these primitives in a second\n\n
But: Sass in the hands in of a technical designer is a BEAUTIFUL THING\n
\n
\n
\n
\n
\n
\n
Accidentally the same?\n
You cannot safely Search and Replace a color.\n
\n
\n
\n
\n
where do these colors come from? Clearly they’re related -- must be designer voodoo.\n
\n
\n
\n
\n
\n
Why is it 366px? If I want to change the border width, how should I adjust these values?\n
\n
Now our changes are obvious and the implementation details elided.\n
Currently most of these calculations are done on a scratch pad.\n\nseriously.\n
\n
Don’t use CSS @import.\n Serve a few, longer stylesheets.\n
\n
\n
\n
\n
\n
\n
Notice that comma selectors are permuted\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Compass CSS3 mixin arguments mimic the real css3 property values.\n