stylus（八）

@font-face
  font-family Geo
  font-style normal
  src url(fonts/geo_sans_light/GensansLight.ttf)

编译后

@font-face {
  font-family: Geo;
  font-style: normal;
  src: url("fonts/geo_sans_light/GensansLight.ttf");
}

有几个学习的知识点，在stylus中url可以直接写，而不用加双引号。@开头的是h5新增的吧，现在自己会用的也就keyframe,需要研究一下字体图标的文件，里面好多代码自己都看不懂

---

@media print
  #header
  #footer
    display none

编译后

@media print {
  #header,
  #footer {
    display: none;
  }
}

又是一个自己没用过的，移动端的知识，h5的知识，好多没用过啊，突然想到我之前的项目是怎么做出来的~~~

---

.widget
  padding 10px

  @media screen and (min-width: 600px)
    padding 20px

编译后

.widget
  padding 10px

  @media screen and (min-width: 600px)
    padding 20px

很实用，但是我从没使用过

---

@media (max-width: 500px)
  .foo
    color: #000

  @media (min-width: 100px), (min-height: 200px)
    .foo
      color: #100

编译后

@media (max-width: 500px) {
  .foo {
    color: #000;
  }
}
@media (max-width: 500px) and (min-width: 100px), (max-width: 500px) and (min-height: 200px) {
  .foo {
    color: #100;
  }
}

我有一个技术：从stylus座位突破点，去学习h5中一些关于浏览器适配的知识，很有意思的知识啊，可是我没使用过。

---

foo = 'width'
bar = 30em
@media (max-{foo}: bar)
  body
    color #fff

编译后

@media (max-width: 30em) {
  body {
    color: #fff;
  }
}

---

.foo
  for i in 1..4
    @media (min-width: 2**(i+7)px)
      width: 100px*i

编译后

@media (min-width: 256px) {
  .foo {
    width: 100px;
  }
}
@media (min-width: 512px) {
  .foo {
    width: 200px;
  }
}
@media (min-width: 1024px) {
  .foo {
    width: 300px;
  }
}
@media (min-width: 2048px) {
  .foo {
    width: 400px;
  }
}

我感兴趣的不是这里如何编译，而是编译后的代码挺有意思的，在浏览器适配上