VUE使用Stylus插件
第一次接触stylus
对于不使用{} ; 等符号,感觉还不太习惯。
而且层级之间的类,也要错落有致,不是统一排一列。额。。。。
但是它更简洁,规范,便于维护。
下边讲解几点内容
1、要给lang定义stylus
<style lang="stylus"></style>
2、vue文件中引入stylus文件
<style lang="stylus">
@import '~assets/style/varibles.styl'</style>
3、自定义样式和使用
在styl文件中设置通用样式
$bgColor = #00bcd4
在vue中引用,$+name
<style lang="stylus">
@import '~style/varibles.styl'
.headerbackground-color: $bgColor
</style>
在styl文件中将多个样式集合成一个样式
ellipsis()overflow: hiddenwhite-space: nowraptext-overflow: ellipsis
在vue中引用,$+name
<style lang="stylus">
@import '~style/varibles.styl'
.headerbackground-color: $bgColorellipsis()
</style>
4、使用@media
// 最大330px
@media (max-width : 330px).home-indexmargin-top: -56%
// 最大最小的多个使用
@media (max-width : 410px) and (min-width : 330px), (max-width : 630px) and (min-width : 510px).home-index margin-top: -56%
VUE使用Stylus插件相关推荐
- sublime Text Vue中常用插件汇总说明
开发vue的常用插件 1.让vue文件高亮: 安装: Vue Syntax Highlight 2.让script里面的es6代码高亮: 安装:ecmascript syntax 安装:vuejs c ...
- sublime text3常用插件+开发vue常用的插件
开发vue的常用插件 1.让vue文件高亮: 安装: Vue Syntax Highlight 2.让script里面的es6代码高亮: 安装:ecmascript syntax 安装:vuejs c ...
- 原生JS实现移动端模块的左右滑动切换效果,基于vue、stylus
原生JS实现移动端模块的左右滑动动画效果,基于vue.stylus 大概实现方案: 手指touch屏幕的整个过程,会派发touchstart.touchmove.touchend三个事件,对这三个事件 ...
- [vue] 组件和插件有什么区别?
[vue] 组件和插件有什么区别? 组件 (Component) 是用来构成你的 App 的业务模块,它的目标是 App.vue.插件 (Plugin) 是用来增强你的技术栈的功能模块,它的目标是 V ...
- [vue] 怎么在vue中使用插件?
[vue] 怎么在vue中使用插件? npm 安装 然后再main.js 引入 最后 vue.use(插件名) 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家 ...
- vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
今天分享的不是技术,今天给大家分享个插件,针对现有的vue右键菜单插件,大多数都是需要使用插件本身自定义的标签,很多地方不方便,可扩展性也很低,所以我决定写了一款自定义指令调用右键菜单(vuerigh ...
- vue连线 插件_一起写一个即插即用的 Vue Loading 插件
写在之前 实现 Loading 思路上并不困难,只不过是根据请求前后进行设置而已,可当要设置的状态越来越多又不能全局统一设置时,就又变得十分繁琐重复.在 Github 和各个社区站里搜 Loading ...
- vue 图片引入_一个Vue的时间插件
安装 npm install -S hzqing-vue-timeline 如何引入 main.js: // 全局注册import hzqingVueTimeline from 'hzqing-vue ...
- VUE颜色选择器插件vColorPicker
VUE颜色选择器插件vColorPicker 官网 vColorPicker官网跳转 一.安装 npm install vcolorpicker -S 二.在 main.js 文件中引入插件并注册 / ...
最新文章
- Github(3)-本地文件管理
- 在同一个类中调用另一个方法没有触发 Spring AOP 的问题
- python高级函数、将函数作为变量、返回函数_从函数外部返回变量名,作为python函数内部的字符串...
- Java 设计模式之Mediator调节者模式
- 利用双向循环链表实现长整数的存储_重学数据结构之链表篇
- 三星android webview,[转]三星GS4(Android 4.3)上webview crash问题
- C-Free 3.5.2 注册码
- nginx+lua搭建文件上传下载服务
- Python网络爬虫案例
- 关闭cmd快速编辑模式
- 为什么犹太人能出这么多诺贝尔奖,看看他们的家庭教育吧!
- 苹果旧版app_苹果手机教你安装旧版app
- vue引入阿里巴巴矢量图库图标
- Qt实现读取BIN文件
- 华为大数据云管理平台实测
- 在unity中创建python机器学习环境
- 深信服网络挑战赛初赛_2019
- 高一数学试题-2022年秋期末试卷
- php漂浮,【飘】【漂】:【飘浮】【漂浮】、【漂泊】【飘泊】【飘薄】
- python从小白到大牛百度云盘_Python从小白到大牛
热门文章
- centos环境下安装redis
- 【5.0】对象生命周期及crud操作
- 字符编码乱码问题(servlet底层 编码大揭秘)
- 人工智能与机器学习的关系---人工智能工作笔记0013
- axios拦截器_请求拦截器_响应拦截器---axios工作笔记010
- k8s核心技术-Ingress(对外暴露应用实施)---K8S_Google工作笔记0042
- SpringCloud学习笔记028---在SpringBoot中整合多数据源_实战项目
- 正则表达式学习笔记003--问号和加号的认识与应用
- PAT 1003 Emergency 递归记录访问路径
- *pdb时出错;请检查是否是磁盘空间不足、路径无效或权限不够