Using Functions and Mixins with Stylus

Stylus allows you to create functions and mixins of reusable code for your stylesheets. You can also handle mathematical operations, unary operations, and more allowing you complete control over your stylesheets with ease.

Mixins are synonymous with functions. What determines

when you call something a mixin or function is based on its usage. Mixins by definition are invoked as a statement, where functions are part of an expression.

Constructing A Function / Mixin

Let’s assume you’re wanting to create a function to handle rounding corners of an element. We can simply name it border-radius, to keep it in line with the actual syntax. Only now when we’d call border-radius within our code it would generate the code with support for various browsers.

Let’s create a box as our example with rounded corners.

Stylus Code

1

2

3

4

5

6

7

8

9

10

11

border-radius()

-webkit-border-radius:arguments

-moz-border-radius:arguments

border-radius:arguments

.box

width:100px

height:100px

background-color:blue

border-radius(10px)

Stylus Output

1

2

3

4

5

6

7

8

9

.box{

width:100px;

height:100px;

background-color:#00f;

-webkit-border-radius:10px;

-moz-border-radius:10px;

border-radius:10px;

}

Notice how the output now contains the 3 lines required to generate rounded corners for multiple browser support. Another thing to note is that we were able to pass the value of 10px to each line by calling the arguments keyword. This will allow us to reuse the function throughout our entire code base.

We can even take this a step further, and make the function a little more transparent by losing the parenthesis altogether. This is the beauty of using mixins, as it allows you to transparently add support for various browsers while keeping the syntax the same.

Stylus Code

1

2

3

4

5

6

7

8

9

10

11

12

border-radius()

-webkit-border-radius:arguments

-moz-border-radius:arguments

border-radius:arguments

.box{

width:100px

height:100px

background-color:blue

border-radius:10px

}

Stylus Output

1

2

3

4

5

6

7

8

9

.box{

width:100px;

height:100px;

background-color:#00f;

-webkit-border-radius:10px;

-moz-border-radius:10px;

border-radius:10px;

}

Notice we still get the same result, and it’s a little more natural writing it this way.

Let’s look at another example of creating a mixin where we alternate the background colors of our rows of a table.

Stylus Code

1

2

3

4

5

6

7

8

9

10

11

12

stripeRows(even=#eeeeee, odd = #dddddd)

tr

background-color:odd

&:nth-child(even)

background-color:even

table

stripeRows()

Stylus Output

1

2

3

4

5

6

7

tabletr{

background-color:#ddd;

}

table tr:nth-child(even){

background-color:#eee;

}

Argument Defaults

You can also set default values for your arguments if one is not provided. Let’s look at the border-radius example, and add a sensible default if a value is not provided.

Stylus Code

1

2

3

4

5

6

7

8

9

10

11

border-radius(radius=10px)

-webkit-border-radius:radius

-moz-border-radius:radius

border-radius:radius

.box

width:100px

height:100px

background-color:blue

border-radius()

Notice that we set the the default value to 10px, so if no value is set the border radius would be set to 10px by default.

Named Parameters

You can also pass named parameters to your function as well. The benefit to this approach is if you have more then 1 parameter to your function you’re not required to remember the order of how the arguments should be passed.

Stylus Code

1

2

3

4

5

6

.box

width:100px

height:100px

background-color:blue

border-radius(radius:10px)

Multiple Return Values

Interestingly enough, a function can also return multiple values as well. Let’s look at an example where we create a perfect square box.

Stylus Code

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

squareBox(x,color=blue)

dimensions=squareCoordinates(x)

box(dimensions[0],dimensions[1],color)

squareCoordinates(x)

returnxx

box(x,y,color=blue)

width:x

height:y

background-color:color

.box

squareBox(150px)

Stylus Output

1

2

3

4

5

6

.box{

width:150px;

height:150px;

background-color:#00f;

}

You’ll notice that now we only have to call the function squareBox() and pass the size, and the rest of the box code will be generated for us.

Conditionals

Like other programming languages, we can also take advantage of conditionals. This can be useful to us in cases where we’d need some set of styles applied in certain cases and not others.

Let’s look at an example where if someone creates a box which is not a perfect square we add some extra margin to the needed side to make it square.

Stylus Code

1

2

3

4

5

6

7

8

9

10

11

12

13

box(x,y,color=blue)

width:x

height:y

background-color:blue

if(x>y)

margin:((@width-y)/2)0

else

margin:0((@height-x)/2)

.box

box(50px,100px)

float:left

Stylus Output

1

2

3

4

5

6

7

8

.box{

width:50px;

height:100px;

background-color:#00f;

margin:025px;

float:left;

}

Anonymous Functions

You can also create anonymous functions using the @(){} syntax. The documentation provides a good example using a sort function here.

Arguments

The arguments keyword is available within each function block. It will contain the list of all arguments passed to the function.

In one of our previous examples of the border-radius, you found that we were using the keyword arguments instead of a variable name. This allowed us to pass any parameters/arguments we need to our function without manually specifying each allowed argument .

Tags

About This Blog

I'm writing this blog in order to share what I'm learning with the world. Since you learn best by teaching others and writing things down, I figured this would be the best way to really tackle any new technologies I plan on learning. I hope this blog will help you as much as it will benefit me.