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的写法，虽然看着很别扭，但还是能很好的体现出，这里对‘父级引用’的解释描述

  <div >
    <div class="a">div>
    <div class="b">div>
    <div class="a b">div>
  div>

css的写法

  .a { height: 120px; width: 120px; background-color: #008000; }
  .b { height: 130px; width: 130px; background-color: #00f; }
  .a.b { height: 140px; width: 140px; background-color: #f00; }

stylus最直观的写法

  .a
    height: 120px
    width: 120px
    background-color: green
  .b
    height: 130px
    width: 130px
    background-color: blue  
  .a.b
    height: 140px
    width: 140px
    background-color: red

为了体现 & 父级引用的写法

  .a
    height: 120px
    width: 120px
    background-color: green
    &.b
      height: 140px
      width: 140px
      background-color: red  
  .b
    height: 130px
    width: 130px
    background-color: blue

迭代(for in)

  <div >
    <div class="avatar_wrap">
      <img class="avatar_size" src="https://restver.me/assets/images/avatar.png">
      <img class="avatar_size" src="https://restver.me/assets/images/avatar.png">
      <img class="avatar_size" src="https://restver.me/assets/images/avatar.png">
    div>
  div>

stylus的写法

  .avatar_wrap
    for n in 2 3
      img:nth-child({n})
        margin-left: -1rem
  .avatar_size
    width: 2rem
    height: 2rem
    border-radius: 50%
    border: 1px solid red

在迭代的同时，使用判断

  .avatar_wrap
    for n in 1 2 3
      img:nth-child({n})
      if n == 1
        border: 1px solid green
      else
        margin-left: -1rem
  .avatar_size
    width: 2rem
    height: 2rem
    border-radius: 50%
    border: 1px solid red

函数

  <div >
    <div class="wrap">
      <div class="a">
      哈哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈哈哈
      哈哈哈哈哈啊哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈还是事实上事实上事实上还是
      水水水水是时候哈哈哈哈哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈哈
      div>
    div>
  div>

stylus写法

  $bgc = lightblue
  $size200 = 200px
  
  add(a, b = a)
      a = unit(a, px)
      b = unit(b, px)
      return a - b
  
  .wrap
    width: $size200
    height: $size200
    background-color: $bgc
    box-sizing: border-box
    padding: add(20, 10)
    // padding: add(20, 10) 0 0 add(20, 10)
    .a
      background-color: green

---

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

---