Stylus는 표준 CSS 중괄호 구문뿐만 아니라 콜론과 세미콜론을 생략하는 Python 스타일의 들여쓰기 문법을 모두 지원합니다.
기본 문법 및 변수 할당 (Syntax & Variables)
.box
color: blue
.button
color: red
// Variables & Conditional Assignment
royal-blue = #36a
royal-blue ?= #89f
div
color: royal-blue // Evaluates to #36a
믹스인 및 블록 믹스인 (Mixins)
// Mixin with defaults
border-radius(n = 2px)
-webkit-border-radius: n
border-radius: n
div
border-radius(4px)
// Block Mixins
mobile()
@media (max-width: 480px)
{block}
+mobile()
width: 100%
// Rest Parameters
shadow(offset-x, args...)
box-shadow: offset-x args
#login
shadow: 1px 2px 5px #eee
함수 정의 및 선택자 보간 (Functions & Interpolation)
add(a, b = 2)
a + b
body
padding: add(10px, 5) // 15px
// Multiple Return Values
sizes()
8px 16px
sizes()[0] // 8px
// Interpolation
$icon-path = "/images"
.icon
background-image: url("%s/icon.png" % $icon-path)
.parent
&:hover
opacity: 0.8