Download as PDF, PPTX
![[ruksæk]
rucksack
4](https://image.slidesharecdn.com/rucksack-css-160709144422/85/Rucksack-css-4-320.jpg)
![Installation & Usage
postcss: function() {
return {
plugins: rucksack([autoprefixer])
};
}
webpack.config.js
PostCSS for Webpack
15](https://image.slidesharecdn.com/rucksack-css-160709144422/85/Rucksack-css-15-320.jpg)
![[ruksæk]
rucksack
4](https://image.slidesharecdn.com/rucksack-css-160709144422/75/Rucksack-css-4-2048.jpg)
![Installation & Usage
postcss: function() {
return {
plugins: rucksack([autoprefixer])
};
}
webpack.config.js
PostCSS for Webpack
15](https://image.slidesharecdn.com/rucksack-css-160709144422/75/Rucksack-css-15-2048.jpg)
Uploaded byAnna Su
Rucksack 裝滿神奇 css 的後背包
Rucksack is a PostCSS plugin that provides CSS superpowers like responsive typography, shorthand positioning, hex/RGBA shortcuts, and all the easings. It is modular, adds no bloat, and works with PostCSS. The document demonstrates features like responsive font sizes, shorthand for absolute/relative positioning, pseudo-selectors for quantity, and expanding transition easings. Rucksack aims to make CSS development fun again through these conveniences.
Rucksack 裝滿神奇 css 的後背包
- 1. PIXNET F2E ❤Anna Su CSS 2016/07/06 in
- 2.
- 3.
- 4.
- 5. A little bagof CSS superpowers sparknotes 5
- 6.
- 7.
- 8. PostCSS ecosystem crescendo it's builton PostCSS 8 rucksack
- 10.
- 11. it doesn't addany bloat 11
- 12. it's built onPostCSS it's modular it doesn't add any bloat 12
- 13.
- 14.
- 15. Installation & Usage postcss:function() { return { plugins: rucksack([autoprefixer]) }; } webpack.config.js PostCSS for Webpack 15
- 16.
- 17.
- 18. .foo { font-size: responsive14px 50px; font-range: 480px 800px; } input Responsive Typography 18
- 19. html { font-size: calc(14px+ 36 * ((100vw - 480px) / 320)); } @media screen and (max-width: 480px) { html { font-size: 14px; } } @media screen and (min-width: 800px) { html { font-size: 50px; } } output Responsive Typography 19
- 20.
- 21.
- 22. Shorthand Positioning .box1 { position:absolute 0; } .box2 { position: relative 20% auto; } .box1 { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .box2 { position: relative; top: 20%; right: auto; bottom: 20%; left: auto; } input output 22
- 23. Shorthand Positioning .box3 { position:fixed 0 20px 10px; } .box3 { position: fixed; top: 0; right: 20px; bottom: 10px; left: 20px; } input output 23
- 24.
- 25. Hex RGBA Shortcuts input output background-color:rgba(#2196F3, 0.3); background-color: rgba(33, 150, 243, 0.3); 25
- 26.
- 27. Quantity Pseudo-Selectors input output li&:at-least(5){ color: blue; } li:nth-last-child(n+4), li:nth-last-child(n+4) ~ li { color: blue; } 27
- 28.
- 29. All The Easings input output transition:all 250ms ease-in-quint; transition: all 250ms cubic-bezier(0.755, 0.05, 0.855, 0.06); 29
- 30. Rucksack makes CSSdevelopment fun again
- 31. Reference rucksack https://simplaio.github.io/rucksack/ PostCSS: the Futureafter Sass and Less https://ai.github.io/about-postcss/en/ TJ Holowaychuk Github https://github.com/tj/frontend-boilerplate
- 32.