gergelypolonkai-web-jekyll/_posts/2015-04-28-cross-browser-border-radius-sass-mixin-with-varargs.markdown

33 lines
1.3 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
layout: post
title: "Cross browser border-radius SASS mixin with varargs"
date: 2015-04-27 22:59:56
tags: [css, sass]
permalink: /blog/2015/4/28/cross-browser-border-radius-sass-mixin-with-varargs
published: true
author:
name: Gergely Polonkai
email: gergely@polonkai.eu
---
Few days ago I needed to create style sheets with many rounded boxes,
where different corners had to be rounded differently (think about
Bootstraps [button
groups](http://getbootstrap.com/components/#btn-groups)).
CSS has this nifty shorthand to specify border width in one line, like
with `border-width: 1px 2px 3px 4px`, but it lacks the same for
`border-radius`. So I decided to create something similar using [Sass
mixins](http://sass-lang.com/guide#topic-6) with dynamic
parameters. Another nice feature you get using the `border-width`
shorthand is that you can specify less than four parameters, and the
values will be applied on different sides of your box, so in the end
all side will have the whole `border-width` set.
I wanted to achieve the same for my `border-radius` mixin, although I
could not start specifically with the `top` side. I decided to go with
the top right corner for the first parameter, while trying to keep a
sane repeating pattern. Here is the result:
{% gist 313b227434ecc5d85d7b border-radius.sass %}