Skip to content

Instantly share code, notes, and snippets.

@jofralogo
Last active December 15, 2015 21:18
Show Gist options
  • Save jofralogo/5324278 to your computer and use it in GitHub Desktop.
Save jofralogo/5324278 to your computer and use it in GitHub Desktop.
Useful responsive SCSS mixins for Foundation 4.
/*
_______
These simple SCSS/SASS mixins for Foundation 4 are made by me to deal with media-queries and have a clean code at the same time! ;)
****IMPORTANT****
Due to Foundation 4 uses mobile-first methodology, every $phone-"X" variable in these mixins defines the value for every screen size.
$desktop-"X" values overrides $phone-"X" values when the width of the window is 768px and above.
So, to simplify this, we can think that way: ($phone-"X" < 768px => $desktop-"X")
________
*/
/*
** MIXIN 1: RGRID - Responsive Grid **
This mixin provides an easy way to use the Foundation 4 grid classes and media-queries.
$phone-grid: number of grid columns.
$desktop-grid: number of grid columns that overrides $phone-grid for window width 768px and above.
Only one parameter could be declared to define a value for every window width.
i.e.:
@include rgrid(3,6); => 3 columns for phone, 6 columns for desktop.
@inculde rgrid(6); => 6 columns.
*/
@mixin rgrid($phone-grid:"",$desktop-grid:""){
@extend .small-#{$phone-grid};
@extend .large-#{$desktop-grid};
@extend .columns;
}
/*
** MIXIN 2: RFONT - Responsive Font Size **
Define a font-size for both desktop and phone.
If only one parameter is declared, the phone font-size will be automatically defined 30% smaller than the desktop font-size)
i.e.:
@include rfont(24,12); => "font-size:24px" for desktop screens & "font-size:12px" for mobile.
@include rfont(20); => "font-size:20px" for desktop screens & "font-size:14px" for mobile.
*/
@mixin rfont($desktop-font:"", $phone-font:$desktop-font*0.7){
font-size: #{$phone-font}px;
@media #{$small}{font-size: #{$desktop-font}px;}
}
/*
** MIXIN 3: RPROP - Responsive CSS Property **
Define any CSS property and their values for both desktop and phone.
i.e.:
@include rprop(margin-top,10px,20px); => "margin-top: 10px;" for mobile screens & "margin-top: 20px;" for desktop.
*/
@mixin rprop($prop,$phone-value, $desktop-value){
#{$prop}: $phone-value;
@media #{$small}{#{$prop}: $desktop-value;}
}
@juandelperal
Copy link

Great! thanks!

@juandelperal
Copy link

Hey! There is a bug in rprop. I think the last four lines must be:

@mixin rprop($prop,$phone-value, $desktop-value){
#{$prop}: $desktop-value;
@media #{$small}{#{$prop}: $phone-value;}
}

@jofralogo
Copy link
Author

juandelperal, I know it's weird but is not a bug, rprop works properly. It uses @media #{$small} from Foundation 4.

As you can see in "Working with Media Queries and SCSS" section in Foundation 4 docs (http://foundation.zurb.com/docs/media-queries.html):

"@media #{$small} is used to alter styles for screens at least 768px wide."

So, @media #{$small} refers to $desktop-value

;)

@dentos
Copy link

dentos commented Jul 2, 2013

This is just what I wanted. Thanks!

@bzerangue
Copy link

This is beautiful work.

@slogandigilent
Copy link

Awesome thank you!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment