Just some useful sass mixins that I use in my projects
You can use sassy-mixins in your project by installing it using npm:
npm i @schascha/sassy-mixins
@import '@schascha/sassy-mixins';
Only display content to screen readers.
.sr-only {
@include sr-only();
}
Compiles to:
.sr-only {
overflow: hidden;
position: absolute;
margin: -1px;
padding: 0;
width: 1px;
height: 1px;
clip: rect(0, 0, 0, 0);
border-width: 0;
white-space: nowrap;
}
Helper to organize your media queries.
$mobile: 600px !default;
$tablet: 900px !default;
$desk: 1200px !default;
.breakpoint {
@include mq($mobile) {
background: green;
}
@include mq($tablet) {
background: blue;
}
@include mq($desk) {
background: yellow;
}
@include mq($tablet, $desk - 1px) {
background: orange;
}
@include mq($max: $mobile - 1px) {
background: purple;
}
}
Compiles to:
@media screen and (min-width: 600px) {
.breakpoint {
background: green;
}
}
@media screen and (min-width: 900px) {
.breakpoint {
background: blue;
}
}
@media screen and (min-width: 1200px) {
.breakpoint {
background: yellow;
}
}
@media screen and (min-width: 900px) and (max-width: 1199px) {
.breakpoint {
background: orange;
}
}
@media screen and (max-width: 599px) {
.breakpoint {
background: purple;
}
}
Reset button or other form field brower default styles.
button {
@include button-reset();
}
Compiles to:
button {
appearance: none;
background: none;
border: 0;
outline: 0;
color: inherit;
font: inherit;
line-height: inherit;
text-align: inherit;
}
.clearfix {
@include clearfix();
}
Compiles to:
.clearfix::after {
content: '';
display: table;
clear: both;
}
Responsive embeds, like videos or iFrames. By default the ratio is 16:9. Other options are '4:3', '1:2', '2:1', '1:1' or custom numbers. Also accepts lists.
.embed {
@include embed-container();
iframe,
embed,
object,
video {
@include embed-element();
}
}
Compiles to:
.embed {
position: relative;
padding-bottom: 56.25%;
height: 0;
}
.embed iframe,
.embed embed,
.embed object,
.embed video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
@include font-face('OpenSans', '../fonts/OpenSans-Regular', $svg: 'OpenSansRegular');
Compiles to:
@font-face {
font-family: "OpenSans";
src: url("../fonts/OpenSans-Regular.eot");
src: url("../fonts/OpenSans-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/OpenSans-Regular.woff2") format("woff2"), url("../fonts/OpenSans-Regular.woff") format("woff"), url("../fonts/OpenSans-Regular.ttf") format("truetype"), url("../fonts/OpenSans-Regular.svg#OpenSansRegular") format("svg");
font-weight: normal;
font-style: normal;
}
Some font types are missing? Just update the $exts
property:
@include font-face('Only-Woff', '../fonts/OnlyWoff', $exts: woff2 woff);
Compiles to:
@font-face {
font-family: "Only-Woff";
src: url("../fonts/OnlyWoff.woff2") format("woff2"), url("../fonts/OnlyWoff.woff") format("woff");
font-weight: normal;
font-style: normal;
}
.absolute {
@include absolute(top 0 left 1rem);
}
.relative {
@include relative(left 50%);
}
.fixed {
@include fixed(0 0 0 0);
}
.sticky {
@include sticky(top);
}
Compiles to:
.absolute {
position: absolute;
top: 0;
left: 1rem;
}
.relative {
position: relative;
left: 50%;
}
.fixed {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.sticky {
position: sticky;
top: 0;
}
.image {
background-image: url('image.jpg');
@include retina() {
background-image: url('image@2x.jpg');
background-size: contain;
}
}
Compiles to:
.image {
background-image: url("image.jpg");
}
@media only screen and (min-device-pixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
.image {
background-image: url("image@2x.jpg");
background-size: contain;
}
}
.text-truncate {
@include text-truncate();
}
Compiles to:
.text-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Add styles depending on a theme variable.
$theme: 'foo';
.theme {
@include theme('foo') {
background: red;
}
}
Compiles to:
.theme {
background: red;
}
A font-size helper function for em and rem units.
$font-size-base: 16px; // Define base font-size
h1 {
font-size: rem(30);
> span {
font-size: em(24, 30);
}
}
Compiles to:
h1 {
font-size: 1.875rem;
}
h1 > span {
font-size: 0.8em;
}
Please let me know: https://github.com/Schascha/sassy-mixins/issues
Support this project and others via PayPal. Thanks
Copyright (c) 2018 Sascha Künstler