Skip to content

Instantly share code, notes, and snippets.

@bobbysmith

bobbysmith/SassMeister-input-HTML.html

Created February 2, 2016 16:52
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save bobbysmith/6b64dfb32af8722bee48 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save bobbysmith/6b64dfb32af8722bee48 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<ul class="major-second">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Raw
SassMeister-input.scss
// ----
// libsass (v3.3.2)
// ----
$base-font-size: 16px;
@function rem($px) {
@return ($px / $base-font-size) * 1rem;
}
@function em($px) {
@return ($px / $base-font-size) * 1em;
}
//-------------------------//
// decimal-round(), pow(), ms() //
//------------------------//
// These functions are used to convert a number in the range -6 to 16 into a rem value based on the ratio of 1.125.
// .button-class { font-size: ms(10); } this will compile to:
// .button-class { font-size: 3.247em; }
@function decimal-round ($number, $digits: 0, $mode: round) {
$n: 1;
@if type-of($number) != number {
@warn '#{ $number } is not a number.';
@return $number;
}
@if type-of($digits) != number {
@warn '#{ $digits } is not a number.';
@return $number;
} @else if not unitless($digits) {
@warn '#{ $digits } has a unit.';
@return $number;
}
@for $i from 1 through $digits {
$n: $n * 10;
}
@if $mode == round {
@return round($number * $n) / $n;
} @else if $mode == ceil {
@return ceil($number * $n) / $n;
} @else if $mode == floor {
@return floor($number * $n) / $n;
} @else {
@warn '#{ $mode } is undefined keyword.';
@return $number;
}
}
@function pow($number, $exp) {
$value: 1;
@if $exp > 0 {
@for $i from 1 through $exp {
$value: $value * $number;
}
}
@else if $exp < 0 {
@for $i from 1 through -$exp {
$value: $value / $number;
}
}
@return $value;
}
@function ms($n) {
@if $n >= -6 and $n <= 16 {
@return decimal-round(rem(pow(1.125, $n) * 16px), 3);
} @else {
@error '#{$n} is not in the acceptable range.';
}
}
@for $i from 1 to 16 {
.major-second:nth-child(#{$i}) {
font-size: ms($i);
display: block;
&::before {
content: 'ms(#{$i})';
display: block;
}
&::after {
content: 'size: ' + ms($i);
display: block;
}
}
}
Raw
SassMeister-output.css
.major-second:nth-child(1) {
font-size: 1.125rem;
display: block;
}
.major-second:nth-child(1)::before {
content: "ms(1)";
display: block;
}
.major-second:nth-child(1)::after {
content: "size: 1.125rem";
display: block;
}
.major-second:nth-child(2) {
font-size: 1.266rem;
display: block;
}
.major-second:nth-child(2)::before {
content: "ms(2)";
display: block;
}
.major-second:nth-child(2)::after {
content: "size: 1.266rem";
display: block;
}
.major-second:nth-child(3) {
font-size: 1.424rem;
display: block;
}
.major-second:nth-child(3)::before {
content: "ms(3)";
display: block;
}
.major-second:nth-child(3)::after {
content: "size: 1.424rem";
display: block;
}
.major-second:nth-child(4) {
font-size: 1.602rem;
display: block;
}
.major-second:nth-child(4)::before {
content: "ms(4)";
display: block;
}
.major-second:nth-child(4)::after {
content: "size: 1.602rem";
display: block;
}
.major-second:nth-child(5) {
font-size: 1.802rem;
display: block;
}
.major-second:nth-child(5)::before {
content: "ms(5)";
display: block;
}
.major-second:nth-child(5)::after {
content: "size: 1.802rem";
display: block;
}
.major-second:nth-child(6) {
font-size: 2.027rem;
display: block;
}
.major-second:nth-child(6)::before {
content: "ms(6)";
display: block;
}
.major-second:nth-child(6)::after {
content: "size: 2.027rem";
display: block;
}
.major-second:nth-child(7) {
font-size: 2.281rem;
display: block;
}
.major-second:nth-child(7)::before {
content: "ms(7)";
display: block;
}
.major-second:nth-child(7)::after {
content: "size: 2.281rem";
display: block;
}
.major-second:nth-child(8) {
font-size: 2.566rem;
display: block;
}
.major-second:nth-child(8)::before {
content: "ms(8)";
display: block;
}
.major-second:nth-child(8)::after {
content: "size: 2.566rem";
display: block;
}
.major-second:nth-child(9) {
font-size: 2.887rem;
display: block;
}
.major-second:nth-child(9)::before {
content: "ms(9)";
display: block;
}
.major-second:nth-child(9)::after {
content: "size: 2.887rem";
display: block;
}
.major-second:nth-child(10) {
font-size: 3.247rem;
display: block;
}
.major-second:nth-child(10)::before {
content: "ms(10)";
display: block;
}
.major-second:nth-child(10)::after {
content: "size: 3.247rem";
display: block;
}
.major-second:nth-child(11) {
font-size: 3.653rem;
display: block;
}
.major-second:nth-child(11)::before {
content: "ms(11)";
display: block;
}
.major-second:nth-child(11)::after {
content: "size: 3.653rem";
display: block;
}
.major-second:nth-child(12) {
font-size: 4.11rem;
display: block;
}
.major-second:nth-child(12)::before {
content: "ms(12)";
display: block;
}
.major-second:nth-child(12)::after {
content: "size: 4.11rem";
display: block;
}
.major-second:nth-child(13) {
font-size: 4.624rem;
display: block;
}
.major-second:nth-child(13)::before {
content: "ms(13)";
display: block;
}
.major-second:nth-child(13)::after {
content: "size: 4.624rem";
display: block;
}
.major-second:nth-child(14) {
font-size: 5.202rem;
display: block;
}
.major-second:nth-child(14)::before {
content: "ms(14)";
display: block;
}
.major-second:nth-child(14)::after {
content: "size: 5.202rem";
display: block;
}
.major-second:nth-child(15) {
font-size: 5.852rem;
display: block;
}
.major-second:nth-child(15)::before {
content: "ms(15)";
display: block;
}
.major-second:nth-child(15)::after {
content: "size: 5.852rem";
display: block;
}
Raw
SassMeister-rendered.html
<ul class="major-second">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment