stylus基础教程,stylus实例教程,stylus语法总结stylus特点
富于表现⼒、具有健壮性、功能丰富、动态编码
不需要写CSS的冒号、分号、⼤括号
和LESS、SASS功能类似，会这些的⼊⼿很快
⽂章⽬录
安装
1.安装node+npm环境
2.命令⾏全局安装stylus
cnpm i stylus@latest -g
3.可以在命令⾏输⼊ stylus -h 查看有哪些可以⽤的命令
使⽤
1.想将assets/css⽬录下的所有.styl⽂件编译成css怎么办？
stylus -c assets/css/
2.只想将assets/css/index.styl 编译成assets/css/index.css？
stylus -c assets/css/index.styl assets/css/index.css
3.想将assets/css/index.css 编译成assets/css/index.styl？
stylus -C assets/css/index.css
4.不想这么⿇烦的⽤命令怎么办？使⽤webstorm设置如图可以⾃动将.styl⽂件转成.css⽂件
4-1.注意第⼆张图是默认配置，⽆需修改，直接确定。
4-2.如果配置都是空的，可以安装我的配置填写。
4-3.如果Program项出现红⾊报错！是因为node环境有问题或者没有全局安装stylus
4-4.接下来只需要编写.styl⽂件就会⾃动编译出.css⽂件。如图
5.vue中使⽤stylus, 命令⾏中输⼊cnpm i stylus --save-dev
5.1在 .vue⽂件中使⽤, 添加使⽤ scoped 属性表⽰样式只对当前组件有效
css变量<style scoped lang="stylus">
html,body
margin 0
padding 0
div
color #333
</style>
stylus语法
(⼀)选择器
1.冒号，分号,⼤括号可写可不写
2.后代关系⽤相同缩进表⽰
3.⽗⼦关系⽤ >表⽰
4.伪类元素⽤ & 表⽰其宿主元素
5.属性写在前, 嵌套⼦元素样式写在后
6.分组选择器⽤相同缩进即可, 如 +a+span+span
(⼆)变量
1.定义变量并赋值(建议⽤width=3px`
2.定义函数(arguments为内置所有参数, 也可⾃定义参数), border() $width dashed #foo
3.函数参数可以写默认值，类似于es6的解构赋值, 如 padding(top=1px,right=2px)3.⽅法名加() 为调⽤函数，如 border()
4.建议变量定义在最上⾯, 然后是函数, 然后才是代码. 最好的⽅式是变量和函数定义成单独的⽂件, 然后通过@import variable.styl  导⼊
5.使⽤@height  会冒泡查值, 如⾃⾝有此属性则获取该属性值; 否则层层向上查该属性, 如果都没有则报错
6.可以使⽤运算符进⾏计算
7.z-index 1 unless @z-index  表⽰默认 z-index=1
除⾮ @z-index  存在
(三)插值作为变量前缀)，如‘

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。