Syntax¶

Description: A misc Function is defined as a built-in helper Function relating to miscellaneous activity.

ctr('<#selector>', {
  <...>: <function>(<...>)
})

<#selector>:
  <...>: <function>(<...>)

<#selector> {
  <prop>: <value>;
}

Notes

• All Function are derived from Stylus
• Rule of thumb, if you find yourself using these Functions often, you should migrate to the Javascript API
• Stylus built-in functions

Last¶

Description: Returns the last value in the given List.

ctr('.test', {
  width: 200px
  font-size: unit(last(1 2 3), px)
})

.test:
  width: 200px
  font-size: unit(last(1 2 3), px)

.test {
  width: 200px;
  font-size: 3px;
}

ctr('.test', {
  width: 200px
  font-size: unit(last(1 2 3), px)
})

.test {
  width: 200px;
  font-size: 3px;
}

.test:
  width: 200px
  font-size: unit(last(1 2 3), px)

Notes

• last(<list>)

Length¶

Description: Returns the length of a given List.

ctr('.test', {
  width: 200px
  font-size: unit(length((1 2 3 4)), px)
})

.test:
  width: 200px
  font-size: unit(length((1 2 3 4)), px)

.test {
  width: 200px;
  font-size: 4px;
}

ctr('.test', {
  width: 200px
  font-size: unit(length((1 2 3 4)), px)
})

.test {
  width: 200px;
  font-size: 4px;
}

.test:
  width: 200px
  font-size: unit(length((1 2 3 4)), px)

Notes

• length(<list>)

Lookup¶

Description: Looks up a variable with a given name, passed as a String, and returns null if the variable is undefined.

font-size-1 = 10px
font-size-2 = 20px
font-size-3 = 30px

for i in 1..3
  .test-{i}
    ctr({
      width: 200px
      font-size: lookup('font-size-' + i)
    })

.test-1 {
  width: 200px;
  font-size: 10px;
}
.test-2 {
  width: 200px;
  font-size: 20px;
}
.test-3 {
  width: 200px;
  font-size: 30px;
}

font-size-1 = 10px
font-size-2 = 20px
font-size-3 = 30px

for i in 1..3
  .test-{i}
    ctr({
      width: 200px
      font-size: lookup('font-size-' + i)
    })

.test-1 {
  width: 200px;
  font-size: 10px;
}
.test-2 {
  width: 200px;
  font-size: 20px;
}
.test-3 {
  width: 200px;
  font-size: 30px;
}

Notes

• lookup(<name>)
• Useful when you need to get a value of a variable with a dynamically generated name

Replace¶

Description: Returns a String with all matches of pattern replaced by replacement in given val.

ctr('.test', {
  width: 200px
  color: replace(i, e, griin)
})

.test:
  width: 200px
  color: replace(i, e, griin)

.test {
  width: 200px;
  color: #008000;
}

ctr('.test', {
  width: 200px
  color: replace(i, e, griin)
})

.test {
  width: 200px;
  color: #008000;
}

.test:
  width: 200px
  color: replace(i, e, griin)

Notes

• replace(<pattern>, <replacement>, <val>)

S¶

Description: The S() function is similar to unquote() in that it returns a Literal node. It also accepts a format String much like C’s sprintf(). Currently the only specifier is %s.

ctr('.test', {
  width: 200px
  transform: s("translate(%s, %s)", 10px, 20px)
})

.test:
  width: 200px
  transform: s("translate(%s, %s)", 10px, 20px)

.test {
  width: 200px;
  transform: translate(10px, 20px);
}

ctr('.test', {
  width: 200px
  transform: s("translate(%s, %s)", 10px, 20px)
})

.test {
  width: 200px;
  transform: translate(10px, 20px);
}

.test:
  width: 200px
  transform: s("translate(%s, %s)", 10px, 20px)

Notes

• s(<fmt>, ...)

Substr¶

Description: The substr() method returns the characters in a String beginning at the specified location through the specified number of characters.

ctr('.test', {
  width: 200px
  background: substr(substr(dredd, 1), 0, 3)
})

.test:
  width: 200px
  background: substr(substr(dredd, 1), 0, 3)

.test {
  width: 200px;
  background: #f00;
}

ctr('.test', {
  width: 200px
  background: substr(substr(dredd, 1), 0, 3)
})

.test {
  width: 200px;
  background: #f00;
}

.test:
  width: 200px
  background: substr(substr(dredd, 1), 0, 3)

Notes

• substr(<val>, <start>, <length>)

Unit¶

Description: Returns a String for the type of unit or an empty String, or assign the given type without unit conversion.

ctr('.test', {
  width: 200px
  font-size: unit(15%, px)
})

.test:
  width: 200px
  font-size: unit(15%, px)

.test {
  width: 200px;
  font-size: 15px;
}

ctr('.test', {
  width: 200px
  font-size: unit(15%, px)
})

.test {
  width: 200px;
  font-size: 15px;
}

.test:
  width: 200px
  font-size: unit(15%, px)

Notes

• unit(<unit>) => <unit>
• unit(<unit>, <type>)