最近看张鑫旭css,就像发现了新大陆
简写1,以前我们实现绝对定位或者fixed定位的时候肯定写过这样的代码块
left: 0;
top: 0;
right: 0;
bottom: 0;
看了张鑫旭的css逻辑属性简写之后发现这四句css仅一句css就可以搞定,即
inset: 0;
如果只是水平拉伸则可写
inset-inline: 0;
表示 left:0;right:0
inset-block:0;
则表示top:0;bottom:0
简写2,项目中margin,上下边距我们常写的方式是
margin-top:10px;
margin-bottom:10px;
或者
margin:10px 0;
使用margin-block表示上下margin-inline表示左右,以上代码可以这样写
margin-block:10px;
即可实现
简写3,border-block见上面的margin知意,即上下边框的样式,border-inline即左右边框
不得不说张鑫旭带我打开了css新世界
在项目中使用scss时封装了一些常用的css
// 边框颜色
$borderColor: #ddd;
// 字体粗细
$weightMap: 100, 200, 300, 400, 500, 600, 700, 800, 900, bold, normal;
// 方向
$directionMap: top, right, bottom, left;
// 浮动、对齐方式
$alignMap:left,center,right;
/* 换行... */
.ellipsis_txt {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@for $val from 1 through 6 {
.warp-#{$val}{
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: #{$val};
-webkit-box-orient: vertical;
}
}
/***
* 《字体大小》
* 示例
* .fs-12 {font-size:12px;}
*/
@for $val from 12 through 80 {
.fs-#{$val} {
font-size: #{$val}px;
}
}
/***
* 《字体加粗》
* 示例
* .fw-bold {font-weight: bold;}
*/
@each $val in $weightMap {
.fw-#{$val} {
font-weight: #{$val};
}
}
/***
* 《文字对齐方式》
* 示例
* .text-left {text-align: left;}
*/
@each $val in $alignMap {
.text-#{$val} {
text-align: #{$val};
}
}
/***
* 《浮动方式》
* 示例
* .float-left {float: left;}
*/
@each $val in $alignMap {
.float-#{$val} {
float: #{$val};
}
}
/***
* 《边距:内边距与外边距》
* 示例1
* .mar-10 {margin:10px;}
* 示例2
* .mt-10 {margin-top:10px;}
* 示例3
* .pad-10 {padding:10px;}
* 示例4
* .pt-10 {padding-top:10px;}
*/
// @each $val in 1, 2, ..., 99, 100 {
@for $val from 1 through 100 {
.mar-#{$val} {
margin: #{$val}px;
}
.pad-#{$val} {
padding: #{$val}px;
}
.ml-#{$val} {
margin-left: #{$val}px;
}
.mr-#{$val} {
margin-right: #{$val}px;
}
.mt-#{$val} {
margin-top: #{$val}px;
}
.mb-#{$val} {
margin-bottom: #{$val}px;
}
.pl-#{$val} {
padding-left: #{$val}px;
}
.pr-#{$val} {
padding-right: #{$val}px;
}
.pt-#{$val} {
padding-top: #{$val}px;
}
.pb-#{$val} {
padding-bottom: #{$val}px;
}
}
/***
* 《flex-jestify》
* 示例
* .flex-justify-start {display: flex;align-items: center;justify-content: flex-start;}
*/
@each $key, $val in (start: flex-start, end: flex-end, center: center, between: space-between, around: space-around) {
.flex-justify-#{$key} {
display: flex;
align-items: center;
justify-content: #{$val};
}
}
/***
* 《flex-align》
* 示例
* .flex-align-start {display: flex;justify-content: center;align-items: flex-start;}
*/
@each $key, $val in(start: flex-start, end: flex-end, center: center, baseline: baseline, stretch: stretch) {
.flex-align-#{$key} {
display: flex;
justify-content: center;
align-items: #{$val};
}
}
/***
* 《边框及圆角》
* 示例1
* .border-1 {border:1px solid #ddd}
* 示例2
* .border-top-1 {border-top:1px solid #ddd}
* 示例3
* .border-radius-1 {border-radius:1px;}
* 示例4
* .border-radius-top-1 {border-radius-top:1px 0 0 0;}
*/
@mixin set-border($key, $val) {
// 实线
.border-#{$key}-#{$val} {
border-#{$key}: #{$val}px solid $borderColor;
}
// 虚线
.border-dashed-#{$key}-#{$val} {
border-#{$key}: #{$val}px dashed $borderColor;
}
// 斑点线
.border-dotted-#{$key}-#{$val} {
border-#{$key}: #{$val}px dotted $borderColor;
}
}
@each $key in $directionMap {
@for $val from 1 through 10 {
@if $key==top {
// 实线
.border-#{$val} {
border: #{$val}px solid $borderColor;
}
// 虚线
.border-dashed-#{$val} {
border: #{$val}px dashed $borderColor;
}
// 斑点线
.border-dotted-#{$val} {
border: #{$val}px dotted $borderColor;
}
// 圆角
.border-radius-#{$val} {
border-radius: #{$val}px;
}
// 上左
.border-radius-#{$key}-#{$val} {
border-radius: #{$val}px 0 0 0;
}
} @else if $key== right {
// 上右
.border-radius-#{$key}-#{$val} {
border-radius: 0 #{$val}px 0 0;
}
} @else if $key== bottom {
// 下右
.border-radius-#{$key}-#{$val} {
border-radius: 0 0 #{$val}px 0;
}
} @else if $key== left {
// 下左
.border-radius-#{$key}-#{$val} {
border-radius: 0 0 0 #{$val}px;
}
}
@include set-border($key, $val);
}
}