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.
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-ie8global variable tells mixin to generate pixel values instead ofrems;$base-fontglobal variable represents the initial divider forremgeneration.
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
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)
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;
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-fontglobal variable represents the initial divider forremgeneration.
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
1. rem(left,1)
2. rem(padding,10 5 12 0)
3. rem(border,1,solid green)
4. rem(margin,10 auto 3)
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;
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-widthvariable represents the PSD (or other format) width of the mobile mockup.$mdeia-divider-stepvariable represents the step of media-query iteration in order to set the<html>element's font-size to be integer.$mdeia-lowest-widthvariable represents the lowest min-width media-query if there's no need t osupport tiny screens, by default will be0.$base-fontvariable represents the html base font, which you'd prefer to use for your calculations ofremvalues.
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.
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.
1. prefixer(border-radius,0)
2. prefixer(transform,unquote("rotateX(5deg) translateY(10px) skew(5deg,5deg)"))
3. prefixer(box-sizing,border-box,-moz- -ms-)
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;
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
iwidthvariable represents the initial width of the block.iheightvariable represents the initial height of the block.$vwvariable represents the container's initial width if specified. Mixin should be implemented width media query lower than this value.marginsvariable 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):
.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)
.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;
}
}