handy.sass.mixins v1.2.5
handy.Sass.Mixins
A collection of mixins for responsive images , dynamic directional styles, predefined text rows count and keyframes
Installation
To install the package just type the following
npm install handy.sass.mixins --saveHow To Use
after installing the package , include shared.scss file
@import 'handy.sass.mixins/scss/shared.scss' ;Files Included
there are two main files included in the package :
Handy Mixins
Directional mixins for rtl and ltr
Imortant Notes
Direction mixins uses dir html attribute so you need to specify that attribute's value
<html dir="ltr">
<heade>
<!--meta tags and links here-->
</heade>
<body>
<!--Your body here-->
</body>
</html>- float-right(): floats the element to the right if the dir attribute equals 'ltr' else to the left
float-left(): floats the element to the left if the dir attribute equals 'ltr' else to the right
position-right($value):places the element to the right by the specified value if the dir attribute equals 'ltr' else to the left
position-left($value):places the element to the left by the specified value if the dir attribute equals 'ltr' else to the right
text-align(): aligns the text to the left if dir attribute equals 'ltr', else aligns it the to the right
- text-align-reverse(): aligns the text to the right if dir attribute equals 'ltr', else aligns it the to the left
- padding-right($value): applies padding to the right of the element by the specified value if dir attribute equals 'ltr' ,else applies it to the left
padding-left($value): applies padding to the left of the element by the specified value if dir attribute equals 'ltr' ,else applies it to the right
margin-right($value): applies margin to the right of the element by the specified value if dir attribute equals 'ltr' ,else applies it to the left
margin-left($value): applies margin to the left of the element by the specified value if dir attribute equals 'ltr' ,else applies it to the right
border-right($value): draws right border the specified value if dir attribute equals 'ltr' ,else draws left border.
- border-left($value): draws left border the specified value if dir attribute equals 'ltr' ,else draws right border.
border-radius-directional($value): applies left top and bottom border radius if dir attribute equals 'ltr' , else applies right top and bottom border radius by the specified value
flex-row-direction(): assigns flex-direction's value to row if dir attribute equals 'ltr' ,else the value will be row-reverse , (note: no need for this mixin with bootstrap 4 )
- direction(): assigns direction's property value to 'ltr' if the the dir attribute equals 'ltr' , else assigns 'rtl'.
- direction-reverse(): assigns direction's property value to 'rtl' if the the dir attribute equals 'ltr' , else assigns 'ltr'.
- background-directional-img( $left-img, $right-img): background-image value will be equal to the $left-img if the dir attribute equals 'ltr' else will be equal to $right-img.
- background-position-x-left():assigns the background-position-x property to the left if the dir attribute equals 'ltr' else to the right.
- background-position-x-right():assigns the background-position-x property to the right if the dir attribute equals 'ltr' else to the left.
- Keyframes($animationName):this mixin for dynamically creating @keframes prefixes
Implementation Example:
@include keyframes(myanimation) {
0%{
//properties
}
100%{
//properties
}
}- multiline-ellipses($font-size, $line-height, $lines, $width:100%):this mixin helps you specify how many line the element should take after specifying the desired number of lines , font-size and line-height . Implementation Example:
p{
@include multiline-ellipses(16px,1.2,2)
}- aspect-ratio($width, $height): for responsive images that maintains specified aspect ratio .
Implementation Example:
HTML structure :
<div class="img-container">
<div class="content">
<img src="pathto/image"/>
<!--any other element-->
</div>
</div>SCSS :
.img-container {
@include aspect-ratio(16,9);/*Desired Aspect Ratio*/
img{
width:100%;
height:100%;
}
}