use stylus instead of sass

.editorconfig

@@ -9,5 +9,5 @@ indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = true
 
-[*.{php,js,md}]
+[*.{php,js,md,styl}]
 indent_size = 4

gulpfile.js

@@ -4,7 +4,7 @@ var gulp        = require('gulp'),
     babel       = require('gulp-babel'),
     eslint      = require('gulp-eslint'),
     uglify      = require('gulp-uglify'),
-    sass        = require('gulp-sass'),
+    stylus      = require('gulp-stylus'),
     cleanCss    = require('gulp-clean-css'),
     del         = require('del'),
     exec        = require('child_process').exec,
@@ -79,7 +79,7 @@ gulp.task('default', ['build']);
 
 // Build the things!
 gulp.task('build', callback => {
-    runSequence('clean', 'lint', ['compile-es6', 'compile-sass'], 'publish-vendor', 'notify', callback);
+    runSequence('clean', 'lint', ['compile-es6', 'compile-stylus'], 'publish-vendor', 'notify', callback);
 });
 
 // Send a notification
@@ -131,11 +131,11 @@ gulp.task('publish-vendor', ['compile-es6'], callback => {
     callback();
 });
 
-// Compile sass to css
-gulp.task('compile-sass', () => {
-    return gulp.src(`${srcPath}/sass/*.scss`)
+// Compile stylus to css
+gulp.task('compile-stylus', () => {
+    return gulp.src(`${srcPath}/stylus/*.styl`)
         .pipe(sourcemaps.init())
-        .pipe(sass().on('error', sass.logError))
+        .pipe(stylus())
         .pipe(cleanCss())
         .pipe(sourcemaps.write('./maps'))
         .pipe(gulp.dest(`${distPath}/css`));
@@ -212,14 +212,14 @@ gulp.task('zip', () => {
             '!vendor/mikey179/vfsStream/**',
         ], { dot: true })
         .pipe(zip(zipPath))
-        .pipe(notify('Don\'t forget to compile Sass & ES2015 files before publishing a release!'))
+        .pipe(notify('Don\'t forget to compile Stylus & ES2015 files before publishing a release!'))
         .pipe(gulp.dest('../'))
         .pipe(notify({ message: `Zip archive saved to ${zipPath}!` }));
 });
 
-gulp.task('watch', ['compile-sass', 'compile-es6'], () => {
+gulp.task('watch', ['compile-stylus', 'compile-es6'], () => {
     // watch .scss files
-    gulp.watch(`${srcPath}/sass/*.scss`, ['compile-sass'], () => notify('Sass files compiled!'));
+    gulp.watch(`${srcPath}/stylus/*.scss`, ['compile-stylus'], () => notify('Stylus files compiled!'));
     // watch .js files
     gulp.watch(`${srcPath}/js/**/*.js`, ['compile-es6'], () => notify('ES6 scripts compiled!'));
     gulp.watch(`${srcPath}/js/general.js`, ['publish-vendor']);

package.json

@@ -49,14 +49,14 @@
     "gulp-concat": "^2.6.1",
     "gulp-eslint": "^4.0.2",
     "gulp-notify": "^3.2.0",
-    "gulp-sass": "^3.1.0",
     "gulp-sourcemaps": "^2.6.4",
+    "gulp-stylus": "^2.7.0",
     "gulp-uglify": "^3.0.0",
     "gulp-zip": "^4.1.0",
     "jest": "^20.0.4",
     "merge2": "^1.2.1",
-    "node-sass": "^4.7.2",
-    "run-sequence": "^2.2.1"
+    "run-sequence": "^2.2.1",
+    "stylus": "^0.54.5"
   },
   "jest": {
     "timers": "fake"

resources/assets/src/stylus/admin.styl

@@ -1,4 +1,4 @@
-@import "general.scss";
+@import "general.styl";
 
 .info-box {
     a {

resources/assets/src/stylus/auth.styl

@@ -1,4 +1,4 @@
-@import "general.scss";
+@import "general.styl";
 
 .login-logo a, .register-logo a, .reset-logo a {
     font-family: Minecraft, Ubuntu, 'Segoe UI', 'Microsoft Yahei', 'Microsoft Jhenghei', sans-serif;

resources/assets/src/stylus/general.styl

@@ -1,4 +1,4 @@
-$font_stack: Ubuntu, 'Segoe UI', 'Microsoft Yahei', 'Microsoft Jhenghei', sans-serif;
+font_stack = Ubuntu, 'Segoe UI', 'Microsoft Yahei', 'Microsoft Jhenghei', sans-serif;
 
 @font-face {
     font-family: 'Ubuntu';
@@ -16,11 +16,11 @@ $font_stack: Ubuntu, 'Segoe UI', 'Microsoft Yahei', 'Microsoft Jhenghei', sans-s
 }
 
 body, h1, h2, h3, h4, h5, h6, .logo {
-    font-family: $font_stack !important;
+    font-family: font_stack !important;
 }
 
 .swal2-modal, .swal2-content {
-    font-family: $font_stack;
+    font-family: font_stack;
     font-weight: 400 !important;
 }
 
@@ -174,8 +174,8 @@ input:-webkit-autofill {
 
 #toast-container > div {
     opacity: 1;
-    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
-    filter: alpha(opacity=100);
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+    filter: "alpha(opacity=100)";
 }
 
 .captcha {

resources/assets/src/stylus/index.styl

@@ -1,4 +1,4 @@
-@import "general.scss";
+@import "general.styl";
 
 body {
     font-size: 16px;

resources/assets/src/stylus/install.styl

@@ -1,4 +1,4 @@
-@import "general.scss";
+@import "general.styl";
 
 html {
     background: #f1f1f1;

resources/assets/src/stylus/skinlib.styl

@@ -1,4 +1,4 @@
-@import "general.scss";
+@import "general.styl";
 
 .navbar-nav {
     .user-menu .user-image {

resources/assets/src/stylus/user.styl

@@ -1,4 +1,4 @@
-@import "general.scss";
+@import "general.styl";
 
 .player {
     cursor: pointer;