Add border-radius mixin post

This commit is contained in:
Gergely Polonkai 2015-04-28 22:14:26 +00:00 committed by Gergely Polonkai
parent d0d56ec8bf
commit eee4bfcf2d
1 changed files with 31 additions and 0 deletions

View File

@ -0,0 +1,31 @@
---
layout: post
title: "Cross browser border-radius SASS mixin with varargs"
date: 2015-04-28 00:59:56+02:00
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 a `border-witdh` 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 repeting pattern. Here is the result:
{% gist gergelypolonkai/313b227434ecc5d85d7b border-radius.sass %}