From eee4bfcf2dda8a49aba3f50cbcdaa24880f99ec8 Mon Sep 17 00:00:00 2001 From: Gergely Polonkai Date: Tue, 28 Apr 2015 22:14:26 +0000 Subject: [PATCH] Add border-radius mixin post --- ...er-radius-sass-mixin-with-varargs.markdown | 31 +++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 _posts/2015-04-28-cross-browser-border-radius-sass-mixin-with-varargs.markdown diff --git a/_posts/2015-04-28-cross-browser-border-radius-sass-mixin-with-varargs.markdown b/_posts/2015-04-28-cross-browser-border-radius-sass-mixin-with-varargs.markdown new file mode 100644 index 0000000..5f14dd0 --- /dev/null +++ b/_posts/2015-04-28-cross-browser-border-radius-sass-mixin-with-varargs.markdown @@ -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 +Bootstrap’s [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 %}