First scss convertion

sass/_core.scss

@@ -0,0 +1,14 @@
+.#{$ms-prefix} {
+    display: inline-block;
+    font: normal normal normal $ms-font-size-base/1 Mana;
+    font-size: inherit;
+    line-height: 1em;
+    text-rendering: auto;
+    transform: translate(0, 0);
+    speak: none;
+    text-transform: none;
+    vertical-align: middle;
+    // Better font rendering
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}

sass/_cost.scss

@@ -0,0 +1,292 @@
+/**
+ * Mana cost styles */
+
+.#{$ms-prefix}-cost {
+
+    // Base cost styles
+    background-color: #BEB9B2;
+    border-radius: 1em;
+    color: #111;
+    font-size: 0.95em;
+    width: 1.3em;
+    height: 1.3em;
+    line-height: 1.35em;
+    text-align: center;
+
+    // Single symbols
+    &.#{$ms-prefix}-w,
+    &.#{$ms-prefix}-wp {
+        background-color: #F0F2C0;
+    }
+    &.#{$ms-prefix}-u,
+    &.#{$ms-prefix}-up {
+        background-color: #B5CDE3;
+    }
+    &.#{$ms-prefix}-b,
+    &.#{$ms-prefix}-bp {
+        background-color: #ACA29A;
+    }
+    &.#{$ms-prefix}-r,
+    &.#{$ms-prefix}-rp {
+        background-color: #DB8664;
+    }
+    &.#{$ms-prefix}-g,
+    &.#{$ms-prefix}-gp {
+        background-color: #93B483;
+    }
+
+    // Split symbols
+    &.#{$ms-prefix}-wu {
+        background: #edf2b0; // Old browsers
+        background: -moz-linear-gradient(-45deg, #edf2b0 0%, #edf2b0 50%, #a6c1dd 50%, #a6c1dd 100%); // FF3.6+
+        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#edf2b0), color-stop(50%,#edf2b0), color-stop(50%,#a6c1dd), color-stop(100%,#a6c1dd)); // Chrome,Safari4+
+        background: -webkit-linear-gradient(-45deg, #edf2b0 0%,#edf2b0 50%,#a6c1dd 50%,#a6c1dd 100%); // Chrome10+,Safari5.1+
+        background: -o-linear-gradient(-45deg, #edf2b0 0%,#edf2b0 50%,#a6c1dd 50%,#a6c1dd 100%); // Opera 11.10+
+        background: -ms-linear-gradient(-45deg, #edf2b0 0%,#edf2b0 50%,#a6c1dd 50%,#a6c1dd 100%); // IE10+
+        background: linear-gradient(135deg, #edf2b0 0%,#edf2b0 50%,#a6c1dd 50%,#a6c1dd 100%); // W3C
+        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edf2b0', endColorstr='#a6c1dd',GradientType=1 ); // IE6-9 fallback on horizontal gradient
+    }
+    &.#{$ms-prefix}-wb {
+        background: #edf2b0; // Old browsers
+        background: -moz-linear-gradient(-45deg,  #edf2b0 0%, #edf2b0 50%, #9c9188 50%, #9c9188 100%); // FF3.6+
+        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#edf2b0), color-stop(50%,#edf2b0), color-stop(50%,#9c9188), color-stop(100%,#9c9188)); // Chrome,Safari4+
+        background: -webkit-linear-gradient(-45deg,  #edf2b0 0%,#edf2b0 50%,#9c9188 50%,#9c9188 100%); // Chrome10+,Safari5.1+
+        background: -o-linear-gradient(-45deg,  #edf2b0 0%,#edf2b0 50%,#9c9188 50%,#9c9188 100%); // Opera 11.10+
+        background: -ms-linear-gradient(-45deg,  #edf2b0 0%,#edf2b0 50%,#9c9188 50%,#9c9188 100%); // IE10+
+        background: linear-gradient(135deg,  #edf2b0 0%,#edf2b0 50%,#9c9188 50%,#9c9188 100%); // W3C
+        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edf2b0', endColorstr='#9c9188',GradientType=1 ); // IE6-9 fallback on horizontal gradient
+    }
+    &.#{$ms-prefix}-ub {
+        background: #a6c1dd; // Old browsers
+        background: -moz-linear-gradient(-45deg,  #a6c1dd 0%, #a6c1dd 50%, #9c9188 50%, #9c9188 100%); // FF3.6+
+        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#a6c1dd), color-stop(50%,#a6c1dd), color-stop(50%,#9c9188), color-stop(100%,#9c9188)); // Chrome,Safari4+
+        background: -webkit-linear-gradient(-45deg,  #a6c1dd 0%,#a6c1dd 50%,#9c9188 50%,#9c9188 100%); // Chrome10+,Safari5.1+
+        background: -o-linear-gradient(-45deg,  #a6c1dd 0%,#a6c1dd 50%,#9c9188 50%,#9c9188 100%); // Opera 11.10+
+        background: -ms-linear-gradient(-45deg,  #a6c1dd 0%,#a6c1dd 50%,#9c9188 50%,#9c9188 100%); // IE10+
+        background: linear-gradient(135deg,  #a6c1dd 0%,#a6c1dd 50%,#9c9188 50%,#9c9188 100%); // W3C
+        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6c1dd', endColorstr='#9c9188',GradientType=1 ); // IE6-9 fallback on horizontal gradient
+    }
+    &.#{$ms-prefix}-ur {
+        background: #a6c1dd; // Old browsers
+        background: -moz-linear-gradient(-45deg,  #a6c1dd 0%, #a6c1dd 50%, #db8664 50%, #db8664 100%); // FF3.6+
+        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#a6c1dd), color-stop(50%,#a6c1dd), color-stop(50%,#db8664), color-stop(100%,#db8664)); // Chrome,Safari4+
+        background: -webkit-linear-gradient(-45deg,  #a6c1dd 0%,#a6c1dd 50%,#db8664 50%,#db8664 100%); // Chrome10+,Safari5.1+
+        background: -o-linear-gradient(-45deg,  #a6c1dd 0%,#a6c1dd 50%,#db8664 50%,#db8664 100%); // Opera 11.10+
+        background: -ms-linear-gradient(-45deg,  #a6c1dd 0%,#a6c1dd 50%,#db8664 50%,#db8664 100%); // IE10+
+        background: linear-gradient(135deg,  #a6c1dd 0%,#a6c1dd 50%,#db8664 50%,#db8664 100%); // W3C
+        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6c1dd', endColorstr='#db8664',GradientType=1 ); // IE6-9 fallback on horizontal gradient
+    }
+    &.#{$ms-prefix}-br {
+        background: #aca29a; // Old browsers
+        background: -moz-linear-gradient(-45deg,  #aca29a 0%, #aca29a 50%, #db8664 50%, #db8664 100%); // FF3.6+
+        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#aca29a), color-stop(50%,#aca29a), color-stop(50%,#db8664), color-stop(100%,#db8664)); // Chrome,Safari4+
+        background: -webkit-linear-gradient(-45deg,  #aca29a 0%,#aca29a 50%,#db8664 50%,#db8664 100%); // Chrome10+,Safari5.1+
+        background: -o-linear-gradient(-45deg,  #aca29a 0%,#aca29a 50%,#db8664 50%,#db8664 100%); // Opera 11.10+
+        background: -ms-linear-gradient(-45deg,  #aca29a 0%,#aca29a 50%,#db8664 50%,#db8664 100%); // IE10+
+        background: linear-gradient(135deg,  #aca29a 0%,#aca29a 50%,#db8664 50%,#db8664 100%); // W3C
+        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aca29a', endColorstr='#db8664',GradientType=1 ); // IE6-9 fallback on horizontal gradient
+    }
+    &.#{$ms-prefix}-bg {
+        background: #aca29a; // Old browsers
+        background: -moz-linear-gradient(-45deg,  #aca29a 0%, #aca29a 50%, #93b483 50%, #93b483 100%); // FF3.6+
+        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#aca29a), color-stop(50%,#aca29a), color-stop(50%,#93b483), color-stop(100%,#93b483)); // Chrome,Safari4+
+        background: -webkit-linear-gradient(-45deg,  #aca29a 0%,#aca29a 50%,#93b483 50%,#93b483 100%); // Chrome10+,Safari5.1+
+        background: -o-linear-gradient(-45deg,  #aca29a 0%,#aca29a 50%,#93b483 50%,#93b483 100%); // Opera 11.10+
+        background: -ms-linear-gradient(-45deg,  #aca29a 0%,#aca29a 50%,#93b483 50%,#93b483 100%); // IE10+
+        background: linear-gradient(135deg,  #aca29a 0%,#aca29a 50%,#93b483 50%,#93b483 100%); // W3C
+        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aca29a', endColorstr='#93b483',GradientType=1 ); // IE6-9 fallback on horizontal gradient
+    }
+    &.#{$ms-prefix}-rw {
+        background: #db8664; // Old browsers
+        background: -moz-linear-gradient(-45deg,  #db8664 0%, #db8664 50%, #edf2b0 50%, #edf2b0 100%); // FF3.6+
+        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#db8664), color-stop(50%,#db8664), color-stop(50%,#edf2b0), color-stop(100%,#edf2b0)); // Chrome,Safari4+
+        background: -webkit-linear-gradient(-45deg,  #db8664 0%,#db8664 50%,#edf2b0 50%,#edf2b0 100%); // Chrome10+,Safari5.1+
+        background: -o-linear-gradient(-45deg,  #db8664 0%,#db8664 50%,#edf2b0 50%,#edf2b0 100%); // Opera 11.10+
+        background: -ms-linear-gradient(-45deg,  #db8664 0%,#db8664 50%,#edf2b0 50%,#edf2b0 100%); // IE10+
+        background: linear-gradient(135deg,  #db8664 0%,#db8664 50%,#edf2b0 50%,#edf2b0 100%); // W3C
+        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#db8664', endColorstr='#edf2b0',GradientType=1 ); // IE6-9 fallback on horizontal gradient
+    }
+    &.#{$ms-prefix}-rg {
+        background: #db8664; // Old browsers
+        background: -moz-linear-gradient(-45deg,  #db8664 0%, #db8664 50%, #93b483 50%, #93b483 100%); // FF3.6+
+        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#db8664), color-stop(50%,#db8664), color-stop(50%,#93b483), color-stop(100%,#93b483)); // Chrome,Safari4+
+        background: -webkit-linear-gradient(-45deg,  #db8664 0%,#db8664 50%,#93b483 50%,#93b483 100%); // Chrome10+,Safari5.1+
+        background: -o-linear-gradient(-45deg,  #db8664 0%,#db8664 50%,#93b483 50%,#93b483 100%); // Opera 11.10+
+        background: -ms-linear-gradient(-45deg,  #db8664 0%,#db8664 50%,#93b483 50%,#93b483 100%); // IE10+
+        background: linear-gradient(135deg,  #db8664 0%,#db8664 50%,#93b483 50%,#93b483 100%); // W3C
+        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#db8664', endColorstr='#93b483',GradientType=1 ); // IE6-9 fallback on horizontal gradient
+    }
+    &.#{$ms-prefix}-gw {
+        background: #93b483; // Old browsers
+        background: -moz-linear-gradient(-45deg,  #93b483 0%, #93b483 50%, #edf2b0 50%, #edf2b0 100%); // FF3.6+
+        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#93b483), color-stop(50%,#93b483), color-stop(50%,#edf2b0), color-stop(100%,#edf2b0)); // Chrome,Safari4+
+        background: -webkit-linear-gradient(-45deg,  #93b483 0%,#93b483 50%,#edf2b0 50%,#edf2b0 100%); // Chrome10+,Safari5.1+
+        background: -o-linear-gradient(-45deg,  #93b483 0%,#93b483 50%,#edf2b0 50%,#edf2b0 100%); // Opera 11.10+
+        background: -ms-linear-gradient(-45deg,  #93b483 0%,#93b483 50%,#edf2b0 50%,#edf2b0 100%); // IE10+
+        background: linear-gradient(135deg,  #93b483 0%,#93b483 50%,#edf2b0 50%,#edf2b0 100%); // W3C
+        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93b483', endColorstr='#edf2b0',GradientType=1 ); // IE6-9 fallback on horizontal gradient
+    }
+    &.#{$ms-prefix}-gu {
+        background: #93b483; // Old browsers
+        background: -moz-linear-gradient(-45deg,  #93b483 0%, #93b483 50%, #b5cde3 50%, #b5cde3 100%); // FF3.6+
+        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#93b483), color-stop(50%,#93b483), color-stop(50%,#b5cde3), color-stop(100%,#b5cde3)); // Chrome,Safari4+
+        background: -webkit-linear-gradient(-45deg,  #93b483 0%,#93b483 50%,#b5cde3 50%,#b5cde3 100%); // Chrome10+,Safari5.1+
+        background: -o-linear-gradient(-45deg,  #93b483 0%,#93b483 50%,#b5cde3 50%,#b5cde3 100%); // Opera 11.10+
+        background: -ms-linear-gradient(-45deg,  #93b483 0%,#93b483 50%,#b5cde3 50%,#b5cde3 100%); // IE10+
+        background: linear-gradient(135deg,  #93b483 0%,#93b483 50%,#b5cde3 50%,#b5cde3 100%); // W3C
+        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93b483', endColorstr='#b5cde3',GradientType=1 ); // IE6-9 fallback on horizontal gradient
+    }
+    &.#{$ms-prefix}-2w {
+        background: #beb9b2; // Old browsers
+        background: -moz-linear-gradient(-45deg,  #beb9b2 0%, #beb9b2 50%, #edf2b0 50%, #edf2b0 100%); // FF3.6+
+        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#beb9b2), color-stop(50%,#beb9b2), color-stop(50%,#edf2b0), color-stop(100%,#edf2b0)); // Chrome,Safari4+
+        background: -webkit-linear-gradient(-45deg,  #beb9b2 0%,#beb9b2 50%,#edf2b0 50%,#edf2b0 100%); // Chrome10+,Safari5.1+
+        background: -o-linear-gradient(-45deg,  #beb9b2 0%,#beb9b2 50%,#edf2b0 50%,#edf2b0 100%); // Opera 11.10+
+        background: -ms-linear-gradient(-45deg,  #beb9b2 0%,#beb9b2 50%,#edf2b0 50%,#edf2b0 100%); // IE10+
+        background: linear-gradient(135deg,  #beb9b2 0%,#beb9b2 50%,#edf2b0 50%,#edf2b0 100%); // W3C
+        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#beb9b2', endColorstr='#edf2b0',GradientType=1 ); // IE6-9 fallback on horizontal gradient
+    }
+    &.#{$ms-prefix}-2u {
+        background: #beb9b2; // Old browsers
+        background: -moz-linear-gradient(-45deg,  #beb9b2 0%, #beb9b2 50%, #b5cde3 50%, #b5cde3 100%); // FF3.6+
+        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#beb9b2), color-stop(50%,#beb9b2), color-stop(50%,#b5cde3), color-stop(100%,#b5cde3)); // Chrome,Safari4+
+        background: -webkit-linear-gradient(-45deg,  #beb9b2 0%,#beb9b2 50%,#b5cde3 50%,#b5cde3 100%); // Chrome10+,Safari5.1+
+        background: -o-linear-gradient(-45deg,  #beb9b2 0%,#beb9b2 50%,#b5cde3 50%,#b5cde3 100%); // Opera 11.10+
+        background: -ms-linear-gradient(-45deg,  #beb9b2 0%,#beb9b2 50%,#b5cde3 50%,#b5cde3 100%); // IE10+
+        background: linear-gradient(135deg,  #beb9b2 0%,#beb9b2 50%,#b5cde3 50%,#b5cde3 100%); // W3C
+        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#beb9b2', endColorstr='#b5cde3',GradientType=1 ); // IE6-9 fallback on horizontal gradient
+    }
+    &.#{$ms-prefix}-2b {
+        background: #beb9b2; // Old browsers
+        background: -moz-linear-gradient(-45deg,  #beb9b2 0%, #beb9b2 50%, #9c9188 50%, #9c9188 100%); // FF3.6+
+        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#beb9b2), color-stop(50%,#beb9b2), color-stop(50%,#9c9188), color-stop(100%,#9c9188)); // Chrome,Safari4+
+        background: -webkit-linear-gradient(-45deg,  #beb9b2 0%,#beb9b2 50%,#9c9188 50%,#9c9188 100%); // Chrome10+,Safari5.1+
+        background: -o-linear-gradient(-45deg,  #beb9b2 0%,#beb9b2 50%,#9c9188 50%,#9c9188 100%); // Opera 11.10+
+        background: -ms-linear-gradient(-45deg,  #beb9b2 0%,#beb9b2 50%,#9c9188 50%,#9c9188 100%); // IE10+
+        background: linear-gradient(135deg,  #beb9b2 0%,#beb9b2 50%,#9c9188 50%,#9c9188 100%); // W3C
+        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#beb9b2', endColorstr='#9c9188',GradientType=1 ); // IE6-9 fallback on horizontal gradient
+    }
+    &.#{$ms-prefix}-2r {
+        background: #beb9b2; // Old browsers
+        background: -moz-linear-gradient(-45deg,  #beb9b2 0%, #beb9b2 50%, #db8664 50%, #db8664 100%); // FF3.6+
+        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#beb9b2), color-stop(50%,#beb9b2), color-stop(50%,#db8664), color-stop(100%,#db8664)); // Chrome,Safari4+
+        background: -webkit-linear-gradient(-45deg,  #beb9b2 0%,#beb9b2 50%,#db8664 50%,#db8664 100%); // Chrome10+,Safari5.1+
+        background: -o-linear-gradient(-45deg,  #beb9b2 0%,#beb9b2 50%,#db8664 50%,#db8664 100%); // Opera 11.10+
+        background: -ms-linear-gradient(-45deg,  #beb9b2 0%,#beb9b2 50%,#db8664 50%,#db8664 100%); // IE10+
+        background: linear-gradient(135deg,  #beb9b2 0%,#beb9b2 50%,#db8664 50%,#db8664 100%); // W3C
+        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#beb9b2', endColorstr='#db8664',GradientType=1 ); // IE6-9 fallback on horizontal gradient
+    }
+    &.#{$ms-prefix}-2g {
+        background: #beb9b2; // Old browsers
+        background: -moz-linear-gradient(-45deg,  #beb9b2 0%, #beb9b2 50%, #93b483 50%, #93b483 100%); // FF3.6+
+        background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#beb9b2), color-stop(50%,#beb9b2), color-stop(50%,#93b483), color-stop(100%,#93b483)); // Chrome,Safari4+
+        background: -webkit-linear-gradient(-45deg,  #beb9b2 0%,#beb9b2 50%,#93b483 50%,#93b483 100%); // Chrome10+,Safari5.1+
+        background: -o-linear-gradient(-45deg,  #beb9b2 0%,#beb9b2 50%,#93b483 50%,#93b483 100%); // Opera 11.10+
+        background: -ms-linear-gradient(-45deg,  #beb9b2 0%,#beb9b2 50%,#93b483 50%,#93b483 100%); // IE10+
+        background: linear-gradient(135deg,  #beb9b2 0%,#beb9b2 50%,#93b483 50%,#93b483 100%); // W3C
+        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#beb9b2', endColorstr='#93b483',GradientType=1 ); // IE6-9 fallback on horizontal gradient
+    }
+
+    // Phyrexian mana and size increases
+    &.#{$ms-prefix}-p:before,
+    &.#{$ms-prefix}-wp:before,
+    &.#{$ms-prefix}-up:before,
+    &.#{$ms-prefix}-bp:before,
+    &.#{$ms-prefix}-rp:before,
+    &.#{$ms-prefix}-gp:before {
+        display: inline-block;
+        -moz-transform: scale( 1.2, 1.2 );
+        -webkit-transform: scale( 1.2, 1.2 );
+        transform: scale( 1.2, 1.2 );
+    }
+
+    // Alternate tap
+    &.#{$ms-prefix}-tap-alt:before {
+        display: inline-block;
+        -moz-transform: scale( 1.2, 1.2 );
+        -webkit-transform: scale( 1.2, 1.2 );
+        transform: scale( 1.2, 1.2 );
+        padding-left: .06em;
+        padding-bottom: 0.10em;
+    }
+
+    // Snow mana
+    &.#{$ms-prefix}-s:before {
+        color: #fff;
+        -webkit-text-stroke: 2px #fff;
+        font-size: 0.85em;
+        top: -0.05em;
+        position: relative;
+        display: inline-block;
+    }
+    &.#{$ms-prefix}-s:after {
+        //text-shadow: -1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, 1px 1px 0 #fff;
+        content: "\e619";
+        position: absolute;
+        color: #333;
+        margin-left: -0.9em;
+        font-size: 1.1em;
+    }
+
+    // Tap symbols
+    &.#{$ms-prefix}-untap {
+        background-color: #111;
+        color: #fff;
+    }
+
+    // Shadow
+    &.#{$ms-prefix}-shadow {
+        box-shadow: -0.06em 0.07em 0 #111, 0 0.06em 0 #111;
+        &.#{$ms-prefix}-untap {
+            box-shadow: -0.06em 0.07em 0 #fff, 0 0.06em 0 #fff;
+        }
+    }
+}
+
+
+/**
+ * Split costs */
+
+.#{$ms-prefix}-split {
+    position: relative;
+    width: 1.3em;
+    height: 1.3em;
+}
+.#{$ms-prefix}-split:before,
+.#{$ms-prefix}-split:after {
+    font-size: 0.55em !important;
+    position: absolute;
+}
+.#{$ms-prefix}-split:before {
+    top: -0.38em;
+    left: 0.28em;
+}
+.#{$ms-prefix}-split:after {
+    top: 0.5em;
+    left: 1.0em;
+}
+
+
+/**
+ * Half costs */
+
+.#{$ms-prefix}-half {
+    width: .675em;
+    overflow: hidden;
+    display: inline-block;
+    margin-left: .675em;
+
+    > .#{$ms-prefix}-cost {
+        margin-left: -.675em;
+    }
+}
+
+/**
+ * Un-set costs */
+
+.#{$ms-prefix}-100 {
+    width: 2.4em;
+}
+.#{$ms-prefix}-1000000 {
+    width: 5.4em;
+}

sass/_dfc.scss

@@ -0,0 +1,9 @@
+/**
+ * Double faced cards */
+
+.#{$ms-prefix}-dfc {
+    color: #111;
+    border: .05em solid #111;
+    border-radius: 2em;
+    padding: 0.025em;
+}

sass/_icons.scss

@@ -0,0 +1,146 @@
+/**
+ * Mana */
+
+.#{$ms-prefix}-w:before { content: "\e600"; }
+.#{$ms-prefix}-u:before { content: "\e601"; }
+.#{$ms-prefix}-b:before { content: "\e602"; }
+.#{$ms-prefix}-r:before { content: "\e603"; }
+.#{$ms-prefix}-g:before { content: "\e604"; }
+.#{$ms-prefix}-0:before { content: "\e605"; }
+.#{$ms-prefix}-1:before { content: "\e606"; }
+.#{$ms-prefix}-2:before { content: "\e607"; }
+.#{$ms-prefix}-3:before { content: "\e608"; }
+.#{$ms-prefix}-4:before { content: "\e609"; }
+.#{$ms-prefix}-5:before { content: "\e60a"; }
+.#{$ms-prefix}-6:before { content: "\e60b"; }
+.#{$ms-prefix}-7:before { content: "\e60c"; }
+.#{$ms-prefix}-8:before { content: "\e60d"; }
+.#{$ms-prefix}-9:before { content: "\e60e"; }
+.#{$ms-prefix}-10:before { content: "\e60f"; }
+.#{$ms-prefix}-11:before { content: "\e610"; }
+.#{$ms-prefix}-12:before { content: "\e611"; }
+.#{$ms-prefix}-13:before { content: "\e612"; }
+.#{$ms-prefix}-14:before { content: "\e613"; }
+.#{$ms-prefix}-15:before { content: "\e614"; }
+.#{$ms-prefix}-16:before { content: "\e62a"; }
+.#{$ms-prefix}-17:before { content: "\e62b"; }
+.#{$ms-prefix}-18:before { content: "\e62c"; }
+.#{$ms-prefix}-19:before { content: "\e62d"; }
+.#{$ms-prefix}-20:before { content: "\e62e"; }
+.#{$ms-prefix}-x:before { content: "\e615"; }
+.#{$ms-prefix}-y:before { content: "\e616"; }
+.#{$ms-prefix}-z:before { content: "\e617"; }
+.#{$ms-prefix}-p:before,
+.#{$ms-prefix}-wp:before,
+.#{$ms-prefix}-up:before,
+.#{$ms-prefix}-bp:before,
+.#{$ms-prefix}-rp:before,
+.#{$ms-prefix}-gp:before { content: "\e618"; }
+.#{$ms-prefix}-s:before { content: "\e619"; }
+.#{$ms-prefix}-c:before { content: "\e904"; }
+.#{$ms-prefix}-e:before,
+.#{$ms-prefix}-energy:before{ content: "\e907"; }
+
+/**
+ * Tap/roll symbols */
+
+.#{$ms-prefix}-tap:before { content: "\e61a"; }
+.#{$ms-prefix}-untap:before { content: "\e61b"; }
+.#{$ms-prefix}-tap-alt:before { content: "\e61c"; }
+.#{$ms-prefix}-chaos:before { content: "\e61d"; }
+.#{$ms-prefix}-1-2:before { content: "\e902"; }
+.#{$ms-prefix}-infinity:before { content: "\e903"; }
+
+/**
+ * Card types */
+
+.#{$ms-prefix}-artifact:before { content: "\e61e"; }
+.#{$ms-prefix}-creature:before { content: "\e61f"; }
+.#{$ms-prefix}-enchantment:before { content: "\e620"; }
+.#{$ms-prefix}-instant:before { content: "\e621"; }
+.#{$ms-prefix}-land:before { content: "\e622"; }
+.#{$ms-prefix}-planeswalker:before { content: "\e623"; }
+.#{$ms-prefix}-sorcery:before { content: "\e624"; }
+
+/**
+ * Split symbols */
+
+.#{$ms-prefix}-wu:before,
+.#{$ms-prefix}-wb:before,
+.#{$ms-prefix}-rw:after,
+.#{$ms-prefix}-gw:after,
+.#{$ms-prefix}-2w:after { content: "\e600"; } // white
+.#{$ms-prefix}-ub:before,
+.#{$ms-prefix}-ur:before,
+.#{$ms-prefix}-wu:after,
+.#{$ms-prefix}-gu:after,
+.#{$ms-prefix}-2u:after { content: "\e601"; } // blue
+.#{$ms-prefix}-br:before,
+.#{$ms-prefix}-bg:before,
+.#{$ms-prefix}-wb:after,
+.#{$ms-prefix}-ub:after,
+.#{$ms-prefix}-2b:after { content: "\e602"; } // black
+.#{$ms-prefix}-rw:before,
+.#{$ms-prefix}-rg:before,
+.#{$ms-prefix}-ur:after,
+.#{$ms-prefix}-br:after,
+.#{$ms-prefix}-2r:after { content: "\e603"; } // red
+.#{$ms-prefix}-gw:before,
+.#{$ms-prefix}-gu:before,
+.#{$ms-prefix}-bg:after,
+.#{$ms-prefix}-rg:after,
+.#{$ms-prefix}-2g:after { content: "\e604"; } // green
+.#{$ms-prefix}-2w:before,
+.#{$ms-prefix}-2u:before,
+.#{$ms-prefix}-2b:before,
+.#{$ms-prefix}-2r:before,
+.#{$ms-prefix}-2g:before { content: "\e607"; } // 2
+
+/**
+ * Un-set symbols */
+
+.#{$ms-prefix}-100:before { content: "\e900"; }
+.#{$ms-prefix}-1000000:before { content: "\e901"; }
+
+/**
+ * Planeswalker symbols */
+
+.#{$ms-prefix}-loyalty-up:before { content: "\e627"; } // Up
+.#{$ms-prefix}-loyalty-down:before { content: "\e625"; } // Down
+.#{$ms-prefix}-loyalty-zero:before { content: "\e626"; } // Zero
+.#{$ms-prefix}-loyalty-start:before { content: "\e628"; } // Start
+
+/**
+ * Other */
+
+.#{$ms-prefix}-flashback:before { content: "\e629"; }
+.#{$ms-prefix}-dfc-night:before { content: "\e905"; }
+.#{$ms-prefix}-dfc-day:before { content: "\e906"; }
+.#{$ms-prefix}-dfc-ignite:before { content: "\e908"; }
+.#{$ms-prefix}-dfc-spark:before { content: "\e909"; }
+.#{$ms-prefix}-dfc-emrakul:before { content: "\e90a"; }
+.#{$ms-prefix}-dfc-moon:before { content: "\e90b"; }
+
+/**
+ * Guilds and Clans */
+
+.#{$ms-prefix}-guild-azorius:before { content: "\e90c"; }
+.#{$ms-prefix}-guild-boros:before { content: "\e90d"; }
+.#{$ms-prefix}-guild-dimir:before { content: "\e90e"; }
+.#{$ms-prefix}-guild-golgari:before { content: "\e90f"; }
+.#{$ms-prefix}-guild-gruul:before { content: "\e910"; }
+.#{$ms-prefix}-guild-izzet:before { content: "\e911"; }
+.#{$ms-prefix}-guild-orzhov:before { content: "\e912"; }
+.#{$ms-prefix}-guild-rakdos:before { content: "\e913"; }
+.#{$ms-prefix}-guild-selesnya:before { content: "\e914"; }
+.#{$ms-prefix}-guild-simic:before { content: "\e915"; }
+.#{$ms-prefix}-clan-abzan:before { content: "\e916"; }
+.#{$ms-prefix}-clan-jeskai:before { content: "\e917"; }
+.#{$ms-prefix}-clan-mardu:before { content: "\e918"; }
+.#{$ms-prefix}-clan-sultai:before { content: "\e919"; }
+.#{$ms-prefix}-clan-temur:before { content: "\e91a"; }
+.#{$ms-prefix}-clan-atarka:before { content: "\e91b"; }
+.#{$ms-prefix}-clan-dromoka:before { content: "\e91c"; }
+.#{$ms-prefix}-clan-kolaghan:before { content: "\e91d"; }
+.#{$ms-prefix}-clan-ojutai:before { content: "\e91e"; }
+.#{$ms-prefix}-clan-silumgar:before { content: "\e91f"; }

sass/_loyalty.scss

@@ -0,0 +1,91 @@
+/**
+ * Planeswalker symbols */
+
+.#{$ms-prefix}-loyalty {
+
+    // All
+    &-up,
+    &-down,
+    &-zero,
+    &-start {
+        color: #111;
+        font-size: 1.5em;
+        position: relative;
+        text-align: center;
+    }
+
+    // Start
+    &-start {
+        font-size: 2.0em; // increase the size a bit by default
+    }
+
+    // Counters
+    &-0:after,
+    &-1:after,
+    &-2:after,
+    &-3:after,
+    &-4:after,
+    &-5:after,
+    &-6:after,
+    &-7:after,
+    &-8:after,
+    &-9:after,
+    &-10:after,
+    &-12:after,
+    &-14:after,
+    &-x:after {
+        color: #fff;
+        display: inline-block;
+        font-size: 0.5em;
+        font-family: $ms-serif-font;
+        position: absolute;
+        left: 0;
+        line-height: 1.75em;
+        width: 100%;
+        text-align: center;
+        -webkit-padding-before: 0.15em; // fix for odd webkit line-height
+    }
+    &-0:after { content: "0"; }
+    &-up {
+        &.#{$ms-prefix}-loyalty-1:after { content: "+1"; }
+        &.#{$ms-prefix}-loyalty-2:after { content: "+2"; }
+        &.#{$ms-prefix}-loyalty-3:after { content: "+3"; }
+        &.#{$ms-prefix}-loyalty-4:after { content: "+4"; }
+        &.#{$ms-prefix}-loyalty-5:after { content: "+5"; }
+        &.#{$ms-prefix}-loyalty-6:after { content: "+6"; }
+        &.#{$ms-prefix}-loyalty-7:after { content: "+7"; }
+        &.#{$ms-prefix}-loyalty-8:after { content: "+8"; }
+        &.#{$ms-prefix}-loyalty-9:after { content: "+9"; }
+        &.#{$ms-prefix}-loyalty-10:after { content: "+10"; }
+        &.#{$ms-prefix}-loyalty-x:after { content: "+X"; }
+    }
+    &-start {
+        &.#{$ms-prefix}-loyalty-1:after { content: "1"; }
+        &.#{$ms-prefix}-loyalty-2:after { content: "2"; }
+        &.#{$ms-prefix}-loyalty-3:after { content: "3"; }
+        &.#{$ms-prefix}-loyalty-4:after { content: "4"; }
+        &.#{$ms-prefix}-loyalty-5:after { content: "5"; }
+        &.#{$ms-prefix}-loyalty-6:after { content: "6"; }
+        &.#{$ms-prefix}-loyalty-7:after { content: "7"; }
+        &.#{$ms-prefix}-loyalty-8:after { content: "8"; }
+        &.#{$ms-prefix}-loyalty-9:after { content: "9"; }
+        &.#{$ms-prefix}-loyalty-10:after { content: "10"; }
+        &.#{$ms-prefix}-loyalty-x:after { content: "X"; }
+    }
+    &-down {
+        &:after{ line-height: 1.6em; }
+        &.#{$ms-prefix}-loyalty-1:after { content: "-1"; }
+        &.#{$ms-prefix}-loyalty-2:after { content: "-2"; }
+        &.#{$ms-prefix}-loyalty-3:after { content: "-3"; }
+        &.#{$ms-prefix}-loyalty-4:after { content: "-4"; }
+        &.#{$ms-prefix}-loyalty-5:after { content: "-5"; }
+        &.#{$ms-prefix}-loyalty-6:after { content: "-6"; }
+        &.#{$ms-prefix}-loyalty-7:after { content: "-7"; }
+        &.#{$ms-prefix}-loyalty-8:after { content: "-8"; }
+        &.#{$ms-prefix}-loyalty-9:after { content: "-9"; }
+        &.#{$ms-prefix}-loyalty-10:after { content: "-10"; }
+        &.#{$ms-prefix}-loyalty-12:after { content: "-12"; }
+        &.#{$ms-prefix}-loyalty-14:after { content: "-14"; }
+        &.#{$ms-prefix}-loyalty-x:after { content: "-X"; }
+    }
+}

sass/_path.scss

@@ -0,0 +1,21 @@
+@font-face {
+    font-family: 'Mana';
+    src:url( '#{$ms-font-path}/mana.eot?v=#{$ms-version}' );
+    src:url( '#{$ms-font-path}/mana.eot?#iefix&v=#{$ms-version}') format( 'embedded-opentype' ),
+        url( '#{$ms-font-path}/mana.woff?v=#{$ms-version}') format( 'woff' ),
+        url( '#{$ms-font-path}/mana.ttf?v=#{$ms-version}') format( 'truetype' ),
+        url( '#{$ms-font-path}/mana.svg?v=#{$ms-version}#mana') format( 'svg' );
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'MPlantin';
+    src:url( '#{$ms-font-path}/mplantin.eot?v=#{$ms-version}' );
+    src:url( '#{$ms-font-path}/mplantin.eot?#iefix&v=#{$ms-version}') format( 'embedded-opentype' ),
+        url( '#{$ms-font-path}/mplantin.woff?v=#{$ms-version}') format( 'woff' ),
+        url( '#{$ms-font-path}/mplantin.ttf?v=#{$ms-version}') format( 'truetype' ),
+        url( '#{$ms-font-path}/mplantin.svg?v=#{$ms-version}#mplantin') format( 'svg' );
+    font-weight: normal;
+    font-style: normal;
+}

sass/_sizes.scss

@@ -0,0 +1,8 @@
+/*
+ * Larger sizes */
+
+.#{$ms-prefix}-2x { font-size: 1.75em; }
+.#{$ms-prefix}-3x { font-size: 2.25em; }
+.#{$ms-prefix}-4x { font-size: 3.0em; }
+.#{$ms-prefix}-5x { font-size: 3.75em; }
+.#{$ms-prefix}-6x { font-size: 4.5em; }

sass/_variables.scss

@@ -0,0 +1,8 @@
+/**
+ * Global */
+
+$ms-font-path: '../fonts';
+$ms-version: '1.3.1';
+$ms-font-size-base: 14px;
+$ms-prefix: ms;
+$ms-serif-font: 'MPlantin, Garamond, Palatino, 'Times New Roman', Times, serif';

sass/mana.scss

@@ -0,0 +1,8 @@
+@import "variables";
+@import "path";
+@import "core";
+@import "cost";
+@import "loyalty";
+@import "dfc";
+@import "sizes";
+@import "icons";