SCSS Unit Conversion

Developer
Jakob-e
Size
8,210 Kb
Views
32,384
  1. SCSS Unit Conversion Previews
  2. SCSS Unit Conversion HTML Codes
  3. SCSS Unit Conversion CSS Codes
  4. SCSS Unit Conversion JS Codes

How do I make an scss unit conversion?

PX, EM, REM, CM, PT, PC, MM, DEG, TURN, RAD, GRAD, NUMBER, INT, PERCENT - What is missing? - please comment :) . What is a scss unit conversion? How do you make a scss unit conversion? This script and codes were developed by Jakob-e on 27 November 2022, Sunday.

SCSS Unit Conversion Previews
IQ Test

SCSS Unit Conversion - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SCSS Unit Conversion</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <article> <header> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68939/sass-logo-round.png" /> <h1>SCSS Unit Conversion <small>v.2.1.2</small></h1> <a href="https://github.com/jakob-e/unitconversion" target="_blank" class="fork">Fork me on GitHub</a> </header> <section> <h2>Convert anything <small>(almost)</small></h2> <p>At the moment the following units are supported <em>(please comment if something is wrong/missing)</em>:</p> <span class="code">px, pt, pc, in, mm, cm, em, rem, ex, ch, vw, vh, vmin, vmax, deg, rad, grad, turn, dpi, dpcm, dppx, s, ms, hz, khz, number, ratio</span> <h2>Simple syntax</h2> <p>Rather than going with the "good" old fromUnit-to-toUnit(fromUnit) syntax this function set is based on toUnit(fromUnit) making it a lot shorter and less cumbersome to maintain – as shown below :-)</p> <code data-ace-theme="tomorrow" data-ace-mode="scss" data-ace-cursor="true"> pt-to-px(input); pc-to-px(input); in-to-px(input); mm-to-px(input); ==> px(input); cm-to-px(input); em-to-px(input); rem-to-px(input); num-to-px(input); </code> <h2>Note!</h2> <p>To allow conversion between relative and absolute lengths em and rem are calculated as pixel values based on base-font-size (16px browser default). If you change the base font size of your document – remember to set the <em>$base-font-size</em> variable accordingly.</p> <p>To ease the job of handling compounds the <em>em</em> function takes multiple arguments. Each argument is treated as an em compound and used to calculate the visual size.</p> <p>Example – how to set a visual size of 18px on a class nested in an element with a font-size of 2em:</p> <code data-ace-theme="tomorrow" data-ace-mode="scss" data-ace-cursor="true"> .class { font-size: em(18px, 2em); ==> 0.5625em; } </code> <p>If you use unit conversion in relation to the font shorthand syntax be aware that line-height "/" will cause division. To prevent this from happening you can either either interpolate the value or use + to add the pieces together without calculation:</p> <code data-ace-theme="tomorrow" data-ace-mode="scss" data-ace-cursor="true"> h2 { font:300 #{em(24px)}/3 'Lato', sans-serif; } </code> </section> <section> <h2>_unitconversion.scss</h2> <code data-ace-theme="tomorrow" data-ace-mode="scss">// ____________________________________________________________________________
//
// Unit Conversion v.2.1.2
// ____________________________________________________________________________
//
// Function Input units
//
// Absolute length
// px(input); px, pt, pc, in, mm, cm, em, rem, number
// pt(input); px, pt, pc, in, mm, cm, em, rem, number
// pc(input); px, pt, pc, in, mm, cm, em, rem, number
// in(input); px, pt, pc, in, mm, cm, em, rem, number
// mm(input); px, pt, pc, in, mm, cm, em, rem, number
// cm(input); px, pt, pc, in, mm, cm, em, rem, number
//
// Relative length
// em(input); px, pt, pc, in, mm, cm, em, rem, number
// rem(input); px, pt, pc, in, mm, cm, em, rem, number
// ex(input); ex, number
// ch(input); ch, number
// vw(input); vw, number
// vh(input); vh, number
// vmin(input); vmin, number
// vmax(input); vmax, number
//
// Angle
// deg(input); deg, rad, grad, turn, number
// rad(input); deg, rad, grad, turn, number
// grad(input); deg, rad, grad, turn, number
// turn(input); deg, rad, grad, turn, number
//
// Resolution
// dpi(input); dpi, dpcm, dppx, number
// dpcm(input); dpi, dpcm, dppx, number
// dppx(input); dpi, dpcm, dppx, number
//
// Time
// s(input); s, ms, number
// ms(input); s, ms, number
//
// Frequency
// hz(input); hz, khz, number
// khz(input); hz, khz, number
//
// String
// str(input); anything not null
//
// Number, int and uint
// num(input); px, pt, pc, in, mm, cm, em, rem, ex, ch,
// vw, vh, vmin, vmax, deg, rad, grad, turn,
// dpi, dpcm, dppx, s, ms, hz, khz, number
// int(input); as number
// uint(input); as number
//
// ratio number to fraction
//
// Aliases
// string(input);
// number(input);
//
// ____________________________________________________________________________
// Base font size in pixel for converting em and rem to absolute lengths.
$base-font-size: 16px !default;
// Absolute lengths
@function px($input){ @return to-unit(px, $input); }
@function pt($input){ @return to-unit(pt, $input); }
@function pc($input){ @return to-unit(pc, $input); }
@function in($input){ @return to-unit(in, $input); }
@function mm($input){ @return to-unit(mm, $input); }
@function cm($input){ @return to-unit(cm, $input); }
// Angles
@function deg($input){ @return to-unit(deg, $input); }
@function rad($input){ @return to-unit(rad, $input); }
@function grad($input){ @return to-unit(grad, $input); }
@function turn($input){ @return to-unit(turn, $input); }
// Resolution
@function dpi($input){ @return to-unit(dpi, $input); }
@function dpcm($input){ @return to-unit(dpcm, $input); }
@function dppx($input){ @return to-unit(dppx, $input); }
// Time
@function ms($input){ @return to-unit(ms, $input); }
@function s($input){ @return to-unit(s, $input); }
// Frequencies
@function hz($input){ @return to-unit(hz, $input);}
@function khz($input){ @return to-unit(khz, $input); }
// Relative lengths
@function em($input...){ $em: to-unit(em, nth($input,1)); // Adjust for compounds (visual size) @if length($input) > 1 { @for $i from 2 through length($input){ $em: $em / num(em(nth($input,$i))); } } @return $em;
}
@function rem($input){ @return to-unit(rem, num(em($input))); }
// Inconvertible relative lengths – depends on font
@function ex($input){ @return to-unit(ex, $input); }
@function ch($input){ @return to-unit(ch, $input); }
// Viewport
@function vw($input){ @return to-unit(vw, $input); }
@function vh($input){ @return to-unit(vh, $input); }
@function vmin($input){ @return to-unit(vmin, $input); }
@function vmax($input){ @return to-unit(vmax, $input); }
// Strings and numbers
@function str($input){ @return #{$input}; }
@function num($input){ @if type-of($input) != number { @error 'Could not convert `#{$input}` - must be `type-of number`'; @return null; } @return $input/($input*0+1);
}
@function int($input){ $num: num($input); @return if($num<0, ceil($num), floor($num));
}
@function uint($input){ @return abs(int($input)); }
// Aliases
@function string($input){ @return str($input);}
@function number($input){ @return num($input);}
// Conversion function
@function to-unit($unit, $input){ // Test against valid CSS units $to-unit: map-get(( px: 0px, pt: 0pt, pc: 0pc, in: 0in, mm: 0mm, cm: 0cm, // absolute length em: 0em, rem: 0rem, ch: 0ch, ex: 0ex, // relative length - font based vw: 0vw, vh: 0vh, vmin: 0vmin, vmax: 0vmax, // relative length - viewport based deg: 0deg, turn: 0turn, grad: 0grad, rad: 0rad, // angle s: 0s, ms: 0ms, // time hz: 0Hz, khz: 0kHz, // frequency dpi: 0dpi, dpcm: 0dpcm, dppx: 0dppx, // resolution pct: 0%, percent: 0%, num: 0, number: 0 // percent or number ), $unit); // Error handling – wrong $unit // Incomparable units are caught in convertion @if not $to-unit { @error 'Could not convert to `#{$unit}` – must be a valid CSS unit'; @return null; } // Number/incomparable conversion @if index(num number ex ch vw vh vmin vmax, $unit) { $value: num($input); } // EM/REM convertion using px as base @if index(em rem, unit($input)) { $input: 0px + num($input) * $base-font-size/1px; } @if index(em rem, $unit) and not unitless($input) { $input: 0px + $input; $input: num($input) * 1px/$base-font-size; } // Bug fix – resolution units seems to be flipped @if index(dpi dpcm dppx, $unit){ $units: (dppx: 0dppx, dpcm: 0dpcm, dpi: 0dpi); $input-unit: map-get($units, unit($input)); $input: if(1dppx &lt; 95dpi,num($input-unit + (num($input) + $to-unit)),$input); } // Convert @return $to-unit + $input;
}
// Convert number to ratio (fraction)
// ratio(1.7777778) => 16/9
@function ratio($x, $y: null){ @if not $y { $n: $x; $y: 1; @while $y < 10 { $x: $n * 10 - ((10 - $y) * $n); @if $x == round($x){ @return #{$x}/#{$y}; } @else { $y: $y + 1; } } $x: round($n * 1000000); $y: 1000000; @while $x % 10 == 0 { $x: $x/10; $y: $y/10; } @while $x % 5 == 0 { $x: $x/5; $y: $y/5; } @while $x % 2 == 0 { $x: $x/2; $y: $y/2; } @return #{$x}/#{$y}; } @else if $x == round($x) and $y == round($y){ @return #{$x}/#{$y}; } @warn 'X and Y must be integers'; @return false;
} </code>
<footer> <a href="http://www.sassmeister.com/gist/81feb28c986a212f401b" target="_blank"> Code on Sassmeister.com</a> </footer>
</article> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js'></script> <script src="js/index.js"></script>
</body>
</html>

SCSS Unit Conversion - Script Codes CSS Codes

/* 16/9 */
@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,italic300);
test { dpi-to-dpx: 2dppx;
}
*, :before, :after { box-sizing: border-box; margin: 0; padding: 0;
}
article, section, header, code { display: block;
}
h1 { font: 300 2.5em/1 "Lato", sans-serif; margin: 1em 0; color: #fff;
}
h2 { font: 300 1.5em/3 "Lato", sans-serif; text-transform: uppercase; margin: 1em 0 0;
}
p, a { font: 400 1em/1.3 'Lato', sans-serif; text-transform: none; max-width: 700px; margin: 0 0 1em;
}
h1 small { font-size: 0.3em; font-style: italic; vertical-align: super;
}
h2 small { font-size: 0.5em; vertical-align: super;
}
article { display: block;
}
header { display: block; max-width: 100%; background: #c69; padding: 3.125em; margin-bottom: 3em; color: #fff; text-align: center;
}
header img { width: 100px;
}
header p { max-width: 800px; text-align: left; margin-left: auto; margin-right: auto;
}
header a { padding: 0.2em 0.6em; background: #b37399; color: white; font-size: 1em; border-radius: 0.1875em;
}
header a { text-decoration: none; text-align: center; max-width: 100%; font-style: italic;
}
header a:hover { background: #aa628d;
}
header h1 + p { text-align: center; max-width: 100%; font-style: italic;
}
section { max-width: 800px; margin: 0 auto; padding: 0 30px 30px;
}
.code { font-family: monospace;
}
footer { background: #efefef; padding: 50px 20px;
}
footer a { padding: 0.2em 0.6em; background: #b37399; color: white; font-size: 1em; border-radius: 0.1875em;
}
footer a { text-decoration: none; text-align: center; max-width: 100%; font-style: italic;
}
footer a:hover { background: #aa628d;
}

SCSS Unit Conversion - Script Codes JS Codes

//
// Editor: //cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js
var theme='ace/theme/tomorrow';
var mode='ace/mode/scss';
$('code').each(function(){
var editor= ace.edit(this); editor.setTheme('ace/theme/'+$(this).attr('data-ace-theme')); editor.getSession().setMode('ace/mode/'+$(this).attr('data-ace-mode')); editor.renderer.setShowGutter(false); editor.setShowPrintMargin(false); editor.setShowPrintMargin(false); editor.setDisplayIndentGuides(false); editor.setOptions({ maxLines: Infinity, //readOnly: false, highlightActiveLine: false, highlightGutterLine: false }); if($(this).attr('data-ace-cursor')==='false'){ $('.ace_hidden-cursors').hide(); } // https://ace.c9.io/api/virtual_renderer.html //
})
$(window).on('resize',function(){ $('.breakout').width(window.innerWidth);
}).trigger('resize');
SCSS Unit Conversion - Script Codes
SCSS Unit Conversion - Script Codes
Home Page Home
Developer Jakob-e
Username jakob-e
Uploaded November 27, 2022
Rating 3.5
Size 8,210 Kb
Views 32,384
Do you need developer help for SCSS Unit Conversion?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jakob-e (jakob-e) Script Codes
Name
Angular Tab Menu
Maintain aspect ratio or fit to content
SCSS z-index
Responsive break out of parent element
SVG Encoding
CSS Shapes
Slide to Navigation
SVG Path Circle
Angular toggle password directive
The 100
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!