blonfu blonfu - 5 months ago 31
CSS Question

How can I skip the media-query in a Stylus function?

I have a function in Stylus like this:

fn($margin, $padding)
width 100%
margin $margin
padding $padding
@media (min-width: 500px)
width 50%
float left


It works well until I want to use a second media query changing the values of the function:

div
fn(3px, 5px)
@media (min-width: 700px)
fn(6px, 25px)


I get this css:

div {
width: 100%;
margin: 3px;
padding: 5px;
}
@media (min-width: 500px) {
div {
width: 50%;
float: left;
}
}
@media (min-width: 700px) {
div {
width: 100%;
margin: 6px;
padding: 25px;
}
}
@media (min-width: 700px) and (min-width: 500px) {
div {
width: 50%;
float: left;
}
}


Obviously this is not what I want because the media query of the function overwrites some properties of the new media query.

Would there be any way to skip that part of the function when I call the function from a media query?

EDIT (expand the explanation):

For example a user writes:
grid (3, 10px)
and a grid of three columns is generated with 10px gutter. That grid is responsive, with less than 500px there is only one column. At the same time the user might want to make their own breakpoints, for example:

div
grid(3, 10px)
@media (min-width: 700px)
grid(4, 20px)


What I want is to keep the media query 500px by default without the user having to define it, so I have put it in the function.

Answer

I found a solution. It doesn't work with block mixins that I use for media-queries but with media-queries in normal syntax works fine. Just have to use the current-media() function, if empty continue, if not skip de block. That easy :).

Stylus code:

fn($margin, $padding)
  width 100%
  margin $margin
  padding $padding
  if current-media() is ''
    @media (min-width: 500px)
      width 50%
      float left

div
  fn(3px, 5px)
  @media (min-width: 700px)
    fn(6px, 25px)

CSS output:

div {
  width: 100%;
  margin: 3px;
  padding: 5px;
}
@media (min-width: 500px) {
  div {
    width: 50%;
    float: left;
  }
}
@media (min-width: 700px) {
  div {
    width: 100%;
    margin: 6px;
    padding: 25px;
  }
}