模块
重置模块
在 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;}模块（sass）
/* Before */@import "partials/base"; /* Contents of partials/_base.css: `body { background: black; }` *//* After */body { background: black; }选择器
嵌套（多选择器）
&
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;}扩展（单选择器）
:matches() :not()
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;}选择（sass）
/* before */.notice--clear { ???@if 3 < 5 { ???????background: green; ???} ???@else { ???????background: blue; ???}}/* after */.notice--clear { ???background: green;}循环
@custom-selector :
@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;}@for（sass）
/* before */@for $i from 1 to 3 { ???.b-$i { width: $(i)px; }}/* after */.b-1 { ???width: 1px}.b-2 { ???width: 2px}.b-3 { ???width: 3px}属性
变量（属性值）
:root
设置变量
:root { ?--color: red;}div { ?color: var(--color);}$（sass）
$blue: #056ef0;$column: 200px;.menu { ???width: calc(4 * $column);}.menu_link { ???background: $blue; ???width: $column;}/* after */.menu { ???width: calc(4 * 200px);}.menu_link { ???background: #056ef0; ???width: 200px;}@（sass）
内部变量
/* Before */.heading { ???margin: 20px; ???padding: @margin;}/* After */.heading { ???margin: 20px; ???padding: 20px;}扩展（属性）
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;}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;}键值
媒体查询
@custom-media
@custom-media --small-viewport (max-width: 30em);@media (--small-viewport) { ?/* styles for small viewport */}转化为
@media (max-width: 30em) { ?/* styles for small viewport */}模块
@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式网格中，每一列之间是没有间隔的。
Ellipsis
文本超长溢出省略号，如果参数 rows 省略，则默认解析为单行溢出，如果传入 rows 参数，则会被解析为多行溢出省略
IE和火狐有兼容性问题
.ellipsis { ?@utils-ellipsis;}.ellipsis2 { ?@utils-ellipsis 3;}转化为
.ellipsis { ?overflow: hidden; ?text-overflow: ellipsis; ?white-space: nowrap;}.ellipsis2 { ?overflow: hidden; ?text-overflow: ellipsis; ?display: -webkit-box; ?-webkit-box-orient: vertical; ?-webkit-line-clamp: 3;}Clearfix
建立 BFC 清除元素内部的浮动，使元素获得应有的高度。
防止了坍塌和浮动
.clearfix { ?@utils-clearfix;}转化为
.clearfix {}.clearfix:before,.clearfix:after { ???display: table; ???content: "";}.clearfix:after { ???clear: both}@utils-irt
在元素中隐藏文字
.irt { ?@utils-irt;}转化为
.irt { ?font: 0/0 none; ?text-shadow: none; ?color: transparent;}User Select
设定页面元素文本是否可供选择
@utils-user-select [none|text]
.usn { ?@utils-user-select none;}转化为
.usn { ?-moz-user-select: none; ?-webkit-user-select: none; ?-ms-user-select: none;}Disabled
设定元素在 disabled（禁用） 状态时的 ui 状态
@utils-disabled [background-color] [border-color] [color];
.disabled { ?@utils-disabled #ccc #f00 #333;}转化为
.disabled { ?background-color: #ccc; ?border-color: #f00; ?color: #333; ?cursor: default; ?pointer-events: none;}Vertical Center
利用伪元素的方式，让子元素实现垂直居中
.vam-box { ?@utils-vertical-center;}转化为
.vam-box { ???vertical-align: middle ???//例子中遗漏了？}.vam-box:after { ???display: inline-block; ???content: ""; ???height: 100%; ???vertical-align: middle}自定义模块（sass）
@define-mixin（带参数）
/* before */@define-mixin icon $name { ???padding-left: 16px; ???&::after { ???????content: ""; ???????background-url: url(/icons/$(name).png); ???}}.search { ???@mixin icon search;}/* after */.search { ???padding-left: 16px;}.search::after { ???content: ""; ???background-url: url(/icons/search.png);}@define-extend（不带参数）
@define-extend bg-green { ???background: green;}.notice--clear { ???@extend bg-green;}/* after */.notice--clear { ???background: green;}/* before */@define-extend bg-green { ???background: green;}.notice--clear { ???@extend bg-green;}/* after */.notice--clear { ???background: green;}salad~postcss外
原文地址：https://www.cnblogs.com/qq3279338858/p/8870573.html