less或scss中@mixin的用法

一些重复样式

// 背景图片
@mixin bgImage($path) {background-image: url($path + '@2x.png');@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {background-image: url($path + '@3x.png');}
}// 居中布局
@mixin center() {justify-content: center;align-content: center;
}// 不换行
@mixin no-wrap() {overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}@mixin top-line($c: #c7c7c7) {content: ' ';position: absolute;left: 0;top: 0;right: 0;height: 1px;border-top: 1px solid $c;color: $c;transform-origin: 0 0;transform: scaleY(0.5);@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {transform: scaleY(0.333333333);}
}@mixin bottom-line($c: #E6E6E6) {content: ' ';position: absolute;left: 0;bottom: 0;right: 0;height: 1px;border-bottom: 1px solid $c;color: $c;transform-origin: 0 100%;transform: scaleY(0.5);@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {transform: scaleY(0.333333333);}
}@mixin left-line($c: #c7c7c7) {content: ' ';position: absolute;left: 0;top: 0;width: 1px;bottom: 0;border-left: 1px solid $c;color: $c;transform-origin: 0 0;transform: scaleX(0.5);@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {transform: scaleX(0.333333333);}
}@mixin right-line($c: #c7c7c7) {content: ' ';position: absolute;right: 0;top: 0;width: 1px;bottom: 0;border-right: 1px solid $c;color: $c;transform-origin: 100% 0;transform: scaleX(0.5);@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {transform: scaleX(0.333333333);}
}@mixin line($c: #c7c7c7, $border-radius: 0) {content: ' ';position: absolute;left: 0;top: 0;width: 200%;height: 200%;border: 1px solid $c;color: $c;transform-origin: left top;@if ($border-radius != 0) {border-radius: $border-radius * 2;}transform: scale(0.5);@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {@if ($border-radius != 0) {border-radius: $border-radius * 3;}width: 300%;height: 300%;transform: scale(0.333333333);}
}// 一像素上边框
@mixin border-top-1px($color: #c7c7c7) {position: relative;&:before {@include top-line();}
}// 一像素下边框
@mixin border-bottom-1px($color: #c7c7c7) {position: relative;&:after {@include bottom-line();}
}// 一像素上下边框
@mixin border-top-bottom-1px($color: #c7c7c7) {position: relative;&:before {@include top-line();}&:after {@include bottom-line();}
}// 一像素左边框
@mixin border-left-1px($color: #c7c7c7) {position: relative;&:before {@include left-line();}
}// 一像素右边框
@mixin border-right-1px($color: #c7c7c7) {position: relative;&:before {@include right-line();}
}// 一像素边框
@mixin border-1px($color: #c7c7c7, $position: relative, $border-radius: 0) {position: $position;&:after {@include line($color, $border-radius);}
}

使用方法

// 先引入
@import '~@/assets/mixin.scss';.popup-txt {width: 100%;height: 100px;font-size: 14px;box-sizing: border-box;padding-top: 24px;// 要使用的地方通过 @include 引入样式@include border-bottom-1px(#eeeeee);
}

less或scss中@mixin的用法相关推荐

SCSS 中这些技巧，你可能还不知道！
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群作者:19组清风链接:https://juejin.cn/post/69968554685 ...
SCSS 中这些实用技巧，你可能还不知道！
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群作者:19组清风链接:https://juejin.cn/post/69968554685 ...
sass/scss语法@mixin
----------------------------题外话--------------------------------- css新增HSL颜色模式,h色调(360度圆盘),s饱和度(百分比), ...
mixin机制 vue_谈谈vue中mixin的一点理解
谈谈vue中mixin的一点理解 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情 ...
mysql中change用法,mysql 中alter的用法以及一些步骤
mysql 中alter的用法以及一些方法在用到alter的时间,查到了这个文章,就copy下来了,详细进入下面链接: MySQL之alter语句用法总结 1:删除列 ALTER TABLE [表名 ...
mysql中正则表达式的用法_Mysql中正则表达式Regexp常见用法
Mysql中Regexp常见用法模糊匹配,包含特定字符串 # 查找content字段中包含"车友俱乐部"的记录 select * from club_content where ...
【C++】C/C++ 中 static 的用法全局变量与局部变量
C/C++ 中 static 的用法全局变量与局部变量目录 1. 什么是static? 1.1 static 的引入 1.2 静态数据的存储 2. 在 C/C++ 中static的作用 2.1 总的 ...
php foreach嵌套foreach,php中foreach怎么嵌套foreach PHP中foreach函数用法？
foreach的使用方法小编不是很明确,分享达人指教一下.foreach (array_expressforeach($array as $key) { if(xxxx) { break; //bre ...
python中str的index什么意思_python中index的用法是什么
index() 一般用处是在序列中检索参数并返回第一次出现的索引,没找到就会报错,比如:>>> t=tuple('Allen') >>> t ('A', 'l', ...

less或scss中@mixin的用法

less或scss中@mixin的用法相关推荐

最新文章

热门文章