stylus 使用小技巧(1)
mixins.styl
$pink_color = #fc566a
$yellow_color = #fee246 add(a)
a = unit(a, rem) pic_position($width, $height, $top, $left)
width add($width)
height add($height)
top add($top)
left add($left)
home.vue
<style lang="stylus" scoped>
@import '../assets/css/mixins.styl'
//使用举例
.rule
pic_position(3.7, 1.1, 4.5, 14)
color $yellow_color
</style>
stylus使用element ui 组件时修改样式不生效
1、将scoped去掉
2、使用 >>> 例如 .el-collapse >>> .el-collapse-item {color: $yellow_color}
scoped
在vue组件中,在style标签上添加scoped属性,以表示它的样式作用于当下的模块,很好的实现了样式私有化的目的,这是一个非常好的机制。
参考资料 https://segmentfault.com/a/1190000012184604?utm_source=tuicool&utm_medium=referral
深度作用选择器 >>>
如果你希望 scoped
样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用 >>>
操作符
<style scoped>
.a >>> .b { /* ... */ }
</style>
参考资料 https://vue-loader-v14.vuejs.org/zh-cn/features/scoped-css.html?q=
stylus 使用小技巧(1)的更多相关文章
- 前端网络、JavaScript优化以及开发小技巧
一.网络优化 YSlow有23条规则,中文可以参考这里.这几十条规则最主要是在做消除或减少不必要的网络延迟,将需要传输的数据压缩至最少. 1)合并压缩CSS.JavaScript.图片,静态资源CDN ...
- Git小技巧 - 指令别名及使用Beyond Compare作为差异比较工具
前言 本文主要写给使用命令行来操作Git的用户,用于提高Git使用的效率.至于使用命令还是GUI(Tortoise Git或VS的Git插件)就不在此讨论了,大家根据自己的的喜好选择就好.我个人是比较 ...
- 分享两个BPM配置小技巧
1.小技巧 流程图修改后发布的话版本号会+1,修改次数多了之后可能会导致版本号很高,这个时候可以将流程导出,然后删除对应的流程包再导入,发布数据模型和流程图之后,版本清零 2.小技巧 有的同事入职后使 ...
- linux系统维护时的一些小技巧,包括系统挂载新磁盘的方法!可收藏!
这里发布一些平时所用到的小技巧,不多,不过会持续更新.... 1.需要将history创建硬链接ln 全盘需要备份硬链接 ln /etc/xxx /home/xxx 2.root用户不可以远程 /et ...
- JS处理事件小技巧
今天,就分享一下我自己总结的一些JS的小技巧: ①防止鼠标选中事件 <div class="mask" onselectstart="return false&qu ...
- iOS:小技巧(不断更新)
记录下一些不常用技巧,以防忘记,复制用. 1.获取当前的View在Window的frame: UIWindow * window=[[[UIApplication sharedApplication] ...
- css小技巧(1)
1.-webkit-overflow-scrolling: touch; 解决ios滑动时无缓冲问题 2.::-webkit-scrollbar 设置ios滑动时是否显示滚动条 3.::selecti ...
- 最强 Android Studio 使用小技巧和快捷键
写在前面 本文翻译自 Android Studio Tips by Philippe Breault,一共收集了62个 Android Studio 使用小技巧和快捷键. 根据这些小技巧的使用场景,本 ...
- ios开发中的小技巧
在这里总结一些iOS开发中的小技巧,能大大方便我们的开发,持续更新. UITableView的Group样式下顶部空白处理 //分组列表头部空白处理 UIView *view = [[UIViewal ...
随机推荐
- 转载:php excel 的处理
下面是总结的几个使用方法 include 'PHPExcel.php'; include 'PHPExcel/Writer/Excel2007.php'; //或者include 'PHPExcel/ ...
- memcache、mongodb、redis的对比区别
>>Memcached Memcached的优点:Memcached可以利用多核优势,单实例吞吐量极高,可以达到几十万QPS(取决于key.value的字节大小以及服务器硬件性能,日常环境 ...
- 记录下通过Java代码打开cmd启动appium server及在使用过程中碰到的问题
1.appium server启动后,执行测试脚本,appium日志报错,提示appium setting未安装(原因是小米手机在用appium desktop调试时总是提示是否安装appium se ...
- Table 'jiang.hibernate_sequence' doesn't exist
spring+struts2+hibernate 运行报错 Table 'jiang.hibernate_sequence' doesn't exist 解决方法 一. 在hibernate.cfg. ...
- 12.Unsafe原子性操作
import sun.misc.Unsafe; /** * JDK8 * JDK 的此jar 包中的 Unsafe 类提供了硬件级别的原子性操作 */ public class UnsafeTest ...
- 将第三方jar包安装到本地maven仓库
这里有2个案例,需要手动发出Maven命令包括一个 jar 到 Maven 的本地资源库. 要使用的 jar 不存在于 Maven 的中心储存库中. 您创建了一个自定义的 jar ,而另一个 Mave ...
- js 微信公众号网页用户授权,获取微信code,access_tocken,用户信息
第一次做微信网页授权,过程有点艰难,主要是不知道redirect_uri的地址要怎么写,刚开始我以为就是授权结束后要跳转到的首页地址,于是写成了uri = 'http://18i194c049.ias ...
- 每天一个linux命令:touch(9)
touch touch命令有两个功能:一是用于把已存在文件的时间标签更新为系统当前的时间(默认方式),它们的数据将原封不动地保留下来:二是用来创建新的空文件 格式 touch [选项] [文件] 参数 ...
- select into outfile的sql语句
SELECT INTO…OUTFILE语句把表数据导出到一个文本文件中,并用LOAD DATA …INFILE语句恢复数据.但是这种方法只能导出或导入数据的内容,不包括表的结构,如果 ...
- [NOIP模拟测试31]题解
A.math 考场乱搞拿了95,2333. 考虑裴蜀定理:$ax+by=z$存在整数解,当且仅当$gcd(a,b)|z$. 那么如果某个数能够被拼出来,就必须满足所有$a_i$的$gcd$是它的因子. ...