This is the sample output from a set of Stylus mixins I often use

Css Example Result

.some-css-scope label {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.some-css-scope nav a {
  border: none;
  text-decoration: none;
  color: inherit;
}

.some-css-scope nav a:hover {
  border: none;
  text-decoration: none;
  color: inherit;
}

.some-css-scope nav a:visited {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}

.some-css-scope nav a img {
grayscale()
}

.some-css-scope .columns {
  *zoom: 1;
}

.some-css-scope .columns:before,
.some-css-scope .columns:after {
  content: '';
  display: table;
}

.some-css-scope .columns:after {
  clear: both;
}
@media only screen and (min-width: 640px) {

  .some-css-scope .columns .left,
  .some-css-scope .columns .right {
    *zoom: 1;
    float: left;
    clear: none;
    text-align: inherit;
    padding-left: 0;
    padding-right: 0;
    width: 48.5%;
    margin-left: 0%;
    margin-right: 3%;
  }

  .some-css-scope .columns .left:before,
  .some-css-scope .columns .right:before,
  .some-css-scope .columns .left:after,
  .some-css-scope .columns .right:after {
    content: '';
    display: table;
  }

  .some-css-scope .columns .left:after,
  .some-css-scope .columns .right:after {
    clear: both;
  }

  .some-css-scope .columns .left:nth-child(2n),
  .some-css-scope .columns .right:nth-child(2n) {
    margin-right: 0%;
    float: right;
  }

  .some-css-scope .columns .left:nth-child(2n + 1),
  .some-css-scope .columns .right:nth-child(2n + 1) {
    clear: both;
  }
}

Stylus Input Sample

.some-css-scope
  reset()
  label
    no-select()
  nav a
    reset-link()
    img
      grayscale()

  .columns
    cf()
    +above(mobile)
      .left, .right
        col(1/2, cycle:2)