Thanks to modern CSS preprocessors such as Sass and Less, writing CSS is exponentially more efficient, organized and powerful. Sass mixins are one feature of Sass that can greatly enrich a front end developer’s styling process. Sass mixins are CSS functions with reusable functionality that can be included anywhere in Sass files. This blog post will focus on aem-fed-mixins, a new NPM package that our internal ICF Next development team has recently released which contains a collection of mixins intended for use by AEM front end developers.
Installation of aem-fed-mixins
To install aem-fed-mixins for your project simply run “npm install aem-fed-mixins –save” at the same directory level of your package.json file. After the node module has been installed, import a path to the package’s master mixins file:
@import "./node_modules/aem-fed-mixins/mixins/_mixins.scss";
Available Sass Mixins
Currently, aem-fed-mixins offers the following collections of Sass mixins:
- General Mixins
- Typography Mixins
- Flexbox Mixins
- Media Query Mixins
General Mixins
The first collection of Sass mixins in aem-fed-mixins is a miscellaneous assortment of sizing, spacing, layout and other useful mixins. The input placeholder mixin provides cross browser support when styling placeholders, which saves developers several lines of code:
.demo-input {
@include input-placeholder {
color: #000000;
}
// .demo-input.placeholder {
// color: #000000; }
// .demo-input:-moz-placeholder {
// color: #000000; }
// .demo-input::-moz-placeholder {
// color: #000000; }
// .demo-input:-ms-input-placeholder {
// color: #000000; }
// .demo-input::-webkit-input-placeholder {
// color: #000000; }
}
The background color transparency mixin is a simple yet handy function for custom opacity backgrounds. The mixin can be used with an @include rule by passing in a hex color and opacity value as arguments to the function:
.demo-container {
@include background-color-transparent(#000000, 0.2);
// background-color: #000000;
// opacity: 0.2;
}
Typography Mixins
The next collection is a group of typography-related mixins. Provided typography mixins include body copy and heading mixins (from H1 to H5) – all with responsive font-sizes and line-heights. One mixin that I have personally used on many projects in the past that is also provided is a pixel to rem conversion mixin. Using rem (or “root em”) units allows developers to style elements with values that are calculated relative to root element size. This notion is particular helpful for font-size. Developers can use the pixel to rem mixin by simply passing in a pixel value, which will be then converted into the appropriate rem value upon CSS compilation:
.demo-text {
font-size: rem(20);
// font-size: 2rem;
}
Flexbox Mixins
CSS’s Flexible Box module or “Flexbox” is a layout mode with many properties that allow developers to efficiently lay out, align and distribute space among items in a container element – including when container size is dynamic or unknown. Flexbox is especially helpful when building for responsive design. The aem-fed-mixins package currently has several mixins for flex containers, flex-direction, and horizontal/vertical alignment of flex items. Flexbox prefixes are also provided for cross-browser support. If a developer would like to create a column-based flex container with all inner items center-aligned (vertically and horizontally), one can easily use the following @include rules:
.demo-container {
@include flexbox;
@include flexdirection(column);
@include justify-content(center);
@include align-items(center);
// display: flex;
// flex-direction: column;
// justify-content: center;
// align-items: center;
// display: -webkit-box;
// display: -moz-box;
// display: -webkit-flex;
// display: -ms-flexbox;
// -webkit-flex-direction: column;
// -moz-flex-direction: column;
// -ms-flex-direction: column;
// -webkit-box-direction: normal;
// -webkit-box-orient: vertical;
// -moz-box-direction: normal;
// -moz-box-orient: vertical;
// -webkit-box-pack: center;
// -moz-box-pack: center;
// -ms-flex-pack: center;
// -webkit-justify-content: center;
// -moz-justify-content: center;
// -ms-justify-content: center;
// -webkit-box-align: center;
// -moz-box-align: center;
// -webkit-align-items: center;
// -moz-align-items: center;
// -ms-align-items: center;
}
Media Query Mixins
Last, but certainly not least, aem-fed-mixins offers a robust collection of media query mixins to aid in mobile-first responsive design. Media query mixins for mobile, large mobile, tablet, desktop and wide desktop viewports are provided in addition to mixins for device orientations. The following example utilizes both media queries mixins and previously mentioned Flexbox mixins for a responsive container with styles that are dependent on device viewport breakpoints:
.demo-container {
width: 100%;
@include flexbox;
@include media-mobile-only {
@include flex-direction(column);
@include justify-content(flex-start);
@include align-items(flex-start);
}
@include media-tablet-and-up {
@include flex-direction(row);
@include justify-content(center);
@include align-items(center);
}
// width: 100%;
// display: flex;
// display: -webkit-box;
// display: -moz-box;
// display: -webkit-flex;
// display: -ms-flexbox;
// @media screen and (max-width: 767px) {
// flex-direction: column;
// justify-content: flex-start;
// align-items: flex-start;
// -webkit-box-pack: start;
// -moz-box-pack: start;
// -ms-flex-pack: start;
// -webkit-flex-direction: column;
// -moz-flex-direction: column;
// -ms-flex-direction: column;
// -webkit-box-direction: normal;
// -webkit-box-orient: vertical;
// -moz-box-direction: normal;
// -moz-box-orient: vertical;
// -webkit-justify-content: flex-start;
// -moz-justify-content: flex-start;
// -ms-justify-content: flex-start;
// -webkit-box-pack: start;
// -moz-box-pack: start;
// -ms-flex-pack: start;
// -webkit-align-items: flex-start;
// -moz-align-items: flex-start;
// -ms-align-items: flex-start;
// -webkit-box-align: start;
// -moz-box-align: start;
// -ms-flex-align: start;
// }
// @media screen and (min-width: 768px) {
// flex-direction: row;
// justify-content: center;
// align-items: center;
// -webkit-box-direction: normal;
// -webkit-box-orient: horizontal;
// -moz-box-direction: normal;
// -moz-box-orient: horizontal;
// -webkit-flex-direction: row;
// -moz-flex-direction: row;
// -ms-flex-direction: row;
// -webkit-box-pack: center;
// -moz-box-pack: center;
// -ms-flex-pack: center;
// -webkit-justify-content: center;
// -moz-justify-content: center;
// -ms-justify-content: center;
// -webkit-box-align: center;
// -moz-box-align: center;
// -webkit-align-items: center;
// -moz-align-items: center;
// -ms-align-items: center;
// }
}
To learn more about the aem-fed-mixins package visit the NPM aem-fed-mixins homepage.
Leave a Reply