├── .gitignore ├── .npmignore ├── .editorconfig ├── mixins ├── _margin-auto.scss ├── _opacity.scss ├── _box-model.scss ├── _hide-text.scss ├── _breakpoint.scss ├── _replace-text.scss ├── _min-breakpoint.scss ├── _hover-focus.scss ├── _text-shadow.scss ├── _inline-block.scss ├── _single-transform.scss ├── _background-cover.scss ├── _clearfix.scss ├── _animations.scss ├── _backface-visibility.scss ├── _translate.scss ├── _inner-shadow.scss ├── _box-shadow.scss ├── _placeholder.scss ├── _keyframes.scss ├── _animate-link.scss ├── _retina.scss ├── _transform.scss ├── _rem.scss ├── _linear-gradient.scss ├── _linear-gradient-angle.scss ├── _transitions.scss ├── _triangles.scss └── _rounded-corners.scss ├── bower.json ├── Gruntfile.js ├── package.json ├── bin └── useful-mixins ├── README.md └── _mixins.scss /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | ~* 3 | *.bak 4 | *.tmp 5 | .sass-cache 6 | *.log 7 | node_modules/ -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | ~* 3 | *.bak 4 | *.tmp 5 | .sass-cache 6 | *.log 7 | node_modules/ 8 | Gruntfile.js 9 | package.json 10 | README.md 11 | bower.json -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # This file is for unifying the coding style for different editors and IDEs 2 | # editorconfig.org 3 | 4 | root = true 5 | 6 | [*] 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | indent_style = tab 11 | indent_size = 4 12 | 13 | [*.json] 14 | indent_style = spaces 15 | indent_size = 2 16 | -------------------------------------------------------------------------------- /mixins/_margin-auto.scss: -------------------------------------------------------------------------------- 1 | //------ SASS Useful Mixins --------------------------------------------- 2 | 3 | // by Ryan Burgess 4 | // https://github.com/ryanburgess/SASS-Useful-Mixins 5 | // MIT © Ryan Burgess 6 | 7 | // ---------------------------------------------------------------------- 8 | 9 | // Margin auto 10 | 11 | // ---------------------------------------------------------------------- 12 | 13 | // example: @include margin-auto(); 14 | 15 | @mixin margin-auto() { 16 | margin-left:auto; 17 | margin-right:auto; 18 | } -------------------------------------------------------------------------------- /mixins/_opacity.scss: -------------------------------------------------------------------------------- 1 | //------ SASS Useful Mixins --------------------------------------------- 2 | 3 | // by Ryan Burgess 4 | // https://github.com/ryanburgess/SASS-Useful-Mixins 5 | // MIT © Ryan Burgess 6 | 7 | // ----------------------------------------------------------------------- 8 | 9 | // Opacity 10 | 11 | // ---------------------------------------------------------------------- 12 | 13 | @mixin opacity($opacity) { 14 | opacity: $opacity; 15 | $opacity-ie: $opacity * 100; 16 | filter: alpha(opacity=$opacity-ie); //IE8 17 | } -------------------------------------------------------------------------------- /mixins/_box-model.scss: -------------------------------------------------------------------------------- 1 | //------ SASS Useful Mixins --------------------------------------------- 2 | 3 | // by Ryan Burgess 4 | // https://github.com/ryanburgess/SASS-Useful-Mixins 5 | // MIT © Ryan Burgess 6 | 7 | // ---------------------------------------------------------------------- 8 | 9 | // Box Model 10 | 11 | // ---------------------------------------------------------------------- 12 | 13 | @mixin box-sizing($box-model) { 14 | -webkit-box-sizing: $box-model; 15 | -moz-box-sizing: $box-model; 16 | box-sizing: $box-model; 17 | } -------------------------------------------------------------------------------- /mixins/_hide-text.scss: -------------------------------------------------------------------------------- 1 | //------ SASS Useful Mixins --------------------------------------------- 2 | 3 | // by Ryan Burgess 4 | // https://github.com/ryanburgess/SASS-Useful-Mixins 5 | // MIT © Ryan Burgess 6 | 7 | // ---------------------------------------------------------------------- 8 | 9 | // Hide Text 10 | 11 | // ---------------------------------------------------------------------- 12 | 13 | // example: @include hide-text(); 14 | 15 | @mixin hide-text() { 16 | position: relative; 17 | text-indent: -99999px; 18 | display: inline-block; 19 | } -------------------------------------------------------------------------------- /mixins/_breakpoint.scss: -------------------------------------------------------------------------------- 1 | //------ SASS Useful Mixins --------------------------------------------- 2 | 3 | // by Ryan Burgess 4 | // https://github.com/ryanburgess/SASS-Useful-Mixins 5 | // MIT © Ryan Burgess 6 | 7 | // ---------------------------------------------------------------------- 8 | 9 | // Media Query Breakpoints 10 | 11 | // ---------------------------------------------------------------------- 12 | 13 | // example @include breakpoint(940) { width:80%; } 14 | 15 | @mixin breakpoint($size) { 16 | @media only screen and (max-width: $size + px) { @content; } 17 | } -------------------------------------------------------------------------------- /mixins/_replace-text.scss: -------------------------------------------------------------------------------- 1 | //------ SASS Useful Mixins --------------------------------------------- 2 | 3 | // by Ryan Burgess 4 | // https://github.com/ryanburgess/SASS-Useful-Mixins 5 | // MIT © Ryan Burgess 6 | 7 | // ---------------------------------------------------------------------- 8 | 9 | // Replace text 10 | 11 | // ---------------------------------------------------------------------- 12 | 13 | // example: @include replace-text(); 14 | 15 | @mixin replace-text() { 16 | border: 0; 17 | color: transparent; 18 | font: 0/0 a; 19 | text-shadow: none; 20 | } -------------------------------------------------------------------------------- /mixins/_min-breakpoint.scss: -------------------------------------------------------------------------------- 1 | //------ SASS Useful Mixins --------------------------------------------- 2 | 3 | // by Ryan Burgess 4 | // https://github.com/ryanburgess/SASS-Useful-Mixins 5 | // MIT © Ryan Burgess 6 | 7 | // ---------------------------------------------------------------------- 8 | 9 | // Media Query Breakpoints 10 | 11 | // ---------------------------------------------------------------------- 12 | 13 | // example @include min-breakpoint(940) { width:80%; } 14 | 15 | @mixin min-breakpoint($size) { 16 | @media only screen and (min-width: $size + px) { @content; } 17 | } -------------------------------------------------------------------------------- /mixins/_hover-focus.scss: -------------------------------------------------------------------------------- 1 | //------ SASS Useful Mixins --------------------------------------------- 2 | 3 | // by Ryan Burgess 4 | // https://github.com/ryanburgess/SASS-Useful-Mixins 5 | // MIT © Ryan Burgess 6 | 7 | // ----------------------------------------------------------------------- 8 | 9 | // Hover and Focus 10 | 11 | // ---------------------------------------------------------------------- 12 | 13 | // example @include hoverFocus('text-decoration', 'none'); 14 | 15 | @mixin hoverFocus($property, $value) { 16 | &:hover, &:focus { 17 | #{$property}: $value; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /mixins/_text-shadow.scss: -------------------------------------------------------------------------------- 1 | //------ SASS Useful Mixins --------------------------------------------- 2 | 3 | // by Ryan Burgess 4 | // https://github.com/ryanburgess/SASS-Useful-Mixins 5 | // MIT © Ryan Burgess 6 | 7 | // ---------------------------------------------------------------------- 8 | 9 | // Text Shadow 10 | 11 | // ---------------------------------------------------------------------- 12 | 13 | // example: @include single-text-shadow(1px, 2px, 2px, #000); 14 | 15 | @mixin single-text-shadow($hoff: false, $voff: false, $blur: false, $color: false) { 16 | text-shadow: $hoff $voff $blur $color; 17 | } -------------------------------------------------------------------------------- /mixins/_inline-block.scss: -------------------------------------------------------------------------------- 1 | //------ SASS Useful Mixins --------------------------------------------- 2 | 3 | // by Ryan Burgess 4 | // https://github.com/ryanburgess/SASS-Useful-Mixins 5 | // MIT © Ryan Burgess 6 | 7 | // ---------------------------------------------------------------------- 8 | 9 | // Display inline block cross browser 10 | 11 | // ---------------------------------------------------------------------- 12 | 13 | // example: @include inline-block(); 14 | 15 | @mixin inline-block() { 16 | display: -moz-inline-stack; 17 | display: inline-block; 18 | vertical-align: top; 19 | zoom: 1; 20 | *display: inline; 21 | } -------------------------------------------------------------------------------- /mixins/_single-transform.scss: -------------------------------------------------------------------------------- 1 | //------ SASS Useful Mixins --------------------------------------------- 2 | 3 | // by Ryan Burgess 4 | // https://github.com/ryanburgess/SASS-Useful-Mixins 5 | // MIT © Ryan Burgess 6 | 7 | // ---------------------------------------------------------------------- 8 | 9 | // Single Transform 10 | 11 | // ---------------------------------------------------------------------- 12 | 13 | // example: @include flat-button($greyBlue, white, 5px 15px); 14 | 15 | @mixin single-transform($deg) { 16 | -ms-transform:rotate($deg); 17 | -webkit-transform:rotate($deg); 18 | transform:rotate($deg); 19 | } -------------------------------------------------------------------------------- /mixins/_background-cover.scss: -------------------------------------------------------------------------------- 1 | //------ SASS Useful Mixins --------------------------------------------- 2 | 3 | // by Ryan Burgess 4 | // https://github.com/ryanburgess/SASS-Useful-Mixins 5 | // MIT © Ryan Burgess 6 | 7 | // ---------------------------------------------------------------------- 8 | 9 | // Background cover 10 | 11 | // ---------------------------------------------------------------------- 12 | 13 | // example: @include background-cover(); 14 | 15 | @mixin background-cover(){ 16 | -webkit-background-size: cover; 17 | -moz-background-size: cover; 18 | -o-background-size: cover; 19 | background-size: cover; 20 | } -------------------------------------------------------------------------------- /mixins/_clearfix.scss: -------------------------------------------------------------------------------- 1 | //------ SASS Useful Mixins --------------------------------------------- 2 | 3 | // by Ryan Burgess 4 | // https://github.com/ryanburgess/SASS-Useful-Mixins 5 | // MIT © Ryan Burgess 6 | 7 | // ---------------------------------------------------------------------- 8 | 9 | // Clearfix after element 10 | 11 | // ---------------------------------------------------------------------- 12 | 13 | // example: @include clearfix(); 14 | 15 | @mixin clearfix() { 16 | & { 17 | *zoom: 1; 18 | } 19 | &:before, 20 | &:after { 21 | content: ""; 22 | display: table; 23 | } 24 | &:after { 25 | clear: both; 26 | } 27 | } -------------------------------------------------------------------------------- /mixins/_animations.scss: -------------------------------------------------------------------------------- 1 | //------ SASS Useful Mixins --------------------------------------------- 2 | 3 | // by Ryan Burgess 4 | // https://github.com/ryanburgess/SASS-Useful-Mixins 5 | // MIT © Ryan Burgess 6 | 7 | // ---------------------------------------------------------------------- 8 | 9 | // Animations 10 | 11 | // ---------------------------------------------------------------------- 12 | 13 | // example: @include animation('slide-down 5s 3'); 14 | 15 | @mixin animation($str) { 16 | -webkit-animation: #{$str}; 17 | -moz-animation: #{$str}; 18 | -ms-animation: #{$str}; 19 | -o-animation: #{$str}; 20 | animation: #{$str}; 21 | } -------------------------------------------------------------------------------- /mixins/_backface-visibility.scss: -------------------------------------------------------------------------------- 1 | //------ SASS Useful Mixins --------------------------------------------- 2 | 3 | // by Ryan Burgess 4 | // https://github.com/ryanburgess/SASS-Useful-Mixins 5 | // MIT © Ryan Burgess 6 | 7 | // ---------------------------------------------------------------------- 8 | 9 | // Backface-visibility 10 | 11 | // ---------------------------------------------------------------------- 12 | 13 | // example: @include backface-visibility("hidden"); 14 | 15 | @mixin backface-visibility($value) { 16 | 17 | -webkit-backface-visibility: $value; 18 | -moz-backface-visibility: $value; 19 | backface-visibility: $value; 20 | } -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "UsefulMixins", 3 | "version": "0.2.1", 4 | "main": "_mixins.scss", 5 | "ignore": [ 6 | "source", 7 | "spec", 8 | ".bowerrc", 9 | ".gitignore", 10 | ".jshintignore", 11 | ".jshintrc", 12 | "bower.json", 13 | "gruntfile.js", 14 | "package.json", 15 | "README.md" 16 | ], 17 | "repository": { 18 | "type": "git", 19 | "url": "git://github.com/ryanburgess/SASS-Useful-Mixins.git" 20 | }, 21 | "authors": [ 22 | "Ryan Burgess", "Ryan Burgess", 23 | "Ryan Burgess (http://github.com/ryanburgess)" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /mixins/_translate.scss: -------------------------------------------------------------------------------- 1 | //------ SASS Useful Mixins --------------------------------------------- 2 | 3 | // by Ryan Burgess 4 | // https://github.com/ryanburgess/SASS-Useful-Mixins 5 | // MIT © Ryan Burgess 6 | 7 | // ---------------------------------------------------------------------- 8 | 9 | // Translate 10 | 11 | // ---------------------------------------------------------------------- 12 | 13 | // example: @include translate(0); 14 | 15 | @mixin translate($value) { 16 | -webkit-transform: translatez($value); 17 | -moz-transform: translatez($value); 18 | -ms-transform: translatez($value); 19 | -o-transform: translatez($value); 20 | transform: translatez($value); 21 | } -------------------------------------------------------------------------------- /mixins/_inner-shadow.scss: -------------------------------------------------------------------------------- 1 | //------ SASS Useful Mixins --------------------------------------------- 2 | 3 | // by Ryan Burgess 4 | // https://github.com/ryanburgess/SASS-Useful-Mixins 5 | // MIT © Ryan Burgess 6 | 7 | // ---------------------------------------------------------------------- 8 | 9 | // Inner Shadow 10 | 11 | // ---------------------------------------------------------------------- 12 | 13 | // example: @include inner-shadow(1px, 2px, 2px, #000); 14 | 15 | @mixin inner-shadow($hoff: false, $voff: false, $blur: false, $color: false) { 16 | -webkit-box-shadow: inset $hoff $voff $blur $color; 17 | -moz-box-shadow: inset $hoff $voff $blur $color; 18 | box-shadow: inset $hoff $voff $blur $color; 19 | } -------------------------------------------------------------------------------- /mixins/_box-shadow.scss: -------------------------------------------------------------------------------- 1 | //------ SASS Useful Mixins --------------------------------------------- 2 | 3 | // by Ryan Burgess 4 | // https://github.com/ryanburgess/SASS-Useful-Mixins 5 | // MIT © Ryan Burgess 6 | 7 | // ---------------------------------------------------------------------- 8 | 9 | // Box Shadow 10 | 11 | // ---------------------------------------------------------------------- 12 | 13 | // example: @include box-shadow(1px, 2px, 2px, 2px, #000); 14 | 15 | @mixin box-shadow($hoff: false, $voff: false, $blur: false, $spread: false, $color: false){ 16 | -webkit-box-shadow: $hoff $voff $blur $spread $color; 17 | -moz-box-shadow: $hoff $voff $blur $spread $color; 18 | box-shadow: $hoff $voff $blur $spread $color; 19 | } -------------------------------------------------------------------------------- /mixins/_placeholder.scss: -------------------------------------------------------------------------------- 1 | //------ SASS Useful Mixins --------------------------------------------- 2 | 3 | // by Ryan Burgess 4 | // https://github.com/ryanburgess/SASS-Useful-Mixins 5 | // MIT © Ryan Burgess 6 | 7 | // ---------------------------------------------------------------------- 8 | 9 | // Change placeholder text color 10 | 11 | // ---------------------------------------------------------------------- 12 | 13 | // example: @include placeholder-color(#333); 14 | 15 | @mixin placeholder-color($color) { 16 | &.placeholder { 17 | color: $color 18 | } 19 | 20 | &:-moz-placeholder { 21 | color: $color 22 | } 23 | 24 | &::-webkit-input-placeholder { 25 | color: $color 26 | } 27 | 28 | &:-ms-input-placeholder { 29 | color: $color 30 | } 31 | } -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | grunt.initConfig({ 3 | pkg: grunt.file.readJSON('package.json'), 4 | bump: { 5 | options: { 6 | files: ['package.json', 'bower.json'], 7 | updateConfigs: ["pkg"], 8 | commit: true, 9 | commitMessage: 'Release v%VERSION%', 10 | commitFiles: ['package.json'], // '-a' for all files 11 | createTag: true, 12 | tagName: 'v%VERSION%', 13 | tagMessage: 'Version %VERSION%', 14 | commitFiles: ["-a"], 15 | push: false 16 | } 17 | }, 18 | sassyclean: { 19 | options: { 20 | modules: ['mixins/**/*.scss'], 21 | buildfiles: ['mixins/_base.scss'], 22 | remove: false, 23 | days: null 24 | } 25 | } 26 | }); 27 | grunt.loadNpmTasks('grunt-sassyclean'); 28 | grunt.loadNpmTasks('grunt-bump'); 29 | } 30 | -------------------------------------------------------------------------------- /mixins/_keyframes.scss: -------------------------------------------------------------------------------- 1 | //------ SASS Useful Mixins --------------------------------------------- 2 | 3 | // by Ryan Burgess 4 | // https://github.com/ryanburgess/SASS-Useful-Mixins 5 | // MIT © Ryan Burgess 6 | 7 | // ---------------------------------------------------------------------- 8 | 9 | // Keyframes 10 | 11 | // ---------------------------------------------------------------------- 12 | 13 | // example: @include keyframes(slide-down) {0%{ opacity:1; } 90%{ opacity:0; }} 14 | 15 | @mixin keyframes($animation-name) { 16 | @-webkit-keyframes #{$animation-name} { 17 | @content; 18 | } 19 | @-moz-keyframes #{$animation-name} { 20 | @content; 21 | } 22 | @-ms-keyframes #{$animation-name} { 23 | @content; 24 | } 25 | @-o-keyframes #{$animation-name} { 26 | @content; 27 | } 28 | @keyframes #{$animation-name} { 29 | @content; 30 | } 31 | } -------------------------------------------------------------------------------- /mixins/_animate-link.scss: -------------------------------------------------------------------------------- 1 | //------ SASS Useful Mixins --------------------------------------------- 2 | 3 | // by Ryan Burgess 4 | // https://github.com/ryanburgess/SASS-Useful-Mixins 5 | // MIT © Ryan Burgess 6 | 7 | // ---------------------------------------------------------------------- 8 | 9 | // Animated link that has a fade-in underline 10 | 11 | // ---------------------------------------------------------------------- 12 | 13 | // example: @include animate-link($screenGreen, $gothamMedium, 14); 14 | 15 | @mixin animate-link($color, $font, $fontSize) { 16 | 17 | font-family:$font; 18 | 19 | @include single-transition(border, 0.2s, ease-in-out, 0); 20 | text-decoration:none; 21 | 22 | color: $color; 23 | border-bottom:1px solid transparent; 24 | 25 | @include rem("font-size", $fontSize); 26 | 27 | &:focus, 28 | &:hover { 29 | border-color: $color; 30 | } 31 | } -------------------------------------------------------------------------------- /mixins/_retina.scss: -------------------------------------------------------------------------------- 1 | //------ SASS Useful Mixins --------------------------------------------- 2 | 3 | // by Ryan Burgess 4 | // https://github.com/ryanburgess/SASS-Useful-Mixins 5 | // MIT © Ryan Burgess 6 | 7 | // ----------------------------------------------------------------------- 8 | 9 | // Retina Images 10 | 11 | // ---------------------------------------------------------------------- 12 | 13 | // example: @include retina("logo2x.png", 100, 50); 14 | 15 | @mixin retina($image, $width, $height) { 16 | @media (min--moz-device-pixel-ratio: 1.3), 17 | (-o-min-device-pixel-ratio: 2.6/2), 18 | (-webkit-min-device-pixel-ratio: 1.3), 19 | (min-device-pixel-ratio: 1.3), 20 | (min-resolution: 1.3dppx) { 21 | background-image: url("#{$image}"); 22 | background-size: $width + px $height + px; 23 | //background-size: $width / 10 + rem $height / 10 + rem; // Use this if you've set HTML font size value to 62.5% 24 | background-size: $width / 16 + rem $height / 16 + rem; 25 | } 26 | } -------------------------------------------------------------------------------- /mixins/_transform.scss: -------------------------------------------------------------------------------- 1 | //------ SASS Useful Mixins --------------------------------------------- 2 | 3 | // by Ryan Burgess 4 | // https://github.com/ryanburgess/SASS-Useful-Mixins 5 | // MIT © Ryan Burgess 6 | 7 | // ---------------------------------------------------------------------- 8 | 9 | // Transform 10 | 11 | // ---------------------------------------------------------------------- 12 | 13 | // example: @include transform("origin", 0, 0); 14 | 15 | @mixin transform($type, $values...) { 16 | $n: length($values); 17 | $i: 1; 18 | 19 | $originVal: (); 20 | 21 | @while $i <= $n { 22 | $itemVal: (nth($values, $i)); 23 | @if $type == "rotate" or $type == "rotateY" or $type == "rotateX" { 24 | $originVal: append($originVal, $itemVal + deg); 25 | } @else { 26 | $originVal: append($originVal, $itemVal + px); 27 | } 28 | 29 | $i: $i + 1; 30 | } 31 | -webkit-transform: #{$type}($originVal); 32 | -moz-transform: #{$type}($originVal); 33 | transform: #{$type}($originVal); 34 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sass-useful-mixins", 3 | "version": "0.2.1", 4 | "description": "Useful Mixins for SASS", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/ryanburgess/SASS-Useful-Mixins.git" 8 | }, 9 | "author": "Ryan Burgess", 10 | "preferGlobal": true, 11 | "main": "bin/useful-mixins", 12 | "bin": { 13 | "useful-mixins": "./bin/useful-mixins" 14 | }, 15 | "bugs": { 16 | "url": "https://github.com/ryanburgess/SASS-Useful-Mixins/issues" 17 | }, 18 | "dependencies": { 19 | "fs-extra": "^0.16.3", 20 | "grunt-contrib-watch": "^0.6.1", 21 | "grunt-sass": "^0.17.0", 22 | "grunt-sassyclean": "^0.1.1", 23 | "mkdirp": "^0.5.0", 24 | "path": "^0.11.14" 25 | }, 26 | "homepage": "https://github.com/ryanburgess/SASS-Useful-Mixins", 27 | "keywords": [ 28 | "sass", 29 | "mixins", 30 | "scss", 31 | "css", 32 | "web", 33 | "front-end" 34 | ], 35 | "license": "MIT", 36 | "devDependencies": { 37 | "grunt": "^0.4.5", 38 | "grunt-sassyclean": "^0.1.3" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /bin/useful-mixins: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | var mkdirp = require('mkdirp'), 4 | fs = require('fs-extra'), 5 | path = require('path'), 6 | pkg = require('../package.json'), 7 | version = pkg.version, 8 | dir = path.dirname(); 9 | 10 | // copy the mixins directory and create a new mixins directory 11 | fs.copy(path.join(__dirname, '../mixins'), dir + '/mixins', function(err) { 12 | if (err) { 13 | return console.log(err); 14 | } 15 | }); 16 | 17 | // create mixins 18 | fs.readFile(path.join(__dirname, '../_mixins.scss'), 'utf8', function (err,data) { 19 | if (err) { 20 | return console.log(err); 21 | } 22 | write(dir + '/_mixins.scss', data); 23 | }); 24 | 25 | function write(path, str, mode) { 26 | fs.writeFileSync(path, str, { mode: mode || 0666 }); 27 | console.log(' \x1b[36mcreate\x1b[0m : ' + path); 28 | } 29 | 30 | function mkdir(path, fn) { 31 | mkdirp(path, 0755, function(err){ 32 | if (err) throw err; 33 | console.log(' \033[36mcreate\033[0m : ' + path); 34 | fn && fn(); 35 | }); 36 | } 37 | console.log('Sass Useful Mixins ' + version); -------------------------------------------------------------------------------- /mixins/_rem.scss: -------------------------------------------------------------------------------- 1 | //------ SASS Useful Mixins --------------------------------------------- 2 | 3 | // by Ryan Burgess 4 | // https://github.com/ryanburgess/SASS-Useful-Mixins 5 | // MIT © Ryan Burgess 6 | 7 | // ---------------------------------------------------------------------- 8 | 9 | // REM Units with PX fallback 10 | 11 | // ---------------------------------------------------------------------- 12 | 13 | // example: @include rem("margin", 10, 5, 10, 5); 14 | // example: @include rem("font-size", 14); 15 | 16 | @mixin rem($property, $values...) { 17 | $n: length($values); 18 | $i: 1; 19 | 20 | $pxlist: (); 21 | $remlist: (); 22 | 23 | @while $i <= $n { 24 | $itemVal: (nth($values, $i)); 25 | @if $itemVal != "auto"{ 26 | $pxlist: append($pxlist, $itemVal + px); 27 | //$remlist: append($remlist, ($itemVal / 10) + rem); // Use this if you've set HTML font size value to 62.5% 28 | $remlist: append($remlist, ($itemVal / 16) + rem); 29 | } @else { 30 | $pxlist: append($pxlist, auto); 31 | $remlist: append($remlist, auto); 32 | } 33 | 34 | $i: $i + 1; 35 | } 36 | 37 | #{$property}: $pxlist; 38 | #{$property}: $remlist; 39 | } -------------------------------------------------------------------------------- /mixins/_linear-gradient.scss: -------------------------------------------------------------------------------- 1 | //------ SASS Useful Mixins --------------------------------------------- 2 | 3 | // by Ryan Burgess 4 | // https://github.com/ryanburgess/SASS-Useful-Mixins 5 | // MIT © Ryan Burgess 6 | 7 | // ----------------------------------------------------------------------- 8 | 9 | // Linear Gradients 10 | 11 | // ---------------------------------------------------------------------- 12 | 13 | // example: @include linearGradient(#cccccc, #333333); 14 | 15 | @mixin linearGradient($top, $bottom) { 16 | background: #{$top}; /* Old browsers */ 17 | background: -moz-linear-gradient(top, #{$top} 0%, #{$bottom} 100%); /* FF3.6+ */ 18 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #{$top}), color-stop(100%, #{$bottom})); /* Chrome,Safari4+ */ 19 | background: -webkit-linear-gradient(top, #{$top} 0%, #{$bottom} 100%); /* Chrome10+,Safari5.1+ */ 20 | background: -o-linear-gradient(top, #{$top} 0%, #{$bottom} 100%); /* Opera 11.10+ */ 21 | background: -ms-linear-gradient(top, #{$top} 0%, #{$bottom} 100%); /* IE10+ */ 22 | background: linear-gradient(to bottom, #{$top} 0%, #{$bottom} 100%); /* W3C */ 23 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$top}', endColorstr='#{$bottom}', GradientType=0 ); /* IE6-9 */ 24 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Useful SASS Mixins 2 | ============= 3 | 4 | If you're using SASS you should find these mixins really helpful. These mixins should help speed up your development process. The file includes SASS mixins for REM unit fallback support, Retina Images, Breakpoints, Animations, Transitions, Linear Gradients, Rounded Corners, Opacity, Clearfix, Hide text, Triangles/Arrows and more. 5 | 6 | ## Install 7 | #### npm 8 | npm install sass-useful-mixins -g 9 | 10 | ## Use 11 | Run ```useful-mixins``` in a directory where you'd like to use the Sass Useful Mixins. 12 | 13 | ## Release History 14 | * 0.2.1: update comments 15 | * 0.2.0: reference the mixin files in the directory 16 | * 0.1.9: generate the mixins directory 17 | * 0.1.8: fix output in generator script 18 | * 0.1.7: fixes with generator script 19 | * 0.1.6: add dependencies 20 | * 0.1.5: added generator script 21 | * 0.1.4: added animated link mixin 22 | * 0.1.3: Update transform mixin. 23 | * 0.1.2: add release history notes. 24 | * 0.1.0: Initial release. 25 | 26 | ## Contributing 27 | 1. Fork it 28 | 2. Create your feature branch (`git checkout -b my-new-feature`) 29 | 3. Commit your changes (`git commit -am 'Add some feature'`) 30 | 4. Push to the branch (`git push origin my-new-feature`) 31 | 5. Create new Pull Request 32 | 33 | ## License 34 | MIT © [Ryan Burgess](http://github.com/ryanburgess) -------------------------------------------------------------------------------- /mixins/_linear-gradient-angle.scss: -------------------------------------------------------------------------------- 1 | //------ SASS Useful Mixins --------------------------------------------- 2 | 3 | // by Ryan Burgess 4 | // https://github.com/ryanburgess/SASS-Useful-Mixins 5 | // MIT © Ryan Burgess 6 | 7 | // ---------------------------------------------------------------------- 8 | 9 | // Linear Gradient angle 10 | 11 | // ---------------------------------------------------------------------- 12 | 13 | // example: @include linear-gradient(-10, #cccccc, #333333); 14 | 15 | @mixin linear-gradient($angle, $colorStart, $colorStop){ 16 | background: #{$colorStart}; /* Old browsers */ 17 | background: -moz-linear-gradient($angle, #{$colorStart} 0%, #{$colorStop} 100%); /* FF3.6+ */ 18 | background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#{$colorStart}), color-stop(100%,#{$colorStop})); /* Chrome,Safari4+ */ 19 | background: -webkit-linear-gradient(45deg, #{$colorStart} 0%,#{$colorStop} 100%); /* Chrome10+,Safari5.1+ */ 20 | background: -o-linear-gradient(45deg, #{$colorStart} 0%,#{$colorStop} 100%); /* Opera 11.10+ */ 21 | background: -ms-linear-gradient(45deg, #{$colorStart} 0%,#{$colorStop} 100%); /* IE10+ */ 22 | background: linear-gradient(45deg, #{$colorStart} 0%,#{$colorStop} 100%); /* W3C */ 23 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$colorStart}', endColorstr='#{$colorStop}',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ 24 | } -------------------------------------------------------------------------------- /mixins/_transitions.scss: -------------------------------------------------------------------------------- 1 | //------ SASS Useful Mixins --------------------------------------------- 2 | 3 | // by Ryan Burgess 4 | // https://github.com/ryanburgess/SASS-Useful-Mixins 5 | // MIT © Ryan Burgess 6 | 7 | // ---------------------------------------------------------------------- 8 | 9 | // Transitions 10 | 11 | // ---------------------------------------------------------------------- 12 | 13 | // example: @include single-transition(background, 1s, ease-in-out, 0); 14 | 15 | @mixin single-transition($property, $duration, $timing-function, $delay) { 16 | -webkit-transition: $property $duration $timing-function $delay; 17 | -moz-transition: $property $duration $timing-function $delay; 18 | -o-transition: $property $duration $timing-function $delay; 19 | transition: $property $duration $timing-function $delay; 20 | } 21 | 22 | // example: @include double-transition(background, 1s, ease-in-out, 0, opacity, .1s, ease-in-out, 0); 23 | 24 | @mixin double-transition($property1, $duration1, $timing-function1, $delay1, $property2, $duration2, $timing-function2, $delay2) { 25 | -webkit-transition: $property1 $duration1 $timing-function1 $delay1, $property2 $duration2 $timing-function2 $delay2; 26 | -moz-transition: $property1 $duration1 $timing-function1 $delay1, $property2 $duration2 $timing-function2 $delay2; 27 | -o-transition: $property1 $duration1 $timing-function1 $delay1, $property2 $duration2 $timing-function2 $delay2; 28 | transition: $property1 $duration1 $timing-function1 $delay1, $property2 $duration2 $timing-function2 $delay2; 29 | } -------------------------------------------------------------------------------- /mixins/_triangles.scss: -------------------------------------------------------------------------------- 1 | //------ SASS Useful Mixins --------------------------------------------- 2 | 3 | // by Ryan Burgess 4 | // https://github.com/ryanburgess/SASS-Useful-Mixins 5 | // MIT © Ryan Burgess 6 | 7 | // ---------------------------------------------------------------------- 8 | 9 | // Arrows / Triangles 10 | 11 | // ---------------------------------------------------------------------- 12 | 13 | // example: @include arrow("left", #cccccc, 10); 14 | 15 | @mixin arrow($direction, $color, $size) { 16 | $pxSize: $size + px; 17 | $remSize: ($size / 10) + rem; 18 | 19 | width: 0; 20 | height: 0; 21 | 22 | @if $direction == "left"{ 23 | border-top: $pxSize solid transparent; 24 | border-right: $pxSize solid $color; 25 | border-bottom: $pxSize solid transparent; 26 | 27 | border-top: $remSize solid transparent; 28 | border-right: $remSize solid $color; 29 | border-bottom: $remSize solid transparent; 30 | }@else if $direction == "right"{ 31 | border-top: $pxSize solid transparent; 32 | border-bottom: $pxSize solid transparent; 33 | border-left: $pxSize solid $color; 34 | 35 | border-top: $remSize solid transparent; 36 | border-bottom: $remSize solid transparent; 37 | border-left: $remSize solid $color; 38 | }@else if $direction == "up"{ 39 | border-left: $pxSize solid transparent; 40 | border-right: $pxSize solid transparent; 41 | border-bottom: $pxSize solid $color; 42 | 43 | border-left: $remSize solid transparent; 44 | border-right: $remSize solid transparent; 45 | border-bottom: $remSize solid $color; 46 | }@else if $direction == "down"{ 47 | border-left: $pxSize solid transparent; 48 | border-right: $pxSize solid transparent; 49 | border-top: $pxSize solid $color; 50 | 51 | border-left: $remSize solid transparent; 52 | border-right: $remSize solid transparent; 53 | border-top: $remSize solid $color; 54 | } 55 | 56 | } -------------------------------------------------------------------------------- /mixins/_rounded-corners.scss: -------------------------------------------------------------------------------- 1 | //------ SASS Useful Mixins --------------------------------------------- 2 | 3 | // by Ryan Burgess 4 | // https://github.com/ryanburgess/SASS-Useful-Mixins 5 | // MIT © Ryan Burgess 6 | 7 | // ---------------------------------------------------------------------- 8 | 9 | // Rounded Corners 10 | 11 | // ---------------------------------------------------------------------- 12 | 13 | // example: @include roundedCorners(10); 14 | 15 | @mixin roundedCorners($size) { 16 | -webkit-border-radius: $size + px; 17 | -moz-border-radius: $size + px; 18 | border-radius: $size + px; 19 | } 20 | 21 | // Rounded Corners Top Only 22 | @mixin roundedTop($size) { 23 | -webkit-border-radius: $size + px $size + px 0 0; 24 | -moz-border-radius: $size + px $size + px 0 0; 25 | border-radius: $size + px $size + px 0 0; 26 | } 27 | 28 | // Rounded Corner Top Left Only 29 | @mixin roundedTopLeft($size) { 30 | -webkit-border-radius: $size + px 0 0 0; 31 | -moz-border-radius: $size + px 0 0 0; 32 | border-radius: $size + px 0 0 0; 33 | } 34 | 35 | // Rounded Corner Top Right Only 36 | @mixin roundedTopRight($size) { 37 | -webkit-border-radius: 0 $size + px 0 0; 38 | -moz-border-radius: 0 $size + px 0 0; 39 | border-radius: 0 $size + px 0 0; 40 | } 41 | 42 | // Rounded Corners Bottom Only 43 | @mixin roundedBottom($size) { 44 | -webkit-border-radius: 0 0 $size + px $size + px; 45 | -moz-border-radius: 0 0 $size + px $size + px; 46 | border-radius: 0 0 $size + px $size + px; 47 | } 48 | 49 | // Rounded Corner Bottom Left Only 50 | @mixin roundedBottomLeft($size) { 51 | -webkit-border-radius: 0 0 0 $size + px; 52 | -moz-border-radius: 0 0 0 $size + px; 53 | border-radius: 0 0 0 $size + px; 54 | } 55 | 56 | // Rounded Corner Bottom Right Only 57 | @mixin roundedBottomRight($size) { 58 | -webkit-border-radius: 0 0 $size + px 0; 59 | -moz-border-radius: 0 0 $size + px 0; 60 | border-radius: 0 0 $size + px 0; 61 | } 62 | 63 | // Rounded Corners Left Only 64 | @mixin roundedLeft($size) { 65 | -webkit-border-radius: 0 0 $size + px $size + px; 66 | -moz-border-radius: 0 0 $size + px $size + px; 67 | border-radius: $size + px 0 0 $size + px; 68 | } 69 | 70 | // Rounded Corners Right Only 71 | @mixin roundedRight($size) { 72 | -webkit-border-radius: 0 $size + px $size + px 0; 73 | -moz-border-radius: 0 $size + px $size + px 0; 74 | border-radius: 0 $size + px $size + px 0; 75 | } -------------------------------------------------------------------------------- /_mixins.scss: -------------------------------------------------------------------------------- 1 | //------ SASS Useful Mixins --------------------------------------------- 2 | 3 | // by Ryan Burgess 4 | // https://github.com/ryanburgess/SASS-Useful-Mixins 5 | // MIT © Ryan Burgess 6 | 7 | // ---------------------------------------------------------------------- 8 | 9 | // Alignment 10 | 11 | // ---------------------------------------------------------------------- 12 | @import "mixins/margin-auto"; 13 | 14 | // ---------------------------------------------------------------------- 15 | 16 | // Animation 17 | 18 | // ---------------------------------------------------------------------- 19 | @import "mixins/animate-link"; 20 | @import "mixins/animations"; 21 | @import "mixins/backface-visibility"; 22 | @import "mixins/keyframes"; 23 | @import "mixins/single-transform"; 24 | @import "mixins/transform"; 25 | @import "mixins/transitions"; 26 | @import "mixins/translate"; 27 | 28 | // ---------------------------------------------------------------------- 29 | 30 | // Functional 31 | 32 | // ---------------------------------------------------------------------- 33 | @import "mixins/hide-text"; 34 | @import "mixins/hover-focus"; 35 | @import "mixins/replace-text"; 36 | 37 | // ---------------------------------------------------------------------- 38 | 39 | // Gradients 40 | 41 | // ---------------------------------------------------------------------- 42 | @import "mixins/linear-gradient"; 43 | @import "mixins/linear-gradient-angle"; 44 | 45 | // ---------------------------------------------------------------------- 46 | 47 | // Layout 48 | 49 | // ---------------------------------------------------------------------- 50 | @import "mixins/background-cover"; 51 | @import "mixins/box-model"; 52 | @import "mixins/clearfix"; 53 | @import "mixins/inline-block"; 54 | 55 | // ---------------------------------------------------------------------- 56 | 57 | // Media Queries 58 | 59 | // ---------------------------------------------------------------------- 60 | @import "mixins/breakpoint"; 61 | @import "mixins/min-breakpoint"; 62 | @import "mixins/retina"; 63 | 64 | // ---------------------------------------------------------------------- 65 | 66 | // Styles 67 | 68 | // ---------------------------------------------------------------------- 69 | @import "mixins/box-shadow"; 70 | @import "mixins/inner-shadow"; 71 | @import "mixins/opacity"; 72 | @import "mixins/placeholder"; 73 | @import "mixins/rounded-corners"; 74 | @import "mixins/text-shadow"; 75 | @import "mixins/triangles"; 76 | 77 | // ---------------------------------------------------------------------- 78 | 79 | // Values 80 | 81 | // ---------------------------------------------------------------------- 82 | @import "mixins/rem"; --------------------------------------------------------------------------------