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

33 lines
1.3 KiB
Markdown
Raw Normal View History

2015-04-28 22:14:26 +00:00
---
layout: post
title: "Cross browser border-radius SASS mixin with varargs"
2016-02-26 15:26:26 +00:00
date: 2015-04-27 22:59:56
tags: [css, sass]
2015-04-28 22:14:26 +00: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
2015-06-22 20:25:32 +00:00
all side will have the whole `border-width` set.
2015-04-28 22:14:26 +00:00
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
2015-06-22 20:25:32 +00:00
sane repeating pattern. Here is the result:
2015-04-28 22:14:26 +00:00
2017-08-31 09:55:54 +00:00
{% gist 313b227434ecc5d85d7b border-radius.sass %}