sf-atom-css v0.1.3
0 安装
npm i sf-atom-css
Vue-cli <= @2.9.3使用
npm i style-resources-loader -D
build/utils.js
less: generateLoaders('less').concat(
{
loader: 'style-resources-loader',
options: {
patterns: [path.join(__dirname, "..", 'node_modules/sf-atom-css/src/sfAtomCommon.less')]
}
}
),
sfAtomCommon.less 中引入了sfAtomBase.less,不需要再每一个vue文件引入sfAtomCommon.less和sfAtomBase.less了。
Vue-cli >= @3.0.0使用
vue add style-resources-loader
vue.config.js(没有则自己再根目录添加)
const path = require("path");
module.exports = {
pluginOptions: {
'style-resources-loader': {
patterns: [
path.join(__dirname, 'node_modules/sf-atom-css/src/sfAtomCommon.less')
],
preProcessor: 'less'
}
}
};
1 初衷
a.开发者在阅读HTML时候能够得到更多的信息,如果你希望你将span
的display
设置变为block
,在HTML
<span block></span>
会比在css中更直观。
你是否经历过在css找寻哪个元素的postition
不为static
,哪个元素的overflow
设置为auto
呢。
b.帮助开发者规避掉一些可能忽视的陷阱,比如子元素的margin-top
影响了父元素,浮动布局导致的高度坍塌,这些通常是不希望发生的。
c.封装一些基本的功能函数,比如transition
当多个属性的一样时,可能会出现如下错误代码,transition:width , height 0.25s linear
,而写成transition:width 0.25s linear , height 0.25s linear
又会给调试带来麻烦。
d.避免重复的编写,像文本缩略、清除浮动、felx布局,完全可以借助Vue、React这样的框架,达到HTML布局语义化的同时,封装基本的css功能。
e.不做过多的封装,减少开发者在html、css中来回切换,只做简易封装。
2 文档
sfAtomBase.less
提供一些函数
base
.square
.square(40px);
width: 40px;
height: 40px;
.circle(40px)
width: 40px;
height: 40px;
border-radius: 50%;
.vertical
.vertical > .line-height(40px);
height: 40px;
line-height: 40px;
.property-value
.property-value(@propertyList,@valueList,@sign:~"")
@sign 连接符号 列入 > &
.property-value(overflow overflow-x, hidden auto );
[overflow="hidden"] {
overflow: hidden;
}
[overflow="auto"] {
overflow: auto;
}
[overflow-x="hidden"] {
overflow-x: hidden;
}
[overflow-x="auto"] {
overflow-x: auto;
}
.transition
.same-value(@propertys,@values)
.transition > .same-value(opacity color, 0.1s ease);
transition: opacity 0.1s ease, color 0.1s ease;
.animation
.keyframes(@value;@content)
.animation > .keyframes(ripple 0.5s linear, {100%{opacity: 0;}});
p {
animation: ripple 0.5s linear;
}
@keyframes ripple {
100% {
opacity: 0;
}
}
.interval(@name,@number,@rest)
.animation > .interval(p, 3, animation-delay 0.1s width 20px);
.p3 {
width: 60px;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.p2 {
width: 40px;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.p1 {
width: 20px;
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
shape
.arc(@direction,@style,@radius:50%)
.shape > .arc (left top right, 20px solid red, 0);
border: 20px solid transparent;
border-right: 20px solid red;
border-top: 20px solid red;
border-left: 20px solid red;
border-radius: 0;
sfAtomCommon.less
dispaly
[inline-block] {
display: inline-block;
}
[block] {
display: block;
}
position
[relative] {
position: relative;
}
[absolute] {
position: absolute;
}
[fixed] {
position: fixed;
}
overflow
.property-value(overflow overflow-x overflow-y, hidden auto visible);
.BFC
[BFC] {
&::before {
//防止子元素的margin-top影响到父元素
display: table;
content: " ";
}
}
.FlexWrapper
.FlexWrapper {
display: flex;
/*
justify-content: flex-start(默认值) | flex-end | center | space-between | space-around;
*/
.property-value(justify-content, flex-end center space-between space-around,~"&");
/*
align-items: flex-start | flex-end | center | baseline | stretch(默认值);
*/
.property-value(align-items, flex-start flex-end center baseline stretch,~"&");
/*
align-content: flex-start | flex-end | center | space-between | space-around | stretch(默认值);
*/
.property-value(align-content, flex-start flex-end center space-between space-around stretch,~"&");
// flex-direction start
// flex-direction: row(默认值) | row-reverse | column | column-reverse;
&[row-reverse] {
flex-direction: row-reverse;
}
&[column] {
flex-direction: column;
}
&[column-reverse] {
flex-direction: column-reverse;
}
/*
flex-wrap: nowrap(默认值) | wrap | wrap-reverse;
*/
&[wrap] {
flex-wrap: wrap;
}
&[wrap-reverse] {
flex-wrap: wrap-reverse;
}
}
.FloatWrapper
.FloatWrapper {
> .left {
float: left;
}
> .right {
float: right;
}
> [left] {
float: left;
}
> [right] {
float: right;
}
&:after {
//清除浮动 防止高度塌陷
display: block;
clear: both;
content: " ";
}
}
.InlineBlockWrapper
/*
InlineBlockWrapper
*/
.InlineBlockWrapper {
/*
解决多余空白最好的办法是设置 font-size: 0;
*/
font-size: 0;
> :nth-child(n) {
vertical-align: middle;
}
}
.TableWrapper
/*
TableWrapper
*/
.TableWrapper {
/*
一个元素宽度固定 另一个元素填充剩余宽度
布局为table-cell的元素是无法显示省略号的
使用其的目的也在于完整的显示信息
设定未两个元素 cell 固定宽度 cell=100% 余下宽度 方便垂直居中
<div cell>
<div style="width:80px"></div>
</div>
<div cell="100%"></div>
*/
display: table;
width: 100%;
> [cell] {
display: table-cell;
}
> [cell="100%"] {
width: 100% !important;
}
> :nth-child(n) {
vertical-align: middle;
}
}
.TextWrapper
.TextWrapper {
&[ellipsis] {
overflow: hidden;
//注意display的值为 block、inline-block、list-item、table-caption、flow-root才会起作用
white-space: nowrap;
text-overflow: ellipsis;
}
&[line-ellipsis] {
display: -webkit-box;
overflow: hidden;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
&[break] {
// 只对英文起作用,以字母作为换行依据。
white-space: pre-wrap;
// 只对英文起作用,以单词作为换行依据。
word-wrap: break-word;
// 只对中文起作用,强制换行。
word-break: break-all;
}
}
z-index管理
/*
管理z-index的最好办法是减少z-index值的范围
实际上,基于相同z-index后来居上的原则,也不需要过多的值
尽量使用小的z-index
.z-index-1-0 中 1代表位数
位数相同时
0 最小
1 中间值
2 最大值
*/
[z-index-1-0]{
z-index: 1
}
[z-index-1-1]{
z-index: 5
}
[z-index-1-2]{
z-index: 9;
}
[z-index-2-0]{
z-index: 10
}
[z-index-2-1]{
z-index: 50
}
[z-index-2-2]{
z-index: 99;
}
[z-index-3-0]{
z-index: 100
}
[z-index-3-1]{
z-index: 500
}
[z-index-3-2]{
z-index: 999;
}
[z-index-4-0]{
z-index: 10000
}
[z-index-4-1]{
z-index: 15000
}
[z-index-4-2]{
z-index: 19999;
}