1 of 22

Slide Notes

DownloadGo Live

Sass Tutorial

Published on Nov 18, 2015

No Description

View Outline

MORE DECKS TO EXPLORE

PRESENTATION OUTLINE

1.

SASS Tutorial

by artem deykun / Svitla Systems
Photo by Stéfan
2.

      SCSS               SASS      

SCSS more similar to CSS
3.

SCSS

EASILY to migrate
Photo by holdit.
4.

    file structure    

IMPORT and compress styles
5.

Compress just on prod

keep developer versions
Photo by fatboyke (Luc)
6.

  variables      arrays   

   
7.

don't repeat yourself

PREPROCESSORS LOSUNG
Photo by d_pham
8.

       NESTING       

selectors                      properties
9.

CSS SELECTOR NIGHTMARE

REMEMBER  inception rule
Photo by mugley
10.

     mixins    functions     

function from SASS version 3.1.0
11.

MORE ENGINEERING

Photo by robbieMacphotos
12.

inheritance

% when you don't need to use class
13.

INternet explorer

14.

COMPASS

15.

  

  
16.

compass mixins

compass-style.org/reference/compass/css3
17.

compass helpers

compass-style.org/reference/compass/helpers
18.

compass reset

compass-style.org/reference/compass/reset
19.

compass sprites

in two lines
20.

FROM SEPARATE FOLDERS

https://github.com/akella/sass/blob/master/sass/lib/_sprites.scss
21.

SASS frameworks

Click to add more text
22.

artemhp on github

example-of-project-created-in-xslt-sass-smaccs
Photo by roger_ipa

Artem Deykun

deykun.com