Sass. The Future of Stylesheets.

Transcription

1 Sass. The Future of Stylesheets.

2 Chris Eppstein Follow Architect - Caring.com Creator - Compass Stylesheet Framework Core Contributor - Sass

3 A website for caregivers of the sick and elderly. The right information at just the right time We re HIRING!

4 Book: Sass & Compass In Action Buy the pre-release now and save 40% DISCOUNT CODE: sass40 (Good through Friday)

5 Today

6 Rationale Why does Sass exist? What problems does it solve?

7 Syntax What does Sass provide?

8 Best Practices Tips, tricks & pitfalls

9 Questions? Please ask them.

10 What is Sass? Syntactically Awesome StyleSheets Yes, it s an acronym. But, it s *not* all caps. Why? I don t know. Alternate Syntax Compiles to CSS To understand Sass, you must know CSS

11 What is CSS? Originated in Academia 14 Years Old Three Primitives: Selectors Properties Values

12 CSS is Pretty. Pretty dumb. CSS Selectors are great -- that s why we use them in jquery & Haml Properties are simple key/value pairs. CSS is elegantly simple.

13 Never in the history of software have developers been asked to do so much with so little. Maybe my memory doesn t go back very far. I m sure punch cards and assembler sucked.

14 9 Browsers 25 Versions Pace of development is increasing Browsers & Versions

15 Multiple Form Factors Desktop, Mobile, Print...

16 Dozens of Templates

17 Experiment & Test

18 Maintain Consistency

19 Performant

20 Due Yesterday

21 New Hotness: CSS3 33 New Selectors 120+ New Properties 3 Enhanced Media Queries

22 CSS3 No new syntax* * Yet. CSS is a major front for the Browser War v2.0 Casualty of War: Front-End Developers What do all of these new features have in common? Theyʼre all about the browser -- None of them address how we author stylesheets.

23

24 CSS was designed for the Mythical Designer who is too stupid to understand High School Algebra.

25 If you want to make something simple for beginners...

26 ...make it powerful enough for the experts to create that simplicity. 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.

27 But...

28 There is an alternative. What if we gave stylesheets some brains?

29 What is Sass? Born from Real World Experience Brings Software Development Methodologies to Stylesheets: Reusable, distributable libraries DRY Define abstractions Adhere to architectural boundaries

30 What is Sass? New Primitives: Variables Mixins Selector Inheritance Calculations Functions Conditionals Loops Alternate Syntax Compiles to CSS We ll get to these primitives in a second

31 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. But: Sass in the hands in of a technical designer is a BEAUTIFUL THING

32 Problem: CSS Stylesheets Are hard to maintain

33 Don t Repeat Yourself (I don t have to tell you this -- It s not like you want to)

34 A single change. A single edit. A single compile.

35 We have machines. Let them do the busy work.

36 Problem: Same Color Many Representations

37 Problem: Same Color Different Reasons

38 Accidentally the same?

39 rgba(#f00, 1.0) hsla(0deg, 100%, 100%, 1) hsl(0deg, 100%, 100%) rgb(255, 0, 0) red #f00 RED rgba(255, 0, 0, 1.0) You cannot safely Search and Replace a color.

40 Solution: Variables The most requested CSS enhancement

41 Use variables anywhere a value is allowed.

42

43 Problem: Magic Values Lost knowledge

44 Deceptively Complex where do these colors come from? Clearly they re related -- must be designer voodoo.

45 Solution: Transformations Derive values during compilation

46 As complex as it actually is.

47 Sass Color Functions mix(red, blue, 40%) => # lighten(red, 10%) => #ff3333 darken(red, 10%) => #cc0000 desaturate(red, 10%) => #f20d0d saturate(#511, 10%) => #5a0c0c transparentize(red, 0.25) => rgba(255, 0, 0, 0.75) opacify(red, 0.25) => rgba(255, 0, 0, 0.75) grayscale(red) => # complement(red) => #00ffff There s more on the Sass website.

48 Solution: Make Reusable Calculations We call these things functions

49

50 Deceptively Complex Why is it 366px? If I want to change the border width, how should I adjust these values?

51 Solution: Abstractions & Calculations Derive values during compilation

52 Create a simple abstraction Now our changes are obvious and the implementation details elided.

53 As complex as it actually is. Currently most of these calculations are done on a scratch pad. seriously.

54 Best Practice: Minimize HTTP Round Trips

55 Problem: Long Stylesheets Hard to find your styles. Don t use Serve a few, longer stylesheets.

56 And I mean long... Seriously, this keeps going...

57 Solution: Concatenation & Partials

58 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.

59 Problem: Shared Stylesheets Styles leak into places you didn t intend

60 Sitewide Styles Forum Blog Articles Directory I n d e x T h r e a d F o r m L i s t P o s t F o r m I n d e x A r t i c l e C o m m e n t S e a r c h L i s t i n g R e v i e w

61 Solution: Scoped Selectors

62 Notice that comma selectors are permuted CSS gives you carpal tunnel from typing your scopes OVER & OVER AGAIN

63 Sass Provides DRY Selectors via nesting

64 Nested Selectors Default: descendant & - context reference Works with combinators Compiles to

65 Problem: Dozens of Images Spriting is annoying

66 Solution: Compass Sprites

67 gem compass Simple Sprites (Compass makes classes for you) Or you can define your own selectors.

68

69 Problem: Dozens More Images

70 Solution: Use CSS3 Instead Abstract vendor prefixes away

71

72 gem compass Compass CSS3 mixin arguments mimic the real css3 property values.

73

74 Best Practice: Use a CDN / Asset Hosts Load assets faster

75 relative paths root relative paths root changes asset hosts cdns Problem: Image URLs Change

76 Solution: Use URL Helpers Just like in Rails

77 Compiles to

78 Best Practice: Separate Content & Presentation

79 Problem: Classitis Do you have markup that looks like this?

80 You re officially doing it wrong. But I get it. You need re-use.

81 Solution: Move Presentation Concerns They belong in your stylesheets

82 This is all you should need.

83 + Compiles to Mixins

84 Mixins Create a design vocabulary of common patterns independent from your markup's selector domain

85 More Mixins + Compiles to

86 More Mixins + Compiles to

87 More Mixins + Compiles to

88 This is all you should need.

89 Compiles to Selector Inheritance

90 We ve Only Scratched the Surface

91 My Teammates Lead Developer of Sass Nathan Wiezenbaum The Compass Core Team Eric Meyer Brandon Mathis Scott Davis Nico Hagenburger

92 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.