1 of 22

Slide Notes

DownloadGo Live

Sass Tutorial

Published on Nov 18, 2015

No Description

View Outline

MORE DECKS TO EXPLORE

7 Strategies to Write a Speech with Ease

84507 views

10 ways

45087 views

TXLA Wrap-up 2015

9443 views

Techno Teaching

26894 views

How to make a portfolio

16987 views

Writing Your Book: The 5 Most Helpful Habits

19253 views

Kathy's Kitchen

5874 views

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

MORE DECKS BY THIS AUTHOR

Styles and Markup

23 views

Untitled Haiku Deck

0 views

Time Mangement

33 views

JavaScript

22 views

Responsive Design

117 views