stylu使用总结之 & 、迭代 、判断 、函数

如果您希望拥有更好的阅读体验，欢迎访问 我的开发笔记

---

& ------> 父级的引用

  <div>
    <div class="a">黑化肥挥发发灰会花飞；灰化肥挥发发黑会飞花</div>
  </div>

css的写法

  .a{
    height: 120px; width: 120px; background-color: green; }
  .a:hover {
    background-color: red;}

用stylus表示为

  .a
    height: 120px
    width: 120px
    background-color: green
    &:hover
      background-color: red

当我第一次从别的地方看到‘父级的引用’这个词语的时候，好久都不知道怎么去理解这个‘引用’，其实用大白话解释，就是stylus转换为css时，先把&去掉，然后找到&的上一级元素(或者叫父级元素,比如这个例子里的.a)，再加上&后边的内容(比如这个例子里的:hover),最后就变为了 .a:hover

下面这个例子，最后一种stylus的写法，虽然看着很别扭&