stylus语法

> 小编有话说:stylus超级好用!!节省了我写父子选择器的力气,有更多精力专注于样式的增删改查,实在是太好用啦!!nodejs和stylus是神!!!ヽ(￣▽￣)و❤❤❤
临近国庆,大家想好去哪玩了吗~?
-日积跬步,可行千里-

一、通过npm下载安装stylus二、stylus的使用教程1.stylus不需要花括号2.stylus可以像js一样使用变量3.stylus可以使用表达式4.stylus通过缩进判断父子级关系5.可以设置tab缩进从4变成26.stylus通过&:hover设置它所缩进的div1的div:hover7.~ + >在css选择器中的意思8.stylus缩进和花括号可以混合使用9.stylus在赋值时也可以像js一样使用变量10.stylus可以用@直接调用前面属性的值11.stylus支持函数

stylus的官方文档:

https://www.stylus-lang.cn/

一、通过npm下载安装stylus

首先确保你已安装了nodejs

node.js安装教程:

龙星宇，公众号：小龙女学编程如何下载node.js?先下个nvm吧

打开vscode

ctrl+~ 打开终端

npm i stylus -g

等待安装完成

自动生成映射文件css在目标文件夹内

自己手动创建stylus文件夹和其内的a.styl

stylus -w -m ./stylus/a.styl

二、stylus的使用教程

1.stylus不需要花括号

当然你可以使用,stylus主要通过缩进来判断父子关系,所以stylus的缩进很重要,不要排乱了

映射文件会自动转换成css

2.stylus可以像js一样使用变量

给w赋值50px

给width,height赋值w

映射文件

3.stylus可以使用表达式

除法需要加小括号

4.stylus通过缩进判断父子级关系

映射文件

5.可以设置tab缩进从4变成2

文件-首选项-设置

翻一翻找一下就有

6.stylus通过&:hover设置它所缩进的div1的div:hover

映射文件

7.~ + >在css选择器中的意思

参考链接:

https://blog.csdn.net/weixin_43755104/article/details/107685911

~表示选中p之后出现的所有ul

ul元素必须拥有相同的父元素p，但是 ul不必直接紧随 p。

效果图

+表示紧接的一个兄弟元素

二者有相同的父元素

>表示A元素下面直属第一层所有的B元素,不包含A的子元素的B元素

可以发现ul1的直属li的紫色被重新更改为粉色,而间接的li2样式不受影响

8.stylus缩进和花括号可以混合使用

映射文件

9.stylus在赋值时也可以像js一样使用变量

而且可以发现,不使用冒号也可以

10.stylus可以用@直接调用前面属性的值

但是要求@的这个属性要写在前面哈

11.stylus支持函数

调用时传参就行了

所以也支持形参有默认值

stylus支持条件分支语句

映射文件