notes/web/css

Sass, Less 以及 Postcss

Sass 和 Less

Sass 和 Less 都是预先编译的 CSS。

参见 为您详细比较三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus，如果你已经了解了足够的 CSS 的话，看完这篇文章，基本上就完全可以了解预先编辑的全部内容了。

Postcss

Postcss 是指使用 javascript 编译 CSS 的技术，与前面的 sass 和 less 预先编译刚好像相反，这个是预后编译 css 的技术，故名曰 postcss。

但另一方面，由于 node.js 这样的后端技术的存在，postcss 也可以作为预处理器来使用，或者说，postcss 之所以如此火爆，正是由于他完全可以胜任并且取代 sass 和 less 了。

CSS-in-js

css-in-js 就是前面说的 postcss 的第一个应用方式，举个栗子：在网站上使用中文字体以后，需要定义 font-family ，但由于浏览器坑爹的渲染方式，我们经常会使用一些 fallback 来适配不同的平台和不同的操作系统，由于不同用户预装字体的不同，这样又会使得有一些网页在某些特定用户那里排版乱掉。

那么我们的第一个 demo 就是利用 postcss 来渲染不同平台下的字体吧。

Sticky footer

如何确保 footer 在最下面呢？

https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

http://mystrd.at/modern-clean-css-sticky-footer/

注：使用 flexbox 可以解决

SVG Scale without moving location

可以通过 transform-box 或者 transform-orgin 来实现

https://stackoverflow.com/questions/24173560/svg-scale-without-moving-location