1
2
// Defines a property value to change linearly
// from @px1_in at viewport @vp1_in
For all the pixel-perfectionists – a mixin that allows to specify a responsive CSS property value. Inspired by Raivo's "calc" tool.
For example, in case of
#m5 {.responsive_px(padding-bottom, 66, 365, 24, 767)}
#m5 will have padding-bottom 66px in a 365px viewport.
While extending the viewport, the padding will decrease until it is exactly 24px in a 767px viewport.
The resulting CSS in the example is
#m5 {padding-bottom: calc(104px - 10.4vw)}
For example, in case of
#m5 {.responsive_px(padding-bottom, 66, 365, 24, 767)}
#m5 will have padding-bottom 66px in a 365px viewport.
While extending the viewport, the padding will decrease until it is exactly 24px in a 767px viewport.
The resulting CSS in the example is
#m5 {padding-bottom: calc(104px - 10.4vw)}
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.