Skip to content

Instantly share code, notes, and snippets.

@kokarn
Last active December 13, 2015 19:18
Show Gist options
  • Save kokarn/4961244 to your computer and use it in GitHub Desktop.
Save kokarn/4961244 to your computer and use it in GitHub Desktop.
Custom fluid on non-fluid stuff. Example will loop from max-width: 1003px to max-width: 800px calculating the current number for the width on each step.
@mixin customFluid($start, $end, $startValue, $endValue) {
$diff: $end - $start;
$valueDiff: $endValue - $startValue;
@for $i from 1 through $diff {
$currentStep: $diff - $i;
$currentValue: $endValue - ( $valueDiff / $diff ) * $currentStep;
@media (max-width: 800px + $currentStep) {
#start-page {
width: $currentValue;
}
}
}
}
@include customFluid(800, 1004, 80%, 100%);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment