Rucksack 裝滿神奇 css 的後背包

PIXNET F2E ❤ Anna Su

CSS 2016/07/06 in

Anna Sui2

3

[ruksæk] rucksack

4

A little bag of CSS superpowers

sparknotes

5

TJ

TJ Holowaychuk

6

What is rucksack?7

PostCSS ecosystem

crescendo

it's built on PostCSS

8

rucksack

it's modular

10

it doesn't add any bloat

11

it's built on PostCSS

it's modular

it doesn't add any bloat

12

Installation & Usagehttp://simplaio.github.io/rucksack/docs/#usage

Installation & Usage

14

Installation & Usage

postcss: function() {

return {

plugins: rucksack([autoprefixer])

};

}

webpack.config.js

PostCSS for Webpack

15

Demo

16

Responsive Typography

17

.foo { font-size: responsive 14px 50px; font-range: 480px 800px;}

input

Responsive Typography

18

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

Responsive Typography

20

Shorthand Positioning

21

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

Shorthand Positioning

.box3 {

position: fixed 0 20px 10px;

}

.box3 { position: fixed; top: 0; right: 20px; bottom: 10px; left: 20px;}

input output

23

Hex Rgba Shortcuts

24

Hex RGBA Shortcutsinput

output

background-color: rgba(#2196F3, 0.3);

background-color: rgba(33, 150, 243, 0.3);

25

Quantity Pseudo-Selectors

26

Quantity Pseudo-Selectorsinput output

li&:at-least(5) {

color: blue;

}

li:nth-last-child(n+4),

li:nth-last-child(n+4) ~ li {

color: blue;

}

27

All The Easings

28

All The Easingsinput

output

transition: all 250ms ease-in-quint;

transition: all 250ms cubic-bezier(0.755, 0.05, 0.855, 0.06);

29

Rucksack makes CSS development fun again

Referencerucksack https://simplaio.github.io/rucksack/

PostCSS: the Future after Sass and Less https://ai.github.io/about-postcss/en/

TJ Holowaychuk Github https://github.com/tj/frontend-boilerplate

Thanks ❤