Convert sass files to scss files

sass/helpers/_all.sass

@@ -1,12 +0,0 @@
-/* Bulma Helpers */
-@charset "utf-8"
-
-@import "color"
-@import "flexbox"
-@import "float"
-@import "other"
-@import "overflow"
-@import "position"
-@import "spacing"
-@import "typography"
-@import "visibility"

sass/helpers/_all.scss

@@ -0,0 +1,12 @@
+/* Bulma Helpers */
+@charset "utf-8";
+
+@import "color";
+@import "flexbox";
+@import "float";
+@import "other";
+@import "overflow";
+@import "position";
+@import "spacing";
+@import "typography";
+@import "visibility";

sass/helpers/color.sass

@@ -1,39 +0,0 @@
-@import "../utilities/derived-variables"
-
-@each $name, $pair in $colors
-  $color: nth($pair, 1)
-  .has-text-#{$name}
-    color: $color !important
-  a.has-text-#{$name}
-    &:hover,
-    &:focus
-      color: bulmaDarken($color, 10%) !important
-  .has-background-#{$name}
-    background-color: $color !important
-  @if length($pair) >= 4
-    $color-light: nth($pair, 3)
-    $color-dark: nth($pair, 4)
-    // Light
-    .has-text-#{$name}-light
-      color: $color-light !important
-    a.has-text-#{$name}-light
-      &:hover,
-      &:focus
-        color: bulmaDarken($color-light, 10%) !important
-    .has-background-#{$name}-light
-      background-color: $color-light !important
-    // Dark
-    .has-text-#{$name}-dark
-      color: $color-dark !important
-    a.has-text-#{$name}-dark
-      &:hover,
-      &:focus
-        color: bulmaLighten($color-dark, 10%) !important
-    .has-background-#{$name}-dark
-      background-color: $color-dark !important
-
-@each $name, $shade in $shades
-  .has-text-#{$name}
-    color: $shade !important
-  .has-background-#{$name}
-    background-color: $shade !important

sass/helpers/color.scss

@@ -0,0 +1,67 @@
+@import "../utilities/derived-variables";
+
+@each $name, $pair in $colors {
+  $color: nth($pair, 1);
+
+  .has-text-#{$name} {
+    color: $color !important;
+  }
+
+  a.has-text-#{$name} {
+    &:hover,
+    &:focus {
+      color: bulmaDarken($color, 10%) !important;
+    }
+  }
+
+  .has-background-#{$name} {
+    background-color: $color !important;
+  }
+
+  @if length($pair) >= 4 {
+    $color-light: nth($pair, 3);
+    $color-dark: nth($pair, 4);
+
+    // Light
+    .has-text-#{$name}-light {
+      color: $color-light !important;
+    }
+
+    a.has-text-#{$name}-light {
+      &:hover,
+      &:focus {
+        color: bulmaDarken($color-light, 10%) !important;
+      }
+    }
+
+    .has-background-#{$name}-light {
+      background-color: $color-light !important;
+    }
+
+    // Dark
+    .has-text-#{$name}-dark {
+      color: $color-dark !important;
+    }
+
+    a.has-text-#{$name}-dark {
+      &:hover,
+      &:focus {
+        color: bulmaLighten($color-dark, 10%) !important;
+      }
+    }
+
+    .has-background-#{$name}-dark {
+      background-color: $color-dark !important;
+    }
+  }
+}
+
+@each $name, $shade in $shades {
+  .has-text-#{$name} {
+    color: $shade !important;
+  }
+
+  .has-background-#{$name} {
+    background-color: $shade !important;
+  }
+}

sass/helpers/flexbox.sass

@@ -1,35 +0,0 @@
-$flex-direction-values: row, row-reverse, column, column-reverse
-@each $value in $flex-direction-values
-  .is-flex-direction-#{$value}
-    flex-direction: $value !important
-
-$flex-wrap-values: nowrap, wrap, wrap-reverse
-@each $value in $flex-wrap-values
-  .is-flex-wrap-#{$value}
-    flex-wrap: $value !important
-
-$justify-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, start, end, left, right
-@each $value in $justify-content-values
-  .is-justify-content-#{$value}
-    justify-content: $value !important
-
-$align-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, stretch, start, end, baseline
-@each $value in $align-content-values
-  .is-align-content-#{$value}
-    align-content: $value !important
-
-$align-items-values: stretch, flex-start, flex-end, center, baseline, start, end, self-start, self-end
-@each $value in $align-items-values
-  .is-align-items-#{$value}
-    align-items: $value !important
-
-$align-self-values: auto, flex-start, flex-end, center, baseline, stretch
-@each $value in $align-self-values
-  .is-align-self-#{$value}
-    align-self: $value !important
-
-$flex-operators: grow, shrink
-@each $operator in $flex-operators
-  @for $i from 0 through 5
-    .is-flex-#{$operator}-#{$i}
-      flex-#{$operator}: $i !important

sass/helpers/flexbox.scss

@@ -0,0 +1,57 @@
+$flex-direction-values: row, row-reverse, column, column-reverse;
+
+@each $value in $flex-direction-values {
+  .is-flex-direction-#{$value} {
+    flex-direction: $value !important;
+  }
+}
+
+$flex-wrap-values: nowrap, wrap, wrap-reverse;
+
+@each $value in $flex-wrap-values {
+  .is-flex-wrap-#{$value} {
+    flex-wrap: $value !important;
+  }
+}
+
+$justify-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, start, end, left, right;
+
+@each $value in $justify-content-values {
+  .is-justify-content-#{$value} {
+    justify-content: $value !important;
+  }
+}
+
+$align-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, stretch, start, end, baseline;
+
+@each $value in $align-content-values {
+  .is-align-content-#{$value} {
+    align-content: $value !important;
+  }
+}
+
+$align-items-values: stretch, flex-start, flex-end, center, baseline, start, end, self-start, self-end;
+
+@each $value in $align-items-values {
+  .is-align-items-#{$value} {
+    align-items: $value !important;
+  }
+}
+
+$align-self-values: auto, flex-start, flex-end, center, baseline, stretch;
+
+@each $value in $align-self-values {
+  .is-align-self-#{$value} {
+    align-self: $value !important;
+  }
+}
+
+$flex-operators: grow, shrink;
+
+@each $operator in $flex-operators {
+  @for $i from 0 through 5 {
+    .is-flex-#{$operator}-#{$i} {
+      flex-#{$operator}: $i !important;
+    }
+  }
+}

sass/helpers/float.sass

@@ -1,10 +0,0 @@
-@import "../utilities/mixins"
-
-.is-clearfix
-  +clearfix
-
-.is-pulled-left
-  float: left !important
-
-.is-pulled-right
-  float: right !important

sass/helpers/float.scss

@@ -0,0 +1,13 @@
+@import "../utilities/mixins";
+
+.is-clearfix {
+  @include clearfix;
+}
+
+.is-pulled-left {
+  float: left !important;
+}
+
+.is-pulled-right {
+  float: right !important;
+}

sass/helpers/other.sass

@@ -1,14 +0,0 @@
-@import "../utilities/mixins"
-
-.is-radiusless
-  border-radius: 0 !important
-
-.is-shadowless
-  box-shadow: none !important
-
-.is-clickable
-  cursor: pointer !important
-  pointer-events: all !important
-
-.is-unselectable
-  @extend %unselectable

sass/helpers/other.scss

@@ -0,0 +1,18 @@
+@import "../utilities/mixins";
+
+.is-radiusless {
+  border-radius: 0 !important;
+}
+
+.is-shadowless {
+  box-shadow: none !important;
+}
+
+.is-clickable {
+  cursor: pointer !important;
+  pointer-events: all !important;
+}
+
+.is-unselectable {
+  @extend %unselectable;
+}

sass/helpers/overflow.sass

@@ -1,2 +0,0 @@
-.is-clipped
-  overflow: hidden !important

sass/helpers/overflow.scss

@@ -0,0 +1,3 @@
+.is-clipped {
+  overflow: hidden !important;
+}

sass/helpers/position.sass

@@ -1,7 +0,0 @@
-@import "../utilities/mixins"
-
-.is-overlay
-  @extend %overlay
-
-.is-relative
-  position: relative !important

sass/helpers/position.scss

@@ -0,0 +1,9 @@
+@import "../utilities/mixins";
+
+.is-overlay {
+  @extend %overlay;
+}
+
+.is-relative {
+  position: relative !important;
+}

sass/helpers/spacing.sass

@@ -1,31 +0,0 @@
-.is-marginless
-  margin: 0 !important
-
-.is-paddingless
-  padding: 0 !important
-
-$spacing-shortcuts: ("margin": "m", "padding": "p") !default
-$spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default
-$spacing-horizontal: "x" !default
-$spacing-vertical: "y" !default
-$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem, "auto": auto) !default
-
-@each $property, $shortcut in $spacing-shortcuts
-  @each $name, $value in $spacing-values
-    // All directions
-    .#{$shortcut}-#{$name}
-      #{$property}: $value !important
-    // Cardinal directions
-    @each $direction, $suffix in $spacing-directions
-      .#{$shortcut}#{$suffix}-#{$name}
-        #{$property}-#{$direction}: $value !important
-    // Horizontal axis
-    @if $spacing-horizontal != null
-      .#{$shortcut}#{$spacing-horizontal}-#{$name}
-        #{$property}-left: $value !important
-        #{$property}-right: $value !important
-    // Vertical axis
-    @if $spacing-vertical != null
-      .#{$shortcut}#{$spacing-vertical}-#{$name}
-        #{$property}-top: $value !important
-        #{$property}-bottom: $value !important

sass/helpers/spacing.scss

@@ -0,0 +1,45 @@
+.is-marginless {
+  margin: 0 !important;
+}
+
+.is-paddingless {
+  padding: 0 !important;
+}
+
+$spacing-shortcuts: ("margin": "m", "padding": "p") !default;
+$spacing-directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default;
+$spacing-horizontal: "x" !default;
+$spacing-vertical: "y" !default;
+$spacing-values: ("0": 0, "1": 0.25rem, "2": 0.5rem, "3": 0.75rem, "4": 1rem, "5": 1.5rem, "6": 3rem, "auto": auto) !default;
+
+@each $property, $shortcut in $spacing-shortcuts {
+  @each $name, $value in $spacing-values {
+    // All directions
+    .#{$shortcut}-#{$name} {
+      #{$property}: $value !important;
+    }
+
+    // Cardinal directions
+    @each $direction, $suffix in $spacing-directions {
+      .#{$shortcut}#{$suffix}-#{$name} {
+        #{$property}-#{$direction}: $value !important;
+      }
+    }
+
+    // Horizontal axis
+    @if $spacing-horizontal != null {
+      .#{$shortcut}#{$spacing-horizontal}-#{$name} {
+        #{$property}-left: $value !important;
+        #{$property}-right: $value !important;
+      }
+    }
+
+    // Vertical axis
+    @if $spacing-vertical != null {
+      .#{$shortcut}#{$spacing-vertical}-#{$name} {
+        #{$property}-top: $value !important;
+        #{$property}-bottom: $value !important;
+      }
+    }
+  }
+}

sass/helpers/typography.sass

@@ -1,103 +0,0 @@
-@import "../utilities/mixins"
-
-=typography-size($target:'')
-  @each $size in $sizes
-    $i: index($sizes, $size)
-    .is-size-#{$i}#{if($target == '', '', '-' + $target)}
-      font-size: $size !important
-
-+typography-size()
-
-+mobile
-  +typography-size('mobile')
-
-+tablet
-  +typography-size('tablet')
-
-+touch
-  +typography-size('touch')
-
-+desktop
-  +typography-size('desktop')
-
-+widescreen
-  +typography-size('widescreen')
-
-+fullhd
-  +typography-size('fullhd')
-
-$alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'right': 'right')
-
-@each $alignment, $text-align in $alignments
-  .has-text-#{$alignment}
-    text-align: #{$text-align} !important
-
-@each $alignment, $text-align in $alignments
-  +mobile
-    .has-text-#{$alignment}-mobile
-      text-align: #{$text-align} !important
-  +tablet
-    .has-text-#{$alignment}-tablet
-      text-align: #{$text-align} !important
-  +tablet-only
-    .has-text-#{$alignment}-tablet-only
-      text-align: #{$text-align} !important
-  +touch
-    .has-text-#{$alignment}-touch
-      text-align: #{$text-align} !important
-  +desktop
-    .has-text-#{$alignment}-desktop
-      text-align: #{$text-align} !important
-  +desktop-only
-    .has-text-#{$alignment}-desktop-only
-      text-align: #{$text-align} !important
-  +widescreen
-    .has-text-#{$alignment}-widescreen
-      text-align: #{$text-align} !important
-  +widescreen-only
-    .has-text-#{$alignment}-widescreen-only
-      text-align: #{$text-align} !important
-  +fullhd
-    .has-text-#{$alignment}-fullhd
-      text-align: #{$text-align} !important
-
-.is-capitalized
-  text-transform: capitalize !important
-
-.is-lowercase
-  text-transform: lowercase !important
-
-.is-uppercase
-  text-transform: uppercase !important
-
-.is-italic
-  font-style: italic !important
-  
-.is-underlined
-  text-decoration: underline !important
-
-.has-text-weight-light
-  font-weight: $weight-light !important
-.has-text-weight-normal
-  font-weight: $weight-normal !important
-.has-text-weight-medium
-  font-weight: $weight-medium !important
-.has-text-weight-semibold
-  font-weight: $weight-semibold !important
-.has-text-weight-bold
-  font-weight: $weight-bold !important
-
-.is-family-primary
-  font-family: $family-primary !important
-
-.is-family-secondary
-  font-family: $family-secondary !important
-
-.is-family-sans-serif
-  font-family: $family-sans-serif !important
-
-.is-family-monospace
-  font-family: $family-monospace !important
-
-.is-family-code
-  font-family: $family-code !important

sass/helpers/typography.scss

@@ -0,0 +1,175 @@
+@import "../utilities/mixins";
+
+@mixin typography-size($target: "") {
+  @each $size in $sizes {
+    $i: index($sizes, $size);
+
+    .is-size-#{$i}#{if($target == "", "", "-" + $target)} {
+      font-size: $size !important;
+    }
+  }
+}
+
+@include typography-size;
+
+@include mobile {
+  @include typography-size("mobile");
+}
+
+
+@include tablet {
+  @include typography-size("tablet");
+}
+
+
+@include touch {
+  @include typography-size("touch");
+}
+
+
+@include desktop {
+  @include typography-size("desktop");
+}
+
+
+@include widescreen {
+  @include typography-size("widescreen");
+}
+
+
+@include fullhd {
+  @include typography-size("fullhd");
+}
+
+
+$alignments: ("centered": "center", "justified": "justify", "left": "left", "right": "right");
+
+@each $alignment, $text-align in $alignments {
+  .has-text-#{$alignment} {
+    text-align: #{$text-align} !important;
+  }
+}
+
+@each $alignment, $text-align in $alignments {
+  @include mobile {
+    .has-text-#{$alignment}-mobile {
+      text-align: #{$text-align} !important;
+    }
+  }
+
+
+  @include tablet {
+    .has-text-#{$alignment}-tablet {
+      text-align: #{$text-align} !important;
+    }
+  }
+
+
+  @include tablet-only {
+    .has-text-#{$alignment}-tablet-only {
+      text-align: #{$text-align} !important;
+    }
+  }
+
+
+  @include touch {
+    .has-text-#{$alignment}-touch {
+      text-align: #{$text-align} !important;
+    }
+  }
+
+
+  @include desktop {
+    .has-text-#{$alignment}-desktop {
+      text-align: #{$text-align} !important;
+    }
+  }
+
+
+  @include desktop-only {
+    .has-text-#{$alignment}-desktop-only {
+      text-align: #{$text-align} !important;
+    }
+  }
+
+
+  @include widescreen {
+    .has-text-#{$alignment}-widescreen {
+      text-align: #{$text-align} !important;
+    }
+  }
+
+
+  @include widescreen-only {
+    .has-text-#{$alignment}-widescreen-only {
+      text-align: #{$text-align} !important;
+    }
+  }
+
+
+  @include fullhd {
+    .has-text-#{$alignment}-fullhd {
+      text-align: #{$text-align} !important;
+    }
+  }
+}
+
+.is-capitalized {
+  text-transform: capitalize !important;
+}
+
+.is-lowercase {
+  text-transform: lowercase !important;
+}
+
+.is-uppercase {
+  text-transform: uppercase !important;
+}
+
+.is-italic {
+  font-style: italic !important;
+}
+
+.is-underlined {
+  text-decoration: underline !important;
+}
+
+.has-text-weight-light {
+  font-weight: $weight-light !important;
+}
+
+.has-text-weight-normal {
+  font-weight: $weight-normal !important;
+}
+
+.has-text-weight-medium {
+  font-weight: $weight-medium !important;
+}
+
+.has-text-weight-semibold {
+  font-weight: $weight-semibold !important;
+}
+
+.has-text-weight-bold {
+  font-weight: $weight-bold !important;
+}
+
+.is-family-primary {
+  font-family: $family-primary !important;
+}
+
+.is-family-secondary {
+  font-family: $family-secondary !important;
+}
+
+.is-family-sans-serif {
+  font-family: $family-sans-serif !important;
+}
+
+.is-family-monospace {
+  font-family: $family-monospace !important;
+}
+
+.is-family-code {
+  font-family: $family-code !important;
+}

sass/helpers/visibility.sass

@@ -1,122 +0,0 @@
-@import "../utilities/mixins"
-
-$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
-
-@each $display in $displays
-  .is-#{$display}
-    display: #{$display} !important
-  +mobile
-    .is-#{$display}-mobile
-      display: #{$display} !important
-  +tablet
-    .is-#{$display}-tablet
-      display: #{$display} !important
-  +tablet-only
-    .is-#{$display}-tablet-only
-      display: #{$display} !important
-  +touch
-    .is-#{$display}-touch
-      display: #{$display} !important
-  +desktop
-    .is-#{$display}-desktop
-      display: #{$display} !important
-  +desktop-only
-    .is-#{$display}-desktop-only
-      display: #{$display} !important
-  +widescreen
-    .is-#{$display}-widescreen
-      display: #{$display} !important
-  +widescreen-only
-    .is-#{$display}-widescreen-only
-      display: #{$display} !important
-  +fullhd
-    .is-#{$display}-fullhd
-      display: #{$display} !important
-
-.is-hidden
-  display: none !important
-
-.is-sr-only
-  border: none !important
-  clip: rect(0, 0, 0, 0) !important
-  height: 0.01em !important
-  overflow: hidden !important
-  padding: 0 !important
-  position: absolute !important
-  white-space: nowrap !important
-  width: 0.01em !important
-
-+mobile
-  .is-hidden-mobile
-    display: none !important
-
-+tablet
-  .is-hidden-tablet
-    display: none !important
-
-+tablet-only
-  .is-hidden-tablet-only
-    display: none !important
-
-+touch
-  .is-hidden-touch
-    display: none !important
-
-+desktop
-  .is-hidden-desktop
-    display: none !important
-
-+desktop-only
-  .is-hidden-desktop-only
-    display: none !important
-
-+widescreen
-  .is-hidden-widescreen
-    display: none !important
-
-+widescreen-only
-  .is-hidden-widescreen-only
-    display: none !important
-
-+fullhd
-  .is-hidden-fullhd
-    display: none !important
-
-.is-invisible
-  visibility: hidden !important
-
-+mobile
-  .is-invisible-mobile
-    visibility: hidden !important
-
-+tablet
-  .is-invisible-tablet
-    visibility: hidden !important
-
-+tablet-only
-  .is-invisible-tablet-only
-    visibility: hidden !important
-
-+touch
-  .is-invisible-touch
-    visibility: hidden !important
-
-+desktop
-  .is-invisible-desktop
-    visibility: hidden !important
-
-+desktop-only
-  .is-invisible-desktop-only
-    visibility: hidden !important
-
-+widescreen
-  .is-invisible-widescreen
-    visibility: hidden !important
-
-+widescreen-only
-  .is-invisible-widescreen-only
-    visibility: hidden !important
-
-+fullhd
-  .is-invisible-fullhd
-    visibility: hidden !important

sass/helpers/visibility.scss

@@ -0,0 +1,215 @@
+@import "../utilities/mixins";
+
+$displays: "block" "flex" "inline" "inline-block" "inline-flex";
+
+@each $display in $displays {
+  .is-#{$display} {
+    display: #{$display} !important;
+  }
+
+  @include mobile {
+    .is-#{$display}-mobile {
+      display: #{$display} !important;
+    }
+  }
+
+
+  @include tablet {
+    .is-#{$display}-tablet {
+      display: #{$display} !important;
+    }
+  }
+
+
+  @include tablet-only {
+    .is-#{$display}-tablet-only {
+      display: #{$display} !important;
+    }
+  }
+
+
+  @include touch {
+    .is-#{$display}-touch {
+      display: #{$display} !important;
+    }
+  }
+
+
+  @include desktop {
+    .is-#{$display}-desktop {
+      display: #{$display} !important;
+    }
+  }
+
+
+  @include desktop-only {
+    .is-#{$display}-desktop-only {
+      display: #{$display} !important;
+    }
+  }
+
+
+  @include widescreen {
+    .is-#{$display}-widescreen {
+      display: #{$display} !important;
+    }
+  }
+
+
+  @include widescreen-only {
+    .is-#{$display}-widescreen-only {
+      display: #{$display} !important;
+    }
+  }
+
+
+  @include fullhd {
+    .is-#{$display}-fullhd {
+      display: #{$display} !important;
+    }
+  }
+}
+
+.is-hidden {
+  display: none !important;
+}
+
+.is-sr-only {
+  border: none !important;
+  clip: rect(0, 0, 0, 0) !important;
+  height: 0.01em !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  white-space: nowrap !important;
+  width: 0.01em !important;
+}
+
+@include mobile {
+  .is-hidden-mobile {
+    display: none !important;
+  }
+}
+
+
+@include tablet {
+  .is-hidden-tablet {
+    display: none !important;
+  }
+}
+
+
+@include tablet-only {
+  .is-hidden-tablet-only {
+    display: none !important;
+  }
+}
+
+
+@include touch {
+  .is-hidden-touch {
+    display: none !important;
+  }
+}
+
+
+@include desktop {
+  .is-hidden-desktop {
+    display: none !important;
+  }
+}
+
+
+@include desktop-only {
+  .is-hidden-desktop-only {
+    display: none !important;
+  }
+}
+
+
+@include widescreen {
+  .is-hidden-widescreen {
+    display: none !important;
+  }
+}
+
+
+@include widescreen-only {
+  .is-hidden-widescreen-only {
+    display: none !important;
+  }
+}
+
+
+@include fullhd {
+  .is-hidden-fullhd {
+    display: none !important;
+  }
+}
+
+
+.is-invisible {
+  visibility: hidden !important;
+}
+
+@include mobile {
+  .is-invisible-mobile {
+    visibility: hidden !important;
+  }
+}
+
+
+@include tablet {
+  .is-invisible-tablet {
+    visibility: hidden !important;
+  }
+}
+
+
+@include tablet-only {
+  .is-invisible-tablet-only {
+    visibility: hidden !important;
+  }
+}
+
+
+@include touch {
+  .is-invisible-touch {
+    visibility: hidden !important;
+  }
+}
+
+
+@include desktop {
+  .is-invisible-desktop {
+    visibility: hidden !important;
+  }
+}
+
+
+@include desktop-only {
+  .is-invisible-desktop-only {
+    visibility: hidden !important;
+  }
+}
+
+
+@include widescreen {
+  .is-invisible-widescreen {
+    visibility: hidden !important;
+  }
+}
+
+
+@include widescreen-only {
+  .is-invisible-widescreen-only {
+    visibility: hidden !important;
+  }
+}
+
+
+@include fullhd {
+  .is-invisible-fullhd {
+    visibility: hidden !important;
+  }
+}