标签：util   ali   first   idt   red   cto   ble   基础   direction   

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

标签：util   ali   first   idt   red   cto   ble   基础   direction   

原文地址：https://www.cnblogs.com/qq3279338858/p/8867165.html