A must-have Sass mixin library for all your Sassy needs
http://arunmichaeldsouza.github.io/pineapple-sass/
You can install the package using bower. Make sure you have bower installed, then run :
bower install pineapple-sass
npm install pineapple-sass
Or download the latest release.
The _pineapple-sass.scss build script is a Sass partial that can be included in your sass project. All pineapple sass mixins will be then readily avaialble for your use.
You can also use the individual mixin components present in the src
folder -
Add CSS transition to any element
Syntax
@include transition($transition...);
Example
.element {
@include transition(opacity .20s ease-in);
}
Output CSS -
.element {
-webkit-transition: opacity 0.2s ease-in;
-moz-transition: opacity 0.2s ease-in;
-o-transition: opacity 0.2s ease-in;
-ms-transition: opacity 0.2s ease-in;
transition: opacity 0.2s ease-in;
}
Animate an element
Syntax
@include animation($animation...);
By default the $delay is set to 0.
Example
.element {
@include animation(test 3s infinte 2s);
}
Output CSS -
.element {
-webkit-animation: test 3s 2s infinte;
-moz-animation: test 3s 2s infinte;
-o-animation: test 3s 2s infinte;
animation: test 3s 2s infinte;
}
Add opacity to a background color. Converts a HEX value into its rgba() equivalent
Syntax
@include backgroundOpacity($color, $opacity);
Example
.element {
@include backgroundOpacity(#50a4e2, .5);
}
Output CSS -
.element {
background-color: rgba(80, 164, 226, 0.5);
}
Set background size for a background image
Syntax
@include backgroundSize($size);
Example
.element1 {
@include backgroundSize(100%);
}
.element2 {
@include backgroundSize(cover);
}
Output CSS -
.element1 {
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
}
.element2 {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Add a linear gradient to any element's background
Syntax
@include linearGradient($gradientValues...);
Example
.element {
@include linearGradient(left, #00a0e3 5%, #50a4e2, #0a6da7);
}
Output CSS -
.element {
background: -webkit-linear-gradient(left, #00a0e3 5%, #50a4e2, #0a6da7);
background: -moz-linear-gradient(left, #00a0e3 5%, #50a4e2, #0a6da7);
background: -o-linear-gradient(left, #00a0e3 5%, #50a4e2, #0a6da7);
background: linear-gradient(to right, #00a0e3 5%, #50a4e2, #0a6da7);
}
Add a repeating linear gradient to any element's background
Syntax
@include repeatingLinearGradient($gradientValues...)
Example
.element {
@include repeatingLinearGradient(left, #00a0e3, #50a4e2, #0a6da7);
}
Output CSS -
.element {
background: -webkit-repeating-linear-gradient(left, #00a0e3, #50a4e2, #0a6da7);
background: -moz-repeating-linear-gradient(left, #00a0e3, #50a4e2, #0a6da7);
background: -o-repeating-linear-gradient(left, #00a0e3, #50a4e2, #0a6da7);
background: repeating-linear-gradient(to right, #00a0e3, #50a4e2, #0a6da7);
}
Add a radial gradient to any element's background
Syntax
@include radialGradient($gradientValues...);
Example
.element {
@include radialGradient(#50a4e2, #0a6da7, #00a0e3);
}
Output CSS -
.element {
background: -webkit-radial-gradient(#50a4e2, #0a6da7, #00a0e3);
background: -o-radial-gradient(#50a4e2, #0a6da7, #00a0e3);
background: -moz-radial-gradient(#50a4e2, #0a6da7, #00a0e3);
background: radial-gradient(#50a4e2, #0a6da7, #00a0e3);
}
Add a repeating radial gradient to any element's background
Syntax
@include repeatingRadialGradient($gradientValues...);
Example
.element {
@include repeatingRadialGradient(#50a4e2, #00a0e3, #0a6da7);
}
Output CSS -
.element {
background: -webkit-repeating-radial-gradient(#50a4e2, #00a0e3, #0a6da7);
background: -o-repeating-radial-gradient(#50a4e2, #00a0e3, #0a6da7);
background: -moz-repeating-radial-gradient(#50a4e2, #00a0e3, #0a6da7);
background: repeating-radial-gradient(#50a4e2, #00a0e3, #0a6da7);
}
Add a border to any element
Syntax
@include border($width, $style, $color);
Example
.element {
@include border(1px, dotted, #000);
}
Output CSS -
.element {
border: 1px dotted #000;
}
Add border radius to an element
Syntax
@include borderRadius($radius);
Example
.element {
@include borderRadius(5px);
}
Output CSS -
.element {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Add border radius to a specifix edge(left/right) of an element
Syntax
@include borderRadiusEdge($edge, $radius);
Example
.element {
@include borderRadiusEdge(left, 20px);
}
Output CSS -
.element {
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
Add border and a radius to any side(top/bottom/left/right) of an element
Syntax
@include sideBorderAndRadius($side, $width, $type, $color, $radius);
By default the $radius is set to 0.
Example
.element {
@include sideBorderAndRadius(bottom, 2px, solid, #3FCA5C, 10px);
}
Output CSS -
.element {
border-bottom: 2px solid #3FCA5C;
border-left: none;
border-top: none;
border-right: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
Add a border image to any element
Syntax
@include borderImage($borderWidth, $url, $mode, $sliceTop, $sliceRight, $sliceBottom, $sliceLeft)
By default $sliceRight, $sliceBottom and $sliceLeft are set to 0.
Example
.element {
@include borderImage(10px, "https://mdn.mozillademos.org/files/4127/border.png", round, 30);
}
Output CSS -
.element {
border-width: 10px;
-webkit-border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 30 round;
-moz-border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 30 round;
-o-border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 30 round;
border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 30 round;
}
Add clearfix hack - to contain floats within containers
Syntax
@include clearfix;
Example
.element {
@include clearfix;
}
Output CSS -
.element:before, .element:after {
content: "";
clear: both;
display: table;
}
Add flex display property to any element
Syntax
@include displayFlex;
Example
.element {
@include displayFlex;
}
Output CSS -
.element {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
Set box sizing for an element
Syntax
@include boxSizing($sizing);
Example
.element {
@include boxSizing(border-box);
}
Output CSS -
.element {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Truncate single line text
Syntax
@include truncate;
Example
.element {
@include truncate;
}
Output CSS -
.element {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Blur an element
Syntax
@include blur($value);
Where value is in px.
Example
.element {
@include blur(5px);
}
Output CSS -
.element {
-webkit-filter: blur(5px);
filter: blur(5px);
}
Add grayscale filter to an element
Syntax
@include grayscale($value);
Where value is in %.
Example
.element {
@include grayscale(80%);
}
Output CSS -
.element {
-webkit-filter: grayscale(80%);
filter: grayscale(80%);
}
Add sepia filter to an element
Syntax
@include sepia($value);
Where value is in %.
Example
.element {
@include sepia(80%);
}
Output CSS -
.element {
-webkit-filter: sepia(80%);
filter: sepia(80%);
}
Add saturation filter to an element
Syntax
@include saturate($value);
Where value is in % or is a number.
Example
.element {
@include saturate(80);
}
Output CSS -
.element {
-webkit-filter: saturate(80);
filter: saturate(80);
}
Rotate hue of an element
Syntax
@include hueRotate($value);
Where value is in degrees.
Example
.element {
@include hueRotate(80deg);
}
Output CSS -
.element {
-webkit-filter: hue-rotate(80deg);
filter: hue-rotate(80deg);
}
Invert colors of an element
Syntax
@include invert($value);
Where value is in %.
Example
.element {
@include invert(80%);
}
Output CSS -
.element {
-webkit-filter: invert(80%);
filter: invert(80%);
}
Set opacity of an element
Syntax
@include opacity($value);
Where value is in %.
Example
.element {
@include opacity(30%);
}
Output CSS -
.element {
-webkit-filter: opacity(30%);
filter: opacity(30%);
}
Set brightness of an element
Syntax
@include brightness($value);
Where value is in %.
Example
.element {
@include brightness(80%);
}
Output CSS -
.element {
-webkit-filter: brightness(80%);
filter: brightness(80%);
}
Set contrast of an element
Syntax
@include contrast($value);
Where value is in %.
Example
.element {
@include contrast(150%);
}
Output CSS -
.element {
-webkit-filter: contrast(150%);
filter: contrast(150%);
}
Add drop shadow filter to an element
Syntax
@include dropShadow($value);
Example
.element {
@include dropShadow(1px 2px 3px rgba(0,0,0,.45));
}
Output CSS -
.element {
-webkit-filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.45));
filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.45));
}
Add an SVG filter via URL
Syntax
@include url($value);
Example
.element {
@include url(#svg-blur);
}
Output CSS -
.element {
-webkit-filter: url(#svg-blur);
filter: url(#svg-blur);
}
Load a web-safe font with fallbacks
Syntax
@include fontFace($font);
Example
.element1 {
@include fontFace(Times);
}
.element2 {
@include fontFace(Helvetica);
}
Output CSS -
.element1 {
font-family: times, serif;
}
.element2 {
font-family: helvetica, sans-serif;
}
Pineapple Sass has 5 inbuilt breakpoint variables -
$largeScreen: 1200px;
$mediumScreen: 992px;
$smallScreen: 768px;
$extraSmallScreen: 480px;
$smallMobile: 320px;
These breakpoint variables are used with the media query mixins.
Detect large screens and apply css
Syntax
@include media-l-screen {
...
}
Example
.element {
@include media-l-screen {
background-color: #eee;
}
}
Output CSS -
@media screen and (max-width: 1200px) {
.element {
background-color: #eee;
}
}
Detect medium screens and apply css
Syntax
@include media-m-screen {
...
}
Example
.element {
@include media-m-screen {
background-color: #ddd;
}
}
Output CSS -
@media screen and (max-width: 992px) {
.element {
background-color: #ddd;
}
}
Detect small screens and apply css
Syntax
@include media-s-screen {
...
}
Example
.element {
@include media-s-screen {
background-color: #ccc;
}
}
Output CSS -
@media screen and (max-width: 768px) {
.element {
background-color: #ccc;
}
}
Detect x-small screens and apply css
Syntax
@include media-xs-screen {
...
}
Example
.element {
@include media-xs-screen {
background-color: #bbb;
}
}
Output CSS -
@media screen and (max-width: 480px) {
.element {
background-color: #bbb;
}
}
Detect small mobile screens and apply css
Syntax
@include media-s-mobile {
...
}
Example
.element {
@include media-s-mobile {
background-color: #aaa;
}
}
Output CSS -
@media screen and (max-width: 320px) {
.element {
background-color: #aaa;
}
}
Detect retina screen and apply css
Syntax
@include media-retina {
...
}
Example
.element {
@include media-retina {
background-color: #50a4e2;
}
}
Output CSS -
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
.element {
background-color: #50a4e2;
}
}
Retinize a background image
Syntax
retinizeBackground($file, $postfix, $type, $width, $height, $location);
Where,
$file
is the file name
$postfix
is the high-res image postfix. Eg - If you have image.png
as your
primary image, and image-2x.png
as your postfixed high-res image (which will be used on
retina screens), then -2x
is the postfix.
$type
is the file type of image
$width
is the width of image
$height
is the height of image
$location
is the location of the files. By default it is set to empty string.
Example
.element {
@include retinizeBackground("image", "-2x", "png", 200px, 200px, "../img/");
}
Output CSS -
.element {
background-image: url("../img/image.png");
-webkit-background-size: 200px 200px;
-moz-background-size: 200px 200px;
-o-background-size: 200px 200px;
background-size: 200px 200px;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
.element {
background-image: url("../img/image-2x.png");
-webkit-background-size: 200px 200px;
-moz-background-size: 200px 200px;
-o-background-size: 200px 200px;
background-size: 200px 200px;
}
}
Add box shadow to any element
Syntax
@include boxShadow($shadows...);
Example
.element {
@include boxShadow(0px 4px 5px #666, 2px 6px 10px #999);
}
Output CSS -
.element {
-webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
-moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}
Add inset box shadow to any element
Syntax
@include insetBoxShadow($x, $y, $blur, $color);
Example
.element {
@include insetBoxShadow(0, 2px, 10px, #444);
}
Output CSS -
.element {
-webkit-box-shadow: inset 0 2px 10px #444;
-moz-box-shadow: inset 0 2px 10px #444;
box-shadow: inset 0 2px 10px #444;
}
Set user select property for an element
Syntax
@include userSelect($value);
Example
.element {
@include userSelect(none);
}
Output CSS -
.element {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
Modify css for text selection
Syntax
@include textSelection {
...
}
Example
.element {
@include textSelection {
color: #343434;
background-color: #a0a0a0;
}
}
Output CSS -
.element::selection,
.element::-moz-selection {
color: #343434;
background-color: #a0a0a0;
}
Style placeholders within input fields
Syntax
@include placeholder {
...
}
Example
.element {
@include placeholder {
color: #E4204D;
}
}
Output CSS -
.element::-webkit-input-placeholder {
color: #E4204D;
}
.element:-moz-placeholder {
color: #E4204D;
}
.element::-moz-placeholder {
color: #E4204D;
}
.element:-ms-input-placeholder {
color: #E4204D;
}
Scale an element
Syntax
@include scale($x, $y);
By default $y is set to 0.
Example
.element {
@include scale(2, 3);
}
Output CSS -
.element {
-webkit-transform: scale(2, 3);
-moz-transform: scale(2, 3);
-o-transform: scale(2, 3);
-ms-transform: scale(2, 3);
transform: scale(2, 3);
}
Translate an element
Syntax
@include translate($x, $y);
By default $y is set to 0.
Example
.element {
@include translate(10px, 30px);
}
Output CSS -
.element {
-webkit-transform: translate(10px, 30px);
-moz-transform: translate(10px, 30px);
-o-transform: translate(10px, 30px);
-ms-transform: translate(10px, 30px);
transform: translate(10px, 30px);
}
Rotate an element
Syntax
@include rotate($deg);
Where $deg is a number.
Example
.element {
@include rotate(45);
}
Output CSS -
.element {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-backface-visibility: hidden;
}
Skew an element
Syntax
@include skew($x, $y);
Where $x and $y are numbers. By default $y is set to 0.
Example
.element {
@include skew(20);
}
Output CSS -
.element {
-webkit-transform: skew(20deg, 0deg);
-moz-transform: skew(20deg, 0deg);
-o-transform: skew(20deg, 0deg);
-ms-transform: skew(20deg, 0deg);
transform: skew(20deg, 0deg);
-webkit-backface-visibility: hidden;
}
Flip / mirror an element
Syntax
@include flip;
Example
.element {
@include flip;
}
Output CSS -
.element {
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
Add a pointer cursor to the hover state of an element
Syntax
@include cursorPointer;
Example
.element {
@include cursorPointer;
}
Output CSS -
.element:hover {
cursor: pointer;
}
Remove focus from a button or input field while in focused state
Syntax
@include noFocus;
Example
.element {
@include noFocus;
}
Output CSS -
.element:focus {
outline: none;
box-shadow: none;
}
If you'd like to help support the development of the project, please consider backing me on Patreon -
MIT Licensed
Copyright (c) 2015 Arun Michael Dsouza (amdsouza92@gmail.com)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.