Reset and Normalize
提供了 PC 和移动端下的全局样式的重置，以及单个元素的常用属性重置功能。
全局的重置样式是在 normalize.css 的基础上进行了一层包装而成的。
@reset-global: [pc|mobile];
进行全局的样式重置
@reset-global pc;@reset-nested: [tabel|tabel-cell|list|font|boxModel]
在选择器内进行常用元素的样式重置
.table { ?@reset-nested tabel;}.table th,.table td { ?@reset-nested tabel-cell;}ul, ol { ?@reset-nested list;}.regular-font { ?@reset-nested font;}.box { ?@reset-nested boxModel;}Lasted CSS Syntax
变量
:root { ?--color: red;}div { ?color: var(--color);}选择器
怎么感觉像循环多一些？
@custom-selector :--heading h1, h3, h3, h4, h5, h6;article :--heading + p { ?margin-top: 0;}转化为
article h1 + p,article h3 + p,article h3 + p,article h4 + p,article h5 + p,article h6 + p { ?margin-top: 0;}媒体查询
@custom-media --small-viewport (max-width: 30em);@media (--small-viewport) { ?/* styles for small viewport */}转化为
@media (max-width: 30em) { ?/* styles for small viewport */}嵌套
a, b { ???color: red; ???& c, & d { ???????color: white; ???} ???& & { ???????color: blue; ???} ???&:hover { ???????color: black; ???} ???@media (min-width: 30em) { ???????color: yellow; ???????@media (min-device-pixel-ratio: 1.5) { ???????????color: green; ???????} ???}}转化为
a, b { ???color: red;}a c, a d, b c, b d { ???color: white;}a a, b b { ???color: blue;}a:hover, b:hover { ???color: black;}@media (min-width: 30em) { ???a, b { ???????color: yellow; ???}}//下面这个转化结果应该是有问题@media (min-width: 30em) and (min-device-pixel-ratio: 1.5) { ???color: green;}选择器匹配
p:matches(:first-child, .special) { ?color: red;}p:not(:first-child, .special) { ?color: red;}转化为
p:first-child, p.special { ?color: red;}p:not(:first-child), p:not(.special) { ?color: red;}Short Property
Size
提供了 size 属性来将 width 和 height 两个属性的值写在一起。
.icon { ???size: 48px;}转化为
.icon { ???width: 48px; ???height: 48px;}Position
我们可以在 position 的属性值之后以顺时针的顺序来接着编写 top、right、bottom、left 这几个值。其中如果不需要声明的属性我们可以用 “*” 号来跳过。
.banner { ???position: fixed 0 0 *;}转化为
.banner { ???position: fixed; ???top: 0; ???right: 0; ???left: 0;}Color
可以接受两个值，这样我们可以同时将 color 和 background-color 的值写在一起
.canvas { ???color: #abccfc #212231;}转化为
.canvas { ???color: #abccfc; ???background-color: #212231;}Font-Size
可以接受两个值，这样我们可以同时将 font-size 和 line-height 的值写在一起
.heading { ???font-size: 1.25em 2;}转化为
.heading { ???font-size: 1.25em; ???line-height: 2;}Border
允许我们以顺时针的顺序来同时编写 top、right、bottom、left 这几个 border 的值。
.container { ???border: 1px 2px #343434;}转化为
.container { ???border-width: 1px 2px; ???border-color: #343434;}Grid
提供了流体网格快捷声明功能。
@neat-outer-container; @neat-span-columns 6;
.grid-row-fluid { ?@neat-outer-container;}.grid-col-6 { ?@neat-span-columns 6;}转化为
.grid-row-fluid{ ?max-width:64em; ?margin-left:auto; ?margin-right:auto; ?*zoom:1;}.grid-row-fluid:before, .grid-row-fluid:after{ content:" "; display:table; }.grid-row-fluid:after{ clear:both; }.grid-col-6{ ?display:block; ?float:left; ?margin-right:2.35765160%; ?width:48.82117420%;}.grid-col-6:last-child{ margin-right:0; }@neat-omega;
多行网格中可以使用 @neat-omega; 来声明该列是当前行的最后一列。但要注意的是，在没有带值的情况下，其只是简单地给该列设置 margin-right: 0; 来移除右侧的间距。
@neat-row table; @neat-span-columns 6 table;
table式网格中，每一列之间是没有间隔的。
媒体查询
.grid-row-fluid { ???@neat-span-columns 6; ???@media (max-width: 800px) { ?????@neat-span-columns 4; ???}}基础图形
rect
通过 rect 属性来声明一个矩形。
rect: [width] [height] [background-color]
.rect-a { ?rect: 30px 50px #ff0;}.rect-b { ?rect: 30px * #ff0;}转
.rect-a { ?width: 30px; ?height: 50px; ?background-color: #ff0;}.rect-b { ?width: 30px; ?background-color: #ff0;}circle
通过 circle 属性来声明一个圆形。
circle: [diameter] [background-color]
.circle-a { ?circle: 50px #ff0;}.circle-b { ?circle: 50px *;}转为
.circle-a { ?width: 50px; ?height: 50px; ?border-radius: 50%; ?background-color: #ff0;}.circle-b { ?width: 50px; ?height: 50px; ?border-radius: 50%;}triangle
通过 triangle 属性来绘制一个等腰直角三角形。
triangle: [size] [direction] [color]
size:高
.triangle-a { ?triangle: 5px top #ff0;}转化为
.triangle-a { ?display: inline-block; ?width: 0; ?height: 0; ?border: solid transparent; ?border-width: 5px; ?border-bottom-color: #ff0;}utils
salad-postcss
原文地址：https://www.cnblogs.com/qq3279338858/p/8867165.html