ADDED: Initial commit

Author: boov

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+*.lock

functions.scss

@@ -0,0 +1,4 @@
+@import "functions/convert-unit";
+@import "functions/modular-scale";
+@import "functions/rem-scale";
+@import "functions/em-scale";

functions/_convert-unit.scss

@@ -0,0 +1,36 @@
+@function convert-unit($value, $unit) {
+ $units: (
+ "px": 0px,
+ "cm": 0cm,
+ "mm": 0mm,
+ "%": 0%,
+ "ch": 0ch,
+ "in": 0in,
+ "em": 0em,
+ "rem": 0rem,
+ "pt": 0pt,
+ "pc": 0pc,
+ "ex": 0ex,
+ "vw": 0vw,
+ "vh": 0vh,
+ "vmin": 0vmin,
+ "vmax": 0vmax,
+ "deg": 0deg,
+ "turn": 0turn,
+ "rad": 0rad,
+ "grad": 0grad,
+ "s": 0s,
+ "ms": 0ms,
+ "Hz": 0hz,
+ "kHz": 0khz,
+ "dppx": 0dppx,
+ "dpcm": 0dpcm,
+ "dpi": 0dpi
+ );
+
+ @if map-has-key($units, $unit) {
+ @return map-get($units, $unit) + $value;
+ }
+
+ @error "Cannot convert '#{$value}' to '#{$unit}'";
+}

functions/_em-scale.scss

@@ -0,0 +1,5 @@
+$em-scale-ratio: 1.2 !default;
+
+@function em-scale($increment: 0, $ratio: $em-scale-ratio) {
+ @return modular-scale(1, $increment, $ratio, "em");
+}

functions/_modular-scale.scss

@@ -0,0 +1,57 @@
+$modular-scale-ratio: 2 !default;
+
+@function modular-scale(
+ $value,
+ $increment: 0,
+ $ratio: $modular-scale-ratio,
+ $unit: ""
+) {
+ // Error if $value is not a number or has units
+ @if (type-of($value) != "number") {
+ @error "$value should be a number, '#{$value}' (#{type-of($value)}) supplied";
+ }
+
+ // Error if $increment is not a number or has units
+ @if (type-of($increment) != "number" or not unitless($increment)) {
+ @error "$increment should be a unitless number, '#{$increment}' (#{type-of($increment)}) supplied";
+ }
+
+ // Error if $ratio is not a number or has units
+ @if (type-of($ratio) != "number" or not unitless($ratio)) {
+ @error "$ratio should be a unitless number, '#{$ratio}' (#{type-of($ratio)}) supplied";
+ }
+
+ // Error if $unit is not a string
+ @if (type-of($unit) != "string") {
+ @error "$unit should be a string, '#{$unit}' (#{type-of($unit)}) supplied";
+ }
+
+ // Keep the original unit type if not set manually
+ @if (not unitless($value) and $unit == "") {
+ $unit: unit($value);
+ }
+
+ // Strip units from $value
+ $value: $value / ($value * 0 + 1);
+
+ // Calculate positive increments
+ @if ($increment > 0) {
+ @for $i from 1 through $increment {
+ $value: $value * $ratio;
+ }
+ }
+
+ // Calculate negative increments
+ @if ($increment < 0) {
+ @for $i from 1 through abs($increment) {
+ $value: $value / $ratio;
+ }
+ }
+
+ // Convert $value to specified $unit and return
+ @if ($unit != "") {
+ @return convert-unit($value, $unit);
+ }
+
+ @return $value;
+}

functions/_rem-scale.scss

@@ -0,0 +1,5 @@
+$rem-scale-ratio: 1.2 !default;
+
+@function rem-scale($increment: 0, $ratio: $rem-scale-ratio) {
+ @return modular-scale(1, $increment, $ratio, "rem");
+}

gulpfile.js

@@ -0,0 +1,19 @@
+"use strict";
+
+let gulp = require("gulp");
+let sass = require("gulp-sass");
+let plumber = require("gulp-plumber");
+
+gulp.task("scss", () => {
+ return gulp
+ .src(["tests/tests.scss"])
+ .pipe(plumber())
+ .pipe(sass())
+ .pipe(gulp.dest("tests/"));
+});
+
+gulp.task("watch", () => {
+ gulp.watch("tests/tests.scss", ["scss"]);
+});
+
+gulp.task("default", ["scss", "watch"]);

package.json

@@ -0,0 +1,22 @@
+{
+ "name": "modular-scale-scss-functions",
+ "version": "0.0.1",
+ "description":
+ "A modular scale SCSS function with a few complimentary helper functions",
+ "repository": {
+ "type": "git",
+ "url": "git+ssh://git@github.com/boov/modular-scale-scss-functions.git"
+ },
+ "keywords": ["modular", "scale", "scss", "functions"],
+ "author": "Matthew Booth <matt@boov.co.uk>",
+ "license": "ISC",
+ "bugs": {
+ "url": "https://github.com/boov/modular-scale-scss-functions/issues"
+ },
+ "homepage": "https://github.com/boov/modular-scale-scss-functions#readme",
+ "devDependencies": {
+ "gulp": "^3.9.1",
+ "gulp-plumber": "^1.2.0",
+ "gulp-sass": "^3.1.0"
+ }
+}

tests/tests.css

@@ -0,0 +1,17 @@
+.results {
+ --should-return-1: 1;
+ --should-return-1em: 1em;
+ --should-return-2: 2;
+ --should-return-4px: 4px;
+ --should-return-4: 4;
+ --should-return-8rem: 8rem;
+ --should-return-16em: 16em;
+ --should-return-32px: 32px;
+ --should-return-1-point-2rem: 1.2rem;
+ --should-return-1-point-44rem: 1.44rem;
+ --should-return-2rem: 2rem;
+ --should-return-4rem: 4rem;
+ --should-return-1-point-2em: 1.2em;
+ --should-return-1-point-44em: 1.44em;
+ --should-return-2em: 2em;
+ --should-return-4em: 4em; }

tests/tests.scss

@@ -0,0 +1,32 @@
+@import "../functions.scss";
+
+.results {
+ --should-return-1: modular-scale(1);
+ --should-return-1em: modular-scale(1em);
+
+ --should-return-2: modular-scale(2, 0);
+ --should-return-4px: modular-scale(2px, 1);
+
+ --should-return-4: modular-scale(4, 1, 1);
+ --should-return-8rem: modular-scale(4rem, 1, 2);
+
+ --should-return-16em: modular-scale(8, 1, 2, "em");
+ --should-return-32px: modular-scale(8%, 2, 2, "px");
+
+ --should-return-1-point-2rem: rem-scale(1);
+ --should-return-1-point-44rem: rem-scale(2);
+
+ --should-return-2rem: rem-scale(1, 2);
+ --should-return-4rem: rem-scale(2, 2);
+
+ --should-return-1-point-2em: em-scale(1);
+ --should-return-1-point-44em: em-scale(2);
+
+ --should-return-2em: em-scale(1, 2);
+ --should-return-4em: em-scale(2, 2);
+
+ //--should-value-error: modular-scale(#fff);
+ //--should-increment-error: modular-scale(1, #fff);
+ //--should-ratio-error: modular-scale(1, 1, #fff);
+ //--should-unit-error: modular-scale(1, 1, 1, #fff);
+}