Tweet
Tweet

Slide 1

Slide 1 text

Torino Coding Society 27th April 2015

Slide 2

Slide 2 text

Torino Coding Society 27th April 2015

Slide 3

Slide 3 text

Introduction First of all, we assume that you

Slide 4

Slide 4 text

Introduction First of all, we assume that you know CSS

Slide 5

Slide 5 text

Introduction First of all, we assume that you know CSS use CSS

Slide 6

Slide 6 text

Introduction First of all, we assume that you know CSS use CSS write CSS

Slide 7

Slide 7 text

Introduction First of all, we assume that you know CSS use CSS write CSS love CSS

Slide 8

Slide 8 text

Introduction First of all, we assume that you know CSS use CSS write CSS love CSS suffer from CSS

Slide 9

Slide 9 text

Introduction

Slide 10

Slide 10 text

Introduction Sass is an attempt to use CSS without pain and with a modern approach.

Slide 11

Slide 11 text

Introduction Sass is an attempt to use CSS without pain and with a modern approach. You will love Sass!

Slide 12

Slide 12 text

About

Slide 13

Slide 13 text

About “Sass (Syntactically Awesome StyleSheets) is an extension of CSS that adds power and elegance to the basic language.“

Slide 14

Slide 14 text

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.

Slide 15

Slide 15 text

Preprocessor

Slide 16

Slide 16 text

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.

Slide 17

Slide 17 text

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.

Slide 18

Slide 18 text

Output style

Slide 19

Slide 19 text

Output style Sass compiles CSS in four different outputs.

Slide 20

Slide 20 text

Output style :nested #main { color: #fff; background-color: #000; } #main p { width: 10em; } Sass compiles CSS in four different outputs.

Slide 21

Slide 21 text

Output style Sass compiles CSS in four different outputs. :compact #main { color: #fff; background-color: #000; } #main p { width: 10em; }

Slide 22

Slide 22 text

Output style Sass compiles CSS in four different outputs. :expanded #main { color: #fff; background-color: #000; } #main p { width: 10em; }

Slide 23

Slide 23 text

Output style Sass compiles CSS in four different outputs. :compressed #main{color:#fff;background-color:#000} #main p{width:10em}

Slide 24

Slide 24 text

Sass VS SCSS

Slide 25

Slide 25 text

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.

Slide 26

Slide 26 text

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.

Slide 27

Slide 27 text

Sass VS SCSS Sass SCSS Sass Preprocessor Syntaxes

Slide 28

Slide 28 text

Sass VS SCSS Sass means both the preprocessor and its own syntax. Sass describe a syntax indentation-sensitivity. Sass SCSS Sass Preprocessor Syntaxes

Slide 29

Slide 29 text

Syntax

Slide 30

Slide 30 text

Curly braces

Slide 31

Slide 31 text

Curly braces Sass syntax simplifies the readability removing curly braces and semicolons.

Slide 32

Slide 32 text

Curly braces Sass syntax simplifies the readability removing curly braces and semicolons. // Sass .selector color: #DDD width: 10% // CSS .selector { color: #DDD; width: 10%; }

Slide 33

Slide 33 text

Indentation

Slide 34

Slide 34 text

Indentation Two spaces indents, no tabs, meaningful use of whitespaces.

Slide 35

Slide 35 text

Indentation Two spaces indents, no tabs, meaningful use of whitespaces. .selector color: #DDD width: 10% .another-selector width: 100%

Slide 36

Slide 36 text

Nesting

Slide 37

Slide 37 text

Nesting The selectors can be nested. This feature offers a way for stylesheet authors to compute long selectors by nesting shorter selectors.

Slide 38

Slide 38 text

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; }

Slide 39

Slide 39 text

Brackets

Slide 40

Slide 40 text

Brackets Brackets can be used to affect the order of operations.

Slide 41

Slide 41 text

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; }

Slide 42

Slide 42 text

Data types

Slide 43

Slide 43 text

Numbers

Slide 44

Slide 44 text

Numbers Number Number is a data type that allow calculations. Remember also units are numbers, not strings.

Slide 45

Slide 45 text

Numbers

Slide 46

Slide 46 text

Numbers Zero. Numbers should have leading zero before a decimal value.

Slide 47

Slide 47 text

Numbers Zero. Numbers should have leading zero before a decimal value. // Yes opacity: 0.5 // No opacity: .5

Slide 48

Slide 48 text

Numbers

Slide 49

Slide 49 text

Numbers Zero Unit. When the value is zero don’t write the measurement unit.

Slide 50

Slide 50 text

Numbers Zero Unit. When the value is zero don’t write the measurement unit. // Yes top: 0 // No top: 0px

Slide 51

Slide 51 text

Colors

Slide 52

Slide 52 text

Colors Color Any CSS color expression returns a SassScript Color value.

Slide 53

Slide 53 text

Booleans

Slide 54

Slide 54 text

Booleans Boolean true or false.

Slide 55

Slide 55 text

Strings

Slide 56

Slide 56 text

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.

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

Maps

Slide 59

Slide 59 text

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.

Slide 60

Slide 60 text

Maps // _config.sass $colors: (sexy: #FA6ACC, glamour: #F02A52, sky: #09A6E4) // _component.sass .element background-color: map-get($colors, sky)

Slide 61

Slide 61 text

Lists

Slide 62

Slide 62 text

Lists List It’s equivalent of an array. A list is a flat data structure used to store values.

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

Improvements

Slide 65

Slide 65 text

Partials

Slide 66

Slide 66 text

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.

Slide 67

Slide 67 text

Partials @import pages/title // import pages/_title.sass file here @import url("http://fonts.googleapis.com/css?family=Droid +Sans") // compiles... the same

Slide 68

Slide 68 text

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'

Slide 69

Slide 69 text

Partials

Slide 70

Slide 70 text

Partials Some word about architecture, conventions and more...

Slide 71

Slide 71 text

Partials Some word about architecture, conventions and more... not now!

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

Conditions/loop

Slide 74

Slide 74 text

Conditions/loop Conditions / loop @if condition ... @else ...

Slide 75

Slide 75 text

Conditions/loop Conditions / loop @if condition ... @else ... @if $var == *something* width: 50% @else width: 40%

Slide 76

Slide 76 text

Conditions/loop

Slide 77

Slide 77 text

Conditions/loop Conditions / loop @for $i from 1 through 3 { ...}

Slide 78

Slide 78 text

Conditions/loop Conditions / loop @for $i from 1 through 3 { ...} @for $count from 1 through 3 .item-#{$count} width: 30em * $count

Slide 79

Slide 79 text

Conditions/loop

Slide 80

Slide 80 text

Conditions/loop Conditions / loop @each $var in . The directive @each set $var in each element of the list or map.

Slide 81

Slide 81 text

Conditions/loop Conditions / loop @each $var in . 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)

Slide 82

Slide 82 text

Conditions/loop

Slide 83

Slide 83 text

Conditions/loop Conditions / loop @while { ... }

Slide 84

Slide 84 text

Conditions/loop Conditions / loop @while { ... } $i: 6 @while $i > 0 .item-#{$i} width: 2em * $i $i: $i - 2

Slide 85

Slide 85 text

Interpolation

Slide 86

Slide 86 text

Interpolation Interpolation Selectors and properties can be interpolated through the use of #{...}

Slide 87

Slide 87 text

Interpolation Interpolation Selectors and properties can be interpolated through the use of #{...} $name: ’foo’ $attr: ’border’ p.#{$name} #{$attr}-color: blue

Slide 88

Slide 88 text

Variables

Slide 89

Slide 89 text

Variables

Slide 90

Slide 90 text

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.

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

Operations

Slide 93

Slide 93 text

Operations

Slide 94

Slide 94 text

Operations Sass includes numbers (and colors) operations. Alway use () brackets.

Slide 95

Slide 95 text

Operations

Slide 96

Slide 96 text

Operations width: 10px + 2px // 10px + 2px # Plain CSS

Slide 97

Slide 97 text

Operations width: 10px + 2px // 10px + 2px # Plain CSS width: ( 2px * 5 ) // => 10px # Use px

Slide 98

Slide 98 text

Operations width: 10px + 2px // 10px + 2px # Plain CSS width: ( 2px * 5 ) // => 10px # Use px width: ( 10 * 1px ) // => 10px # Use px

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

Functions

Slide 107

Slide 107 text

Functions

Slide 108

Slide 108 text

Functions Sass has a lot of functions for all data types (and more like selectors). Now some helpful examples.

Slide 109

Slide 109 text

Functions

Slide 110

Slide 110 text

Functions Number functions.

Slide 111

Slide 111 text

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.

Slide 112

Slide 112 text

Functions

Slide 113

Slide 113 text

Functions String functions.

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

Functions

Slide 116

Slide 116 text

Functions Color functions.

Slide 117

Slide 117 text

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

Slide 118

Slide 118 text

Functions

Slide 119

Slide 119 text

Functions List functions.

Slide 120

Slide 120 text

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?

Slide 121

Slide 121 text

Mixins

Slide 122

Slide 122 text

Mixins

Slide 123

Slide 123 text

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!

Slide 124

Slide 124 text

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)

Slide 125

Slide 125 text

Extends

Slide 126

Slide 126 text

Extends

Slide 127

Slide 127 text

Extends Directive @extend allow you to share CSS properties with others selectors.

Slide 128

Slide 128 text

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; }

Slide 129

Slide 129 text

Extends

Slide 130

Slide 130 text

Extends Extend-only selector: are similar to class selectors using “%”. Only the selectors that extend them will be included in the output stylesheet.

Slide 131

Slide 131 text

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; }

Slide 132

Slide 132 text

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; }

Slide 133

Slide 133 text

Around Sass

Slide 134

Slide 134 text

Around Sass

Slide 135

Slide 135 text

Around Sass In this scenario we have a lot of approaches evolution. From mixin collections to CSS framework… do you know Bootstrap?

Slide 136

Slide 136 text

Around Sass

Slide 137

Slide 137 text

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

Slide 138

Slide 138 text

Around Sass

Slide 139

Slide 139 text

Around Sass Naming Conventions Base: hyphen (-) delimited strings. .page-head {} .main-content {}

Slide 140

Slide 140 text

Around Sass

Slide 141

Slide 141 text

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 {}

Slide 142

Slide 142 text

Around Sass

Slide 143

Slide 143 text

Around Sass Omitting OOCSS discussion this is a basic stylesheets structure.

Slide 144

Slide 144 text

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.

Slide 145

Slide 145 text

Around Sass

Slide 146

Slide 146 text

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.

Slide 147

Slide 147 text

No content

Slide 148

Slide 148 text

References

Slide 149

Slide 149 text

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

Slide 150

Slide 150 text

@mukkoo @stephanpaounov

Slide 151

Slide 151 text

Questions? @mukkoo @stephanpaounov