前言

在讨论原子css的时候，首先我们先看看以前的css方案，看完之后再对比原子css的好处~

看之前可以看看css优先级：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity，对下文其实也挺重要的

sass

@import

Sass 扩展了 CSS 的@import规则，能够导入 Sass 和 CSS 样式表，提供对mixins、函数和变量的访问，并将多个样式表的 CSS 组合在一起。与普通的 CSS 导入不同，后者要求浏览器在呈现页面时发出多个 HTTP 请求，Sass 导入完全在编译期间处理。

common.scss:

// flex的水平垂直居中
.flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}

// 解决图片缩小模糊问题
.imgBlur {
  -ms-interpolation-mode: nearest-neighbor;

  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

// 单行省略号
.singleEllipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// ltr
.ltr {
  direction: ltr;
}

// rtl
.rtl {
  direction: rtl;
}

// 置灰
.grayscale {
  filter: grayscale(100%);
}

// float清除浮动
.clearfix {
  &:after {
    display: block;
    clear: both;
    content: '';
  }
}

index.scss:

@import './common.scss';
.header {
  width: 100px;
  @extend .singleEllipsis;
}

编译index.scss结果：

.flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}

.imgBlur {
  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

.singleEllipsis, .header {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ltr {
  direction: ltr;
}

.rtl {
  direction: rtl;
}

.grayscale {
  filter: grayscale(100%);
}

.clearfix:after {
  display: block;
  clear: both;
  content: "";
}

.header {
  width: 100px;
}

extend

sass源码1（先定义要extend类，再使用）：

.singleEllipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}

.clearfix {
  &:after {
    display: block;
    clear: both;
    content: '';
  }
}

.header {
  width: 100px;
  @extend .singleEllipsis;
  @extend .flexCenter;
  @extend .clearfix;
}
.logo {
  width: 50px;
  @extend .singleEllipsis;
  @extend .flexCenter;
  @extend .clearfix;
}
.footer {
  width: 100vw;
  @extend .singleEllipsis;
  @extend .flexCenter;
  @extend .clearfix;
}

sass源码1编译结果：

.singleEllipsis, .footer, .logo, .header {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flexCenter, .footer, .logo, .header {
  display: flex;
  align-items: center;
  justify-content: center;
}

.clearfix:after, .footer:after, .logo:after, .header:after {
  display: block;
  clear: both;
  content: '';
}

.header {
  width: 100px;
}

.logo {
  width: 50px;
}

.footer {
  width: 100vw;
}

编译结果跟顺序有关，有css优先级问题

先定义要extend的类，再使用header，logo，footer的话，其实后面header，logo，footer的规则优先级比extend的高（不考虑!important）

sass源码2（先使用，再定义extend类）：

.header {
  width: 100px;
  @extend .singleEllipsis;
  @extend .flexCenter;
  @extend .clearfix;
}
.logo {
  width: 50px;
  @extend .singleEllipsis;
  @extend .flexCenter;
  @extend .clearfix;
}
.footer {
  width: 100vw;
  @extend .singleEllipsis;
  @extend .flexCenter;
  @extend .clearfix;
}

.singleEllipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}

.clearfix {
  &:after {
    display: block;
    clear: both;
    content: '';
  }
}

初探原子css

前言

sass

@import

extend