stylus

stylus 优点：css之中使用一些变量，方便我们快速编写css 项目中我们使用css开发的辅助工具帮助我们开发网站样式 安装：终端打开我们项目的文件夹 npm install stylus --save npm install stylus-loader --save // --save 是线上和开发模式都用 --save-dev只在开发环境中用 来源： https://www.cnblogs.com/-constructor/p/12031561.html

<template> <div> <div> <input type="text" @input="handleInput" v-model='mytext'> <ul> <li v-for="(data,index) in dataList">{{data}}</li> </ul> </div> </div> </template> <script> export default { name: 'App', data() { return { dataList:['dfef','geger','fefgw'], mytext:'' } }, methods: { handleInput(){ console.log(this.mytext) this.dataList = this.dataList.filter(item=>item.indexOf(this.mytext)>-1); } }, } </script> <style scoped lang="stylus" ref="stylesheet/stylus"> </style> 　　 来源： https://www.cnblogs.com/zz334396884/p/12022413.html

变量 Sass声明变量必须是【$】开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号：分隔开。 Less声明变量用【@】开头，其余等同Sass。 Stylus中声明变量没有任何限定，结尾的分号可有可无，但变量名和变量值之间必须要有【=】。 作用域 Sass：三者最差，不存在全局变量的概念 Less：最近的一次更新的变量有效，并且会作用于全部的引用！ Stylus：Sass的处理方式和Stylus相同，变量值输出时根据之前最近的一次定义计算，每次引用最近的定义有效 嵌套 三种css预编译器的【选择器嵌套】在使用上来说没有任何区别，甚至连引用父级选择器的标记&也相同 继承 Sass和Stylus的继承非常像，能把一个选择器的所有样式继承到另一个选择器上。使用【@extend】开始，后面接被继承的选择器。Stylus的继承方式来自Sass，两者如出一辙。Less则又独树一帜地用伪类来描述继承关系 导入@import Sass中只能在使用url()表达式引入时进行变量插值 $device：mobile； @ import url ( styles . # { $device } . css ) ; Less中可以在字符串中进行插值 @device : mobile ; @ import "styles.@{device}.css" ; Stylus中在这里插值不管用