Pre-processor, what!?

https://www.bitdegree.org/tutorials/css-preprocessor/

• Variables
• Nesting
• Mixins
• Functions
• Modules

Comparing features

Variables

SASS variables are replaced with their values as the preprocessor produces its CSS output.

CSS custom properties are evaluated by the browser at runtime.

https://intu.io/blog/sass-css-custom-properties

https://codepen.io/machal/pen/rGWdpV

https://codepen.io/Shokeen/pen/ZWyvmj

Change on media queries

 Theming with custom properties 

https://caniuse.com/#feat=css-variables

Nesting

https://www.sitepoint.com/beware-selector-nesting-sass/

https://drafts.csswg.org/css-nesting-1/

https://www.w3.org/TR/selectors-4/#matches-pseudo

https://css-tricks.com/almanac/selectors/i/is/#hey-isnt-that-like-css-preprocessing

https://caniuse.com/#feat=css-matches-pseudo

Mixins

https://sass-lang.com/documentation/at-rules/mixin

https://hashnode.com/post/creating-native-css-mixins-with-apply-rule-cinh1j54c01hla153n9x73770

https://tabatkins.github.io/specs/css-apply-rule/

https://caniuse.com/#feat=css-apply-rule

https://sass-lang.com/documentation/at-rules/mixin

A lot of problems that we used to solve with mixins have a better native solution.

https://twitter.com/SaraSoueidan/status/1299022181138075653

functions

https://sass-lang.com/documentation/at-rules/function

https://css-tricks.com/complete-guide-to-css-functions/

url(), attr(), calc(), lang(), :not(), rgb(), rgba(), hsl(), hsla(), :nth-child(), :nth-last-child(), :nth-of-type(), :nth-last-of-type(), cubic-bezier(), path(), steps(), scaleX(), scaleY(), scaleZ(), scale3d(), scale(), translateX(), translateY(), translateZ(), translate3d(), translate(), perspective(), rotateX(), rotateY(), rotateZ(), rotate3d(), rotate(), skewX(), skewY(), skew(), brightness(), blur(), contrast(), grayscale(), invert(), opacity(), saturate(), sepia(), drop-shadow(), hue-rotate(), linear-gradient(), repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient(), conic-gradient(), repeating-conical-gradient, fit-content(), minmax(), repeat(), circle(), ellipse(), polygon(), inset(), element(), image-set(), ::slotted()

annotation(), counter(), counters(), cross-fade(), dir(), env(), has(), image(), clamp(), :host(), :host-context(), :is(), :where(), max(), min(), :nth-col(), :nth-last-col(), symbols()

matrix(), matrix3d(), rect(), target-counter(), target-counters(), target-text(), character-variant(), styleset(), stylistic(), format(), leader(), local(), ornaments(), swash()

93 CSS native functions

https://css-tricks.com/complete-guide-to-css-functions/

18 in process to be release, and 14 are deprecated

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#Custom_property_fallback_values

Custom Properties Fallback values

Modules

https://sass-lang.com/documentation/at-rules/use

when you use @import to include extra CSS files it creates extra HTTP requests, extra requests for the browser of your visitor to deal with.

https://www.giftofspeed.com/avoid-using-css-import/

But is really this kind of modules that we want?

This is just concatenation of CSS files and for that, we can use other solutions that come with our bundlers.

https://github.com/webpack-contrib/mini-css-extract-plugin

mini-css-extract-plugin

https://github.com/mariocasciaro/gulp-concat-css

gulp-concat-css

https://bundlers.tooling.report/non-js-resources/css/

CSS Modules for scoping, and CSS imports in modern bundlers

It is worth it?

https://2019.stateofcss.com/technologies/pre-post-processors/#tools-section-overview

https://ashleynolan.co.uk/blog/frontend-tooling-survey-2019-results#css-processors

https://blog.logrocket.com/frontend-in-2017-the-important-parts-4548d085977f/

If we don't start to use the new CSS today it will happen like happened with HTML5, ES2015 and Flexbox.

Always bet on standards solutions

PostCSS

https://postcss.org/

https://github.com/browserslist/browserslist

package.json

https://postcss.org/

https://preset-env.cssdb.org/features

https://postcss.org/

https://css-tricks.com/css-modules-part-3-react/