stylus是一种CSS预处理器,它可以让开发者用更简洁、更灵活的语法编写CSS,并且支持嵌套、变量、混入等功能。
引入stylus可以通过以下几种方式实现:
-
使用npm安装stylus:在项目根目录下执行以下命令安装stylus:
npm install stylus --save-dev
-
在HTML文件中直接引入Stylus的CDN链接:
html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/stylus@0.54.8/stylus" />
在此之后,就可以在项目中使用stylus编写CSS了。
编写stylus文件时,需要注意以下几点:
- 使用.styl作为文件后缀名;
- 使用缩进代替大括号;
- 使用变量:可以通过
$
符号定义和使用变量; - 使用嵌套:可以在父选择器下嵌套子选择器;
- 使用混入:可以定义一些可重用的样式块,并在需要时引入。
以下是一个示例的stylus代码:
stylus
// 定义变量
$primary-color = #ff0000
// 定义混入
mixin button-style
background-color $primary-color
color #fff
padding 10px
// 使用混入
.button
mixin button-style
border-radius 5px
// 输出CSS
body
font-size 14px
以上代码将会被编译为以下的CSS代码:
css
.button {
background-color: #ff0000;
color: #fff;
padding: 10px;
border-radius: 5px;
}
body {
font-size: 14px;
}
需要注意的是,如果项目中使用的是CSS而不是stylus,那么还需要使用stylus的编译工具将.styl文件编译为CSS文件。编译命令可以在项目根目录的package.json文件中配置,或者使用命令行参数指定。