github
使用@media screen
方式直接生成class,不占用伪类位置,无需配置loader(当然基本的css-loader和scss-loader还是要的).
支持生成任意名字,颜色(#和rgba)和线条类型的mixin,通过@include 使用,方便灵活,生成的css冗余小,scss热更新模式下编译速度快.
设置了2种mixin引用:
1.可独立设置class名字的borderCreator
2.可在其他class内include 的 borderInsideCreator
下文代码中会有如何使用的示例,喜欢的话,打个星吧!
如果是class模式,需要在html中手动加上生成的class,暂时只支持一次生成一边或全部边框,不支持一次生成多个边框,例如border-left+border-right
// border1px.scss
@mixin borderCreator($name, $direction, $type, $color) {
.border-#{$name} {
@if $direction!= "" {
border-#{$direction}: 1px $type $color;
} @else {
border: 1px $type $color;
}
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border-#{$name} {
@if $direction!= "" {
border-#{$direction}: 0.5px $type $color;
} @else {
border: 0.5px $type $color;
}
}
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
.border-#{$name} {
@if $direction!= "" {
border-#{$direction}: 0.333333px $type $color;
} @else {
border: 0.333333px $type $color;
}
}
}
}
border:1px dashed #979797
// usage.scss
@import "@/scss/border_1px.scss"; //引入文件
@include borderCreator("btn", "", dashed, #979797); //创建一个名字为`border-btn`的class
生成的css结果
.border-btn {
border: 1px dashed #979797;
}
@media screen and (-webkit-min-device-pixel-ratio: 2){
.border-btn {
border: 0.5px dashed #979797;
}
}
@media screen and (-webkit-min-device-pixel-ratio: 3){
.border-btn {
border: 0.333333px dashed #979797;
}
}
border-bottom:1px solid rgba(185, 185, 185, 0.5)
// usage.scss
@import "@/scss/border_1px.scss"; //引入文件
@include borderCreator("cut-line", "bottom", solid, rgba(185, 185, 185, 0.5));
生成的css结果
.border-cut-line {
border-bottom: 1px solid rgba(185, 185, 185, 0.5);
}
@media screen and (-webkit-min-device-pixel-ratio: 2){
.border-cut-line {
border-bottom: 0.5px solid rgba(185, 185, 185, 0.5);
}
}
@media screen and (-webkit-min-device-pixel-ratio: 3){
.border-cut-line {
border-bottom: 0.333333px solid rgba(185, 185, 185, 0.5);
}
}
@import "@/scss/border1px.scss";
.content{
@include borderInsideCreator("top","solid","#000")
color:red;
}
//将被渲染为
.content{
color:red;
border-top: 1px solid #000;
@media screen and (-webkit-min-device-pixel-ratio: 2) {
border-top: 0.5px solid #000;
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
border-top: 0.333333px solid #000;
}
}