CSS Workflow. Pre & Post

CSS Workflow
pre & post processing

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

CSS Workflow
css browser
you're
here

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?

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

Little Silly Demo 1
small_example.scss

Little Silly Demo 2
Show them compiled bootstrap grid.

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

• 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?

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

.scss vs .sass
???
great link 3

$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

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

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/

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

.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

a { 
color: blue;
&:hover {
color: green;
}
}
a {
color: blue;
}
a:hover {
color: green;
}
.css .scss

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

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

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

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

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

Demo
postCSS/autoprefixer
postCSS/doiuse

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

CSS Workflow. Pre & Post

Related slideshows

More Related Content

CSS Workflow. Pre & Post