stylus-mixins
Stylus CSS compile engine mixins
The idea of creating these mixins has appeared with a necessity to use unified, non-spagetti code blocks.
The difference from other mixins is that's not hardcoded prefixes for each property. For instance these mixins give a user an opportunity to decide which prefixes will be included in css property block and which will be skipped.
Rem mixin
I prefer to develop sites using rem values instead of pixels for browser to calculate dimensions on it's own. Or it's the best solution to make mobile layout for sites or apps without need to test on devices. Because the px
value on mobile devices with different dpi will show the virtual pixel size, but the rem
will show the real pixels instead.
This mixin has a built-in fallback technique for old browsers. You should have some global variable set to true in order to calculate everything in pixels. Here
$is-ie8
global variable tells mixin to generate pixel values instead ofrems
;$base-font
global variable represents the initial divider forrem
generation.
You can pass:
- one argument;
- or arbitrary number of arguments where zero values will be left untouched;
- additional key words;
- other built-in or arbitrary mixins;
- special words like auto;
Let the basic $font-size
be 10px
Mixin sample:
1. rem(left,1)
2. rem(padding,10 5 12 0)
3. rem(border,1,solid green)
4. rem(box-shadow,1 1 0 -1,rgba(0,0,0,0.3))
5. rem(margin,10 auto 3)
Compiled sample:
1. left: 0.1rem;
2. padding: 1rem 0.5rem 1.2rem 0;
3. border: 0.1rem solid #008000;
4. box-shadow: 0.1rem 0.1rem 0 -0.1rem rgba(0,0,0,0.3);
5. margin: 1rem auto 0.3rem;
Px-To-Rem mixin
If you don't use some global variable for compilation separate files for browsers that don't support rems to compile proper pixel fallback, then feel free to use this mixin to generate css blocks with both px
and rem
values.
Old browsers wiil use px
values while new ones will overwright this value this rem
one.
But be aware of that every extra line of code is always redundant unless you are confident with computing powers of devices you are coding for. And not afraid of possible repainting overwhelmings. Here
$base-font
global variable represents the initial divider forrem
generation.
You can pass:
- one argument;
- or arbitrary number of arguments where zero values will be left untouched;
- additional key words;
- other built-in or arbitrary mixins;
- special words like auto;
Let the basic $font-size
be 10px
Mixin sample:
1. rem(left,1)
2. rem(padding,10 5 12 0)
3. rem(border,1,solid green)
4. rem(margin,10 auto 3)
Compiled sample:
1. left: 1px;
left: 0.1rem;
2. padding: 10px 5px 12px 0;
padding: 1rem 0.5rem 1.2rem 0;
3. border: 1px solid #008000;
border: 0.1rem solid #008000;
4. margin: 10px auto 3px;
4. margin: 1rem auto 0.3rem;
Base-Font mixin
In case you need to design fully flexible and "rubber" mobile site, or some application based on HTML views, and you want to be confident about different screen sizes, then due to this technique you will have same view on any device iff your mockup is fine for sure)).
While setting body font-size based on the initial width of a designer's mockup, the resulting layout will be absolutely independent and scaled to any screen width on its own. Here
$initial-mockup-width
variable represents the PSD (or other format) width of the mobile mockup.$mdeia-divider-step
variable represents the step of media-query iteration in order to set the<html>
element's font-size to be integer.$mdeia-lowest-width
variable represents the lowest min-width media-query if there's no need t osupport tiny screens, by default will be0
.$base-font
variable represents the html base font, which you'd prefer to use for your calculations ofrem
values.
So if we have some mockup, e.g. designed for iPhone 5 screen, designers always draw in real device pixels, not taking into account the virtual ones, so the mockup width will be 640px
.
Font-size for our project will be 10px
(it's always ease to divide by 10 inwardly). To preserve all the ratios of the mockup on any screen we will need to iterate the <html>
base font-size. For instance for 320px width screen
the font-isze for <html>
will be decreased by two, because mockup width divided by initial base-font will give us step of other divisions. And current screen width divided by this step will be 320 / (640 / 10) = 5
which is exactly twice less than initial base font-size.
And as rem
values calculated from the root of the document => all dimensions will be lessened twice.
Prefixer mixin
This mixin will help to generate proper vendor prefixes for css properties. You should always try not to use obsolete vendors, it's always extra unnecessary code, extra file weight and some extra headache for webview rendering engine. It's real pain for heavy huge projects.
You can pass:
- one argument;
- or arbitrary number of arguments;
- exclude redundant vendors.
Mixin sample:
1. prefixer(border-radius,0)
2. prefixer(transform,unquote("rotateX(5deg) translateY(10px) skew(5deg,5deg)"))
3. prefixer(box-sizing,border-box,-moz- -ms-)
Compiled sample:
1. -webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
2. -webkit-transform: rotateX(5deg) translateY(10px) skew(5deg,5deg);
-moz-transform: rotateX(5deg) translateY(10px) skew(5deg,5deg);
-ms-transform: rotateX(5deg) translateY(10px) skew(5deg,5deg);
-o-transform: rotateX(5deg) translateY(10px) skew(5deg,5deg);
transform: rotateX(5deg) translateY(10px) skew(5deg,5deg);
3. -webkit-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
Viewport Width responsive Block Calculator Mixin
This mixin is helpful for mobile layouts. Setting width : 100%
and height : auto
on <img>
element tag will make browser automatically calculate the necessary height, preserving the image ratio.
But this technique is not working for simple <div>
or any other block element. Just setting height : auto
or height : 100%
will mend nothing.
vw
and vh
values will be used instead, they are barely used but have strong supported, starting from IE9. Here
iwidth
variable represents the initial width of the block.iheight
variable represents the initial height of the block.$vw
variable represents the container's initial width if specified. Mixin should be implemented width media query lower than this value.margins
variable represents the additional margins around block, influencing on ratio.
For instance, there's block 640x320px
. The block is in the container width width 1280px
and has additinal margin of 5px
. Mixin should be used with media-query @media (max-width: 1280px)
:
Mixin sample:
.backgrounded-div
width 640px
height 320px
background url('assets/img/super-awesome-bgr.png') 0 0 no-repeat scroll
background-size cover
@media (max-width: 1280px)
vw-responsive-block(640,320,1280,5)
Compiled sample:
.backgrounded-div {
width: 640px;
height: 320px;
background: url("assets/img/super-awesome-bgr.png") 0 0 no-repeat scroll;
background-size: cover;
}
@media (max-width: 1280px) {
.backgrounded-div {
width: 50vw;
height: 24.9027237354086vw;
}
}