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,ul
 margin 0
 padding 0
 list-style-type none
li
 width 140px
 height 50px
 line-height 50px
 float left
a
 display block
 width 100%
 height 50px
 text-align center
 font-size 16px
 color #FFF
 text-decoration none

预览：

4. stylus中的伪类的写法

&:伪类名称

&:hover

$navy-blue = #003366
a
 display block
 width 100%
 height 50px
 text-align center
 font-size 16px
 color #FFF
 text-decoration none
 &:hover
  background-color $navy-blue

预览：