初探原子css
发表于: 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: '';
}
}