初探原子css

前端 0 528 0
发表于: 2022-10-31 18:26:17

简介: windicss、tailwindcss、unocss

前言

在讨论原子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: '';
  }
}