2015-04-28 22:14:26 +00:00
|
|
|
|
---
|
|
|
|
|
|
layout: post
|
|
|
|
|
|
title: "Cross browser border-radius SASS mixin with varargs"
|
2016-02-26 15:19:42 +00:00
|
|
|
|
date: 2015-04-27T22:59:56Z
|
2015-08-19 10:44:27 +00:00
|
|
|
|
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
|
|
|
|
|
|
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
|
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
|
|
|
|
|
|
|
|
|
|
{% gist gergelypolonkai/313b227434ecc5d85d7b border-radius.sass %}
|
