Sass Way

A simple introduction to Sass

Transcript

1. Torino Coding Society 27th April 2015
2. Torino Coding Society 27th April 2015
3. Introduction First of all, we assume that you
4. Introduction First of all, we assume that you know CSS
5. Introduction First of all, we assume that you know CSS use CSS
6. Introduction First of all, we assume that you know CSS use CSS write CSS
7. Introduction First of all, we assume that you know CSS use CSS write CSS love CSS
8. Introduction First of all, we assume that you know CSS use CSS write CSS love CSS suffer from CSS
9. Introduction
10. Introduction Sass is an attempt to use CSS without pain and with a modern approach.
11. Introduction Sass is an attempt to use CSS without pain and with a modern approach. You will love Sass!
12. About
13. About “Sass (Syntactically Awesome StyleSheets) is an extension of CSS that adds power and elegance to the basic language.“
14. About “Sass (Syntactically Awesome StyleSheets) is an extension of CSS that adds power and elegance to the basic language.“ Sass improves CSS’s syntax in order to provide extra features and handy tools. The point is not to turn CSS into a fully-featured programming language; Sass wants to help where CSS fails.
15. Preprocessor
16. Preprocessor Sass is a preprocessor for CSS. A preprocessor is a program that processes its input data to produce output that is used as input to another program.
17. Preprocessor Sass is a preprocessor for CSS. A preprocessor is a program that processes its input data to produce output that is used as input to another program. There are also many other CSS preprocessors like LESS or Stylus.
18. Output style
19. Output style Sass compiles CSS in four different outputs.
20. Output style :nested #main { color: #fff; background-color: #000; } #main p { width: 10em; } Sass compiles CSS in four different outputs.
21. Output style Sass compiles CSS in four different outputs. :compact #main { color: #fff; background-color: #000; } #main p { width: 10em; }
22. Output style Sass compiles CSS in four different outputs. :expanded #main { color: #fff; background-color: #000; } #main p { width: 10em; }
23. Output style Sass compiles CSS in four different outputs. :compressed #main{color:#fff;background-color:#000} #main p{width:10em}
24. Sass VS SCSS
25. Sass VS SCSS Soon enough, Sass maintainers decided to close the gap between Sass and CSS by providing a CSS-friendly syntax called SCSS(Sassy CSS). The motto is: if it’s valid CSS, it’s valid SCSS.
26. Sass VS SCSS Soon enough, Sass maintainers decided to close the gap between Sass and CSS by providing a CSS-friendly syntax called SCSS(Sassy CSS). The motto is: if it’s valid CSS, it’s valid SCSS. Since then, Sass (the preprocessor) has been providing two different syntaxes: Sass and SCSS. They are strictly equivalent in features.
27. Sass VS SCSS Sass SCSS Sass Preprocessor Syntaxes
28. Sass VS SCSS Sass means both the preprocessor and its own syntax. Sass describe a syntax indentation-sensitivity. Sass SCSS Sass Preprocessor Syntaxes
29. Syntax
30. Curly braces
31. Curly braces Sass syntax simplifies the readability removing curly braces and semicolons.
32. Curly braces Sass syntax simplifies the readability removing curly braces and semicolons. // Sass .selector color: #DDD width: 10% // CSS .selector { color: #DDD; width: 10%; }
33. Indentation
34. Indentation Two spaces indents, no tabs, meaningful use of whitespaces.
35. Indentation Two spaces indents, no tabs, meaningful use of whitespaces. .selector color: #DDD width: 10% .another-selector width: 100%
36. Nesting
37. Nesting The selectors can be nested. This feature offers a way for stylesheet authors to compute long selectors by nesting shorter selectors.
38. Nesting The selectors can be nested. This feature offers a way for stylesheet authors to compute long selectors by nesting shorter selectors. // Sass nav ul color: red li color: black a text-decoration: none &:hover color: white // CSS nav ul { color: red; } nav li { color: black; } nav a { text-decoration: none; } nav a:hover{ color: white; }
39. Brackets
40. Brackets Brackets can be used to affect the order of operations.
41. Brackets Brackets can be used to affect the order of operations. // Sass .item width: 1em + (2em * 3) .item width: (1em + 2em) * 3 // CSS .item { width: 7em; } .item { width: 9em; }
42. Data types
43. Numbers
44. Numbers Number Number is a data type that allow calculations. Remember also units are numbers, not strings.
45. Numbers
46. Numbers Zero. Numbers should have leading zero before a decimal value.
47. Numbers Zero. Numbers should have leading zero before a decimal value. // Yes opacity: 0.5 // No opacity: .5
48. Numbers
49. Numbers Zero Unit. When the value is zero don’t write the measurement unit.
50. Numbers Zero Unit. When the value is zero don’t write the measurement unit. // Yes top: 0 // No top: 0px
51. Colors
52. Colors Color Any CSS color expression returns a SassScript Color value.
53. Booleans
54. Booleans Boolean true or false.
55. Strings
56. Strings String CSS doesn’t require strings to be quoted. Sass also doesn’t require strings to be quoted, but it is a good practice. This improves the understanding.
57. Strings String CSS doesn’t require strings to be quoted. Sass also doesn’t require strings to be quoted, but it is a good practice. This improves the understanding. //Yes $font-stack: 'Helvetica Neue Light', 'Helvetica', sans-serif //No $font-stack: Helvetica Neue Light, Helvetica, sans-serif
58. Maps
59. Maps Map The associations must always be surrounded by brackets and comma separated. A map can be used like a list of key - value pairs.
60. Maps // _config.sass $colors: (sexy: #FA6ACC, glamour: #F02A52, sky: #09A6E4) // _component.sass .element background-color: map-get($colors, sky)
61. Lists
62. Lists List It’s equivalent of an array. A list is a flat data structure used to store values.
63. Lists List It’s equivalent of an array. A list is a flat data structure used to store values. $list: 'item1', 'item2', 'item3' $font-stack: 'Helvetica', 'Arial', sans-serif
64. Improvements
65. Partials
66. Partials File partials / inclusions With Sass you can split project in different partials ( name starts with _ ) included by @import directive. Remote resources can be imported with the same directive too. No more 2.000 CSS lines.
67. Partials @import pages/title // import pages/_title.sass file here @import url("http://fonts.googleapis.com/css?family=Droid +Sans") // compiles... the same
68. Partials // It’s possible to nest @import 'vendors/bootstrap', 'vendors/jquery-ui' @import 'utils/variables', 'utils/functions', 'utils/mixins', 'utils/placeholders' @import 'base/reset', 'base/typography' @import 'layout/navigation', 'layout/grid', 'layout/header', 'layout/footer', 'layout/sidebar', 'layout/forms' @import 'components/buttons', 'components/carousel', 'components/cover', 'components/dropdown' @import 'pages/home', 'pages/contact' @import 'themes/theme', 'themes/admin'
69. Partials
70. Partials Some word about architecture, conventions and more...
71. Partials Some word about architecture, conventions and more... not now!
72. Partials Some word about architecture, conventions and more... not now! “One file to rule them all, One file to find them, One file to bring them all, And in the Sass way merge them.” J.R.R. Tolkien
73. Conditions/loop
74. Conditions/loop Conditions / loop @if condition ... @else ...
75. Conditions/loop Conditions / loop @if condition ... @else ... @if $var == *something* width: 50% @else width: 40%
76. Conditions/loop
77. Conditions/loop Conditions / loop @for $i from 1 through 3 { ...}
78. Conditions/loop Conditions / loop @for $i from 1 through 3 { ...} @for $count from 1 through 3 .item-#{$count} width: 30em * $count
79. Conditions/loop
80. Conditions/loop Conditions / loop @each $var in <list or map> . The directive @each set $var in each element of the list or map.
81. Conditions/loop Conditions / loop @each $var in <list or map> . The directive @each set $var in each element of the list or map. $colors: (sexy: #FA6ACC, glamour: #F02A52, sky: #09A6E4) $list: ‘sexy’, ‘glamour’, ‘sky’ @each $item in $list .item-#{$item} background-color: map-get($colors, $item)
82. Conditions/loop
83. Conditions/loop Conditions / loop @while <condition> { ... }
84. Conditions/loop Conditions / loop @while <condition> { ... } $i: 6 @while $i > 0 .item-#{$i} width: 2em * $i $i: $i - 2
85. Interpolation
86. Interpolation Interpolation Selectors and properties can be interpolated through the use of #{...}
87. Interpolation Interpolation Selectors and properties can be interpolated through the use of #{...} $name: ’foo’ $attr: ’border’ p.#{$name} #{$attr}-color: blue
88. Variables
89. Variables
90. Variables Variables are the essence of any programming language. They allow us to reuse values without having to copy them over and over again. Variables must be defined before the use. Scoping: local variables override previous and global variables. Pay attention! Sass doesn’t have constants. The convention say to write variables that you don’t want to override UPCASED.
91. Variables $base-color: blue h1 color: $base-color // color: blue .wrapper $base-color: red h1 color: $base-color // color: red // Upcased constant $CONSTANT: 1em $variable: 10px
92. Operations
93. Operations
94. Operations Sass includes numbers (and colors) operations. Alway use () brackets.
95. Operations
96. Operations width: 10px + 2px // 10px + 2px # Plain CSS
97. Operations width: 10px + 2px // 10px + 2px # Plain CSS width: ( 2px * 5 ) // => 10px # Use px
98. Operations width: 10px + 2px // 10px + 2px # Plain CSS width: ( 2px * 5 ) // => 10px # Use px width: ( 10 * 1px ) // => 10px # Use px
99. Operations width: 10px + 2px // 10px + 2px # Plain CSS width: ( 2px * 5 ) // => 10px # Use px width: ( 10 * 1px ) // => 10px # Use px width: ( 10 + px ) // Nope # Unit are not strings
100. Operations width: 10px + 2px // 10px + 2px # Plain CSS width: ( 2px * 5 ) // => 10px # Use px width: ( 10 * 1px ) // => 10px # Use px width: ( 10 + px ) // Nope # Unit are not strings width: ( 1px + 1em ) // Error # Incompatible units
101. Operations width: 10px + 2px // 10px + 2px # Plain CSS width: ( 2px * 5 ) // => 10px # Use px width: ( 10 * 1px ) // => 10px # Use px width: ( 10 + px ) // Nope # Unit are not strings width: ( 1px + 1em ) // Error # Incompatible units width: ( 1px + 1in ) // => 97px # Compatible, use px
102. Operations width: 10px + 2px // 10px + 2px # Plain CSS width: ( 2px * 5 ) // => 10px # Use px width: ( 10 * 1px ) // => 10px # Use px width: ( 10 + px ) // Nope # Unit are not strings width: ( 1px + 1em ) // Error # Incompatible units width: ( 1px + 1in ) // => 97px # Compatible, use px width: ( 1in + 1px ) // => 1.01042in # Compatible, use in
103. Operations width: 10px + 2px // 10px + 2px # Plain CSS width: ( 2px * 5 ) // => 10px # Use px width: ( 10 * 1px ) // => 10px # Use px width: ( 10 + px ) // Nope # Unit are not strings width: ( 1px + 1em ) // Error # Incompatible units width: ( 1px + 1in ) // => 97px # Compatible, use px width: ( 1in + 1px ) // => 1.01042in # Compatible, use in width: ( 10px / 2px ) // => 5 # WAAT? remove px. It makes 10/2 and px/px
104. Operations width: 10px + 2px // 10px + 2px # Plain CSS width: ( 2px * 5 ) // => 10px # Use px width: ( 10 * 1px ) // => 10px # Use px width: ( 10 + px ) // Nope # Unit are not strings width: ( 1px + 1em ) // Error # Incompatible units width: ( 1px + 1in ) // => 97px # Compatible, use px width: ( 1in + 1px ) // => 1.01042in # Compatible, use in width: ( 10px / 2px ) // => 5 # WAAT? remove px. It makes 10/2 and px/px $number: 10px width: $number/2 // 5px # with vars do not need brackets width: round(10.1)/2px // 5px # with functions do not need brackets
105. Operations width: 10px + 2px // 10px + 2px # Plain CSS width: ( 2px * 5 ) // => 10px # Use px width: ( 10 * 1px ) // => 10px # Use px width: ( 10 + px ) // Nope # Unit are not strings width: ( 1px + 1em ) // Error # Incompatible units width: ( 1px + 1in ) // => 97px # Compatible, use px width: ( 1in + 1px ) // => 1.01042in # Compatible, use in width: ( 10px / 2px ) // => 5 # WAAT? remove px. It makes 10/2 and px/px $number: 10px width: $number/2 // 5px # with vars do not need brackets width: round(10.1)/2px // 5px # with functions do not need brackets color: ( #020304 + #040506 ) // #060810 # it makes 02+04=06, 03+05=08, 04+06=10
106. Functions
107. Functions
108. Functions Sass has a lot of functions for all data types (and more like selectors). Now some helpful examples.
109. Functions
110. Functions Number functions.
111. Functions Number functions. percentage(100px / 50px) // 200% => Converts a unitless number to a percentage. round(12.4) // 12 => Rounds a number to the nearest whole number. random([$limit]) // Returns a random number. Default is between 0 and 1.
112. Functions
113. Functions String functions.
114. Functions String functions. str-length("foo") // 3 => String length to-upper-case("foo") // "FOO" => Converts a string to upper case to-lower-case("BAR") // "bar" => Converts a string to lower case
115. Functions
116. Functions Color functions.
117. Functions Color functions. darken(#800, 20%) // #200 => Color darkness increased by 20% lighten(#800, 20%) // #e00 => Color lightness increased by 20% invert(#800) // Invert color transparentize(rgba(0, 0, 0, 0.8), 0.2) // rgba(0, 0, 0, 0.6) => Increase color opacity
118. Functions
119. Functions List functions.
120. Functions List functions. length($list) // returns the length (if not a list, returns 1) nth($list, $index) // returns the value at $index position in $list append($list, $value[, $separator]) // appends $value to the end of $list using $separator join($list1, $list2[, $separator]) // appends $list2 to $list1 zip(*$lists) // WTF?
121. Mixins
122. Mixins
123. Mixins Mixins allow you to define groups of selectors and CSS properties that can be re-used. Mixins accept parameters. Don’t abuse the power of mixins!
124. Mixins @mixin name ($something) // or =name($something) =border-radius($radius = 2px) -webkit-border-radius: $radius -moz-border-radius: $radius -ms-border-radius: $radius border-radius: $radius // Use mixins .button +border-radius(10px)
125. Extends
126. Extends
127. Extends Directive @extend allow you to share CSS properties with others selectors.
128. Extends Directive @extend allow you to share CSS properties with others selectors. //Sass .message border: 1px solid #ccc padding: 10px color: #333 .success @extend .message border-color: green //CSS .message { border: 1px solid #ccc; padding: 10px; color: #333; } .success { border: 1px solid #ccc; padding: 10px; color: #333; border-color: green; }
129. Extends
130. Extends Extend-only selector: are similar to class selectors using “%”. Only the selectors that extend them will be included in the output stylesheet.
131. Extends Extend-only selector: are similar to class selectors using “%”. Only the selectors that extend them will be included in the output stylesheet. //Sass %red-button background-color: blue color: white .button @extend %red-button margin: 0 .huge-button @extend %red-button .another-button @extend %red-button //CSS .button { background-color: blue; color: white; margin: 0; } .huge-button { background-color: blue; color: white; } .another-button { background-color: blue; color: white; }
132. Extends Extend-only selector: are similar to class selectors using “%”. Only the selectors that extend them will be included in the output stylesheet. //Sass %red-button background-color: blue color: white .button @extend %red-button margin: 0 .huge-button @extend %red-button .another-button @extend %red-button //CSS .button, .huge- button, .another-button { background-color: blue; color: white; } .button { margin: 0; }
133. Around Sass
134. Around Sass
135. Around Sass In this scenario we have a lot of approaches evolution. From mixin collections to CSS framework… do you know Bootstrap?
136. Around Sass
137. Around Sass DRY (don’t repeat yourself) .button { background-color: red; } .title { color: red; } $main-color: red .button background-color: $main-color .title color: $main-color
138. Around Sass
139. Around Sass Naming Conventions Base: hyphen (-) delimited strings. .page-head {} .main-content {}
140. Around Sass
141. Around Sass BEM-like Naming BEM splits components’ classes into three groups: Block: The root of the component. Element: A component part of the Block. Modifier: A variant or extension of the Block. .room {} .room__head {} .room--bathroom {}
142. Around Sass
143. Around Sass Omitting OOCSS discussion this is a basic stylesheets structure.
144. Around Sass sass/ | |– base/ | `– _typography.sass # Typography rules | |– components/ | |– _buttons.sass # Buttons | |– _dropdown.sass # Dropdown | `– _navigation.sass # Navigation | |– helpers/ | |– _variables.sass # Sass Variables | |– _functions.sass # Sass Functions | |– _mixins.sass # Sass Mixins | `– _helpers.sass # Class & placeholders helpers | |– layout/ | |– _header.sass # Header | `– _footer.sass # Footer | |– pages/ | |– _home.sass # Home specific styles | `– _contact.sass # Contact specific styles | |– themes/ | |– _theme.sass # Default theme | `– _admin.sass # Admin theme | |– vendors/ | |– _bootstrap.sass # Bootstrap | `– _jquery-ui.sass # jQuery UI | | `– main.sass # primary Sass file Omitting OOCSS discussion this is a basic stylesheets structure.
145. Around Sass
146. Around Sass Compass Compass is the main Sass framework out there. Developed by Chris Eppstein, one of the two core designers of Sass. Compass is composed by: . Vendor prefixes . Math helpers like cos, sin, pi and such . Color helpers like shade, tint and such . Image helpers like image-width and image-height . A sprite builder We don’t use Compass anymore.
148. References
149. References Sass documentation sass-lang.com/documentation/file.sass_REFERENCE.html Install Sass sass-lang.com/install Architecture for Sass projects www.sitepoint.com/architecture-sass-project/ Sass functions sass-lang.com/documentation/Sass/Script/Functions.html Sass and compass color functions jackiebalzer.com/color DRY en.wikipedia.org/wiki/Don%27t_repeat_yourself CSS naming convention cssguidelin.es/#naming-conventions Architecture of a Sass project www.sitepoint.com/architecture-sass-project/ Compass compass-style.org Why I Don’t Use Compass Anymore www.sitepoint.com/dont-use-compass-anymore Sass Color Functions sass-guidelin.es/assets/images/lighten-darken-mix_huge.png
150. @mukkoo @stephanpaounov
151. Questions? @mukkoo @stephanpaounov