css优美写法及一些常用样式封装

最近看张鑫旭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);
    }
}