• Contents

BEM 规范

/* ListingCard.css */
.ListingCard { }
.ListingCard--featured { }
.ListingCard__title { }
.ListingCard__content { }

1px 线

.fp-wrap--list {
  width: 165px;
  box-sizing: border-box;
  margin-bottom: 9px;
  background: rgba(255, 255, 255, 1);
  position: relative;
  &::after {
    content: '';
    width: 200%;
    height: 200%;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid rgba(230, 230, 230, 1);
    border-radius: 16px;
    transform: scale(0.5);
    transform-origin: top left;
  }
}

background 属性

background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: top right;

可以简写成一行声明：

background: #000 url(images/bg.gif) no-repeat top right;

小程序 Button 重置样式

.button-view {
  margin: 0;
  padding: 0;
  border-radius: 0;
  border: unset;
  line-height: unset;
  background: none;
  text-align: left;
  box-sizing: unset;
  overflow: unset;
  font-size: unset;
}

省略号…

一行

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;