MENU


Stylus

In addition to LESS and SCSS, Stylus is another CSS preprocessor.

This generates my_styles.css automatically whenever changes are saved in 'my_styles.styl': npm install stylus -g stylus -w my_styles.styl

RESETRUNFULL
// my_box.styl
div{    
   border: 1px solid brown;
}

@import 'my_box'

fs = 14px
overload-padding = true
colors = {r:red, g:green, b:blue}

border-radius()  
   -webkit-border-radius: arguments  
   -moz-border-radius: arguments  
   border-radius: arguments

sum(nums...)  
   sum = 0  
   sum += n for n in nums
   
negative(n)  
   unless n is a 'unit'    
      error('invalid number')  
   if n < 0    
      yes  
   else    
      no
      
if overload-padding  
   padding(y, x = 8px)    
      margin y x
      
body 
   padding 5px 10px
   
dimensions = @block{  
   width: w = sum(10px, 20px, 30px, 40px);  
   height: w * 2
}

body > div  
   @extends body  
   {dimensions}  
   font-size: fs  
   border-radius: 5px  
   z-index: 1 unless @z-index  
   @media (max-width: 300px)    
      &      
         color: #000
      @media (min-width: 100px), (min-height: 1200px)  
         &    
            color: #100  
            
div    
   &:hover   // parent. ie. "body > div div:hover"        
      background: yellow    
   ^[0]:hover  // ancestor <div> ^[0..-1] means throughout        
      background: colors[b]    
   ../ span  // ie. "body > div span"        
      background:  rgba(alpha: 0.5, blue: 100, 255, 200);    
   /span  // ie. "span"        
      color:brown
      
table  
   for row in 1 2 3 4 5    
      tr:nth-child({row})      
         height: 15px * row

<!DOCTYPE html><html><head>
   <link rel="stylesheet" type="text/css" href="/shared/my_styles.css"/>
</head><body>    
   <h1></h1>    
   <div>        
      <div>Let's get rid of semicolons.</div>        
      <span>OK!</span>    
   </div>    
   <table>      
      <tr><td>1</td><td>selectors</td></tr>      
      <tr><td>2</td><td>variables, operators</td></tr>      
      <tr><td>3</td><td>mixins, functions</td></tr>      
      <tr><td>4</td><td>conditionals, iterations</td></tr>      
      <tr><td>5</td><td>@extend, @block</td></tr>    
   </table>
</body></html>