标签：样式   order   port   1.5   sas   禁用   use   tom   没有   

模块

重置模块

在 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外

标签：样式   order   port   1.5   sas   禁用   use   tom   没有   

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