CSS Workflow. Pre & Post Sass Post CSS Exadel Education

1. CSS Workflow
pre & post processing

2. • In General
• CSS pre-processing (with SASS)
• CSS post-processing (with PostCSS)
CSS Workflow

3. CSS Workflow
css browser
you're
here

4. When you build a house, would you want to use a
hammer, a hand saw, and some nails, or would
you rather use a power drill, a miter saw, and
some screws?

5. CSS itself is pretty dumb.
You target bits of your document with selectors, and
you style them with properties. That's pretty much
it.

6. Little Silly Demo 1
small_example.scss

7. Little Silly Demo 2
Show them compiled bootstrap grid.

8. Introducing CSS Preprocessors.
css browser
you're
here
pre -
css
compile

9. • Clever automations.
• Re-use across projects. Introduce Mixins.
• Variables can be tweaked in one place, having
huge impact on the application CSS as a whole.
• More structural and modular CSS.
• They make you work smarter.
Introducing CSS Preprocessors.
Why?

10. SASS vs LESS vs STYLUS
???
great link 1
great link 2

11. .scss vs .sass
???
great link 3

12. $blue: #3bbfce
$margin: 16px
.content-navigation
border-color: $blue
color: darken($blue, 9%)
.border
padding: $margin / 2
margin: $margin / 2
border-color: $blue
$blue: #3bbfce;
$margin: 16px;
.content-navigation {
border-color: $blue;
color: darken($blue, 9%);
}
.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}
.scss .sass

13. 1. Partials
2. Variables
3. Nesting Selectors
4. Inheriting (or Extending) Properties
5. Mixins
6. A lot more: sass-lang.com
Discovering SASS

14. 1. Partials
sass/
|
|-- helpers/
| |-- _variables.scss
| |-- _mixins.scss
|
|-- base/
| |-- _reset.scss
| |-- _grid.scss
| |-- _typography.scss
|
|-- layout/
| |-- _header.scss
| |-- _footer.scss
| |-- _sidebar.scss
| |-- _forms.scss
|
|-- components/
| |-- _buttons.scss
| |-- _dropdown.scss
| |-- _navigation.scss
|
|- styles.scss

15. 1. Partials
// styles.scss
@import 'helpers/variables';
@import 'helpers/mixins';
@import 'base/reset';
@import 'base/grid';
@import 'base/typography';
@import 'layout/header';
@import 'layout/footer';
@import 'layout/sidebar';
@import 'layout/forms';
@import 'components/buttons';
@import 'components/dropdown';
@import 'components/navigation';
For more ways to organize your Sass projects, check out these blog posts:
• www.sitepoint.com/architecture-sass-project/
• www.thesassway.com/beginner/how-to-structure-a-sass-project
• www.sitepoint.com/look-different-sass-architectures/

16. 2. Variables
$logo_color : #083B91;
h1 {
color: $logo_color;
}
// variables.scss
// fonts
$font-serif: 'PF Regal Text Pro', Georgia, 'Times New Roman', Times, serif;
$font-sans: 'Proxima Nova', sans-serif;
$base-font-size: 14px;
$header-font-size: $base-font-size * 2;
// color
$white: #fff;
$light-gray: #e6e6e6;
$medium-gray: #b3b3b3;
$dark-gray: #262626;
$primary: #b88b58;
More on SASS MATH:
• https://scotch.io/tutorials/getting-started-with-sass#math,
• https://css-tricks.com/video-screencasts/132-quick-useful-case-sass-math-mixins/
• http://sass-lang.com/documentation/file.SASS_REFERENCE.html#operations

17. 3. Nesting Selectors
.nav {
display: flex;
justify-content: space-around;
list-style-type: none;
li {
width: 30%;
background-color: #FFEED5;
padding: 5px;
text-align: center;
}
a {
text-decoration: none;
}
}
.nav {
display: flex;
justify-content: space-around;
list-style-type: none;
}
.nav li {
width: 30%;
background-color: #FFEED5;
padding: 5px;
text-align: center;
}
.nav a {
text-decoration: none;
}
.css .scss

18. 3. Nesting Selectors
a {
color: blue;
&:hover {
color: green;
}
}
a {
color: blue;
}
a:hover {
color: green;
}
.css .scss

19. 4. Extending
// sass
.class1 {
padding: 16px 8px;
border: 1px solid gray;
color: red;
}
.class2 {
@extend .class1;
color: green;
}
// output: https://gist.github.com/Dosant/eb6d30125d706e466f36fd568e0f19bd

20. 5. Mixins
// sass
@mixin sexy-line-under{
border-bottom: 1px dashed #ffc0cb;
}
.some-element {
@include sexy-line-under;
}
////// or with arguments:
@mixin sexy-line-under($color){
border-bottom: 1px dashed $color;
}
.some-element {
@include sexy-line-under(#ffc0cb);
}
// output: https://gist.github.com/Dosant/4beaf156202d32b50f0ee8d2d97540d4

21. Demo

22. New Css Workflow
css browser
you're
here
sass
sass
compiler

23. Introduce Super CSS
css
super
css
you're
here
sass
sass
compiler
browser
• improve
• analize
• lint
compile

24. PostCSS
• PostCSS — just a JavaScript tool to read and
transform you css.
• PostCSS plugins — all the deal.
www.postcss.parts
• You can write your own plugin to transform ||
analize your css.
More on PostCSS
• https://github.com/postcss/postcss
• http://julian.io/some-things-you-may-think-about-postcss-and-you-might-be-wrong/
• https://habrahabr.ru/post/265449/
• https://medium.com/@svilen/getting-started-with-postcss-a-quick-guide-for-sass-
users-90c8b675d5f4#.a3chjrpgp

25. Demo
postCSS/autoprefixer
postCSS/doiuse

26. CSS Workflow
css
super
css
you're
here
sass
sass
compiler
browser
• improve
• analize
• lint
PostCSS
compile