New things in scss
Last updated
Was this helpful?
Last updated
Was this helpful?
CSS is still evoluting.
CSS 2 to CSS 3
From css to preprocessors
Post processor
CSS 4
Also the number of possibilities in css is high. And probably as me, you have missed some handy or cool stuff css3 or more have brought to css.
sass
grid with flexbox (allow vertical alignement)
grid unit less columns
rem font sizing
new small screen breakpoints
Flexbox
When you have a list of item and use a content tag to define content with css. And what if you want to add to this content the number of item in a list without changing the js.
Understand transition
Cubic bezier generator
Object fit allow to simulate cover property of background images It is good to make framing of an image or video inside an object...
Blend mode are photoshop like fusion mode (multiply, transfer...) that allow to have an opacity without flattening everything
Example for a video with a gradient with mix-blend-mode
The html :
The CSS :
Example with letter overlap
Allow to size depending of the screen size, ideal for full width
Flexbox based solutions
Classical solutions :
post css parts The module platform for post css
post css / css next
Plugin to use future of css now (a bit the equivalent of babel and typescript for the css)
post css / Autoprefixer
Set automatically browser prefix for you
post css web pack plugin
Flexbox nice tutorial
SASS MAPS
Sass modules
Learn grid with learning game
use of css grid in production right now ?
another tutorial on css grid
Learn flexbox with learning game
The are exactly for that.
More in depth tuto
(Can I use Sticky)[]
Sticky Bits
More in depth article to understand position sticky
End of for position sticky: supported by all expept IE.
Introduction post about )
