css预处理器-stylus 很少人用

stylus

Stylus由Node.JS编写，与JS堆栈完美匹配。Stylus深受Sass的逻辑能力和LESS的简单性的影响。与Sass或LESS版本相比，Stylus的一个优点是它具有极其强大的内置功能，并且能够处理繁重的计算。

Stylus在编写语法方面提供了很大的灵活性，支持本机CSS，并且允许省略括号、冒号和分号。另外，请注意，Stylus不使用@或$符号来定义变量。相反，Stylus使用赋值运算符来指示变量声明。

每个CSS预处理器都以自己独特的方式完成给定的任务，使开发人员能够使用极其强大的工具以极快的速度编写干净的代码。虽然Sass拥有最大的用户群和活跃社区，但LESS最容易编译和集成。另一方面，Stylus仍然是Node.JS开发人员的流行选择，因为它结合了Sass的广泛逻辑能力和LESS的简单性。最后，CSS预处理器的选择在很大程度上取决于开发人员的偏好和项目需求。如果你想了解更多关于CSS的信息，不妨报名参加Web前端培训，有理论和实践项目一起学习，学以致用，在项目中锻炼自己的思维能力和动手能力，获得快速成长。

官网（目前打不开）

Stylus - 富于表现力、健壮、功能丰富的 CSS 预处理器 | Stylus 中文网

stylus文件的扩展名是 .styl

index2.styl

stylus文件如何生成css文件？

在HBuilder X软件中

接着，在你的项目中的 index2.styl文件上，点击右键，按如下提示操作：

手动编译

自动编译

HbuilderX实现保存，自动编译，在配置文件设置key:"ctrl+s"和onDidSaveExecution:"true"

特别注意：

一定要选择重启HbuilderX。配置文件更改，才会生效。

这是，你只要在index2.styl文件中编写css代码，ctrl+s保存。在index2.styl文件中编写的代码会自动编译，并将生成的css代码，放置在index2.css文件中。

1. stylus中的变量

使用关键字$变量

$nice-blue = #5B83AD
$light-blue = $nice-blue + #111
$bgcolor = #006699

注意：里面没有冒号，没有分号

里面要写 = 赋值符号

在css选择器中使用stylus变量

h1
color pink
border 1px solid blue
width 500px
height 300px
$nice-blue = #5B83AD
$light-blue = $nice-blue + #111
$bgcolor = #006699
#top
width 1200px
height 80px
background-color $bgcolor
margin 0 auto

插件编译生成的css样式，如下所示：

h1 {color: #ffc0cb;border: 1px solid #00f;width: 500px;height: 300px;
}
#top {width: 1200px;height: 80px;background-color: #069;margin: 0 auto;
}

2. stylus中运算符

stylus中运算符

$bgcolor = orange
$base = 2px
$fillter = $base * 2
$other = $base + $fillter
.son
width 300px
height 300px
margin 20px auto
// border $fillter solid $bgcolor
border ($base * 2) solid $bgcolor

操作如下所示：

3. stylus中的嵌套的写法

使用stylus 编写合肥SEO-合肥网络推广_网站优化_搜索引擎优化公司_安徽SEO_网站排名_安徽南讯信息技术有限公司这个网站的导航部分

html:

 <div class="nav"><div class="m2"><nav><ul><li><a href="">首页</a></li><li><a href="">全网营销</a></li><li><a href="">技术研发</a></li><li><a href="">运营管理</a></li><li><a href="">客户案例</a></li><li><a href="">解决方案</a></li><li><a href="">新闻中心</a></li><li><a href="">关于我们</a></li></ul></nav></div></div>

stylus:

.m2{
width: 1130px;
margin-right: auto;
margin-left: auto;
}
@navy-blue:#003366;
.nav
height 50px
background-color #336699
li,ulmargin 0padding 0list-style-type none
liwidth 140pxheight 50pxline-height 50pxfloat left
adisplay blockwidth 100%height 50pxtext-align centerfont-size 16pxcolor #FFFtext-decoration none

预览：

4. stylus中的伪类的写法

&:伪类名称

&:hover

$navy-blue = #003366
adisplay blockwidth 100%height 50pxtext-align centerfont-size 16pxcolor #FFFtext-decoration none&:hoverbackground-color $navy-blue

预览：