back to sass

gulpfile.js

@@ -1,29 +1,33 @@
 const gulp = require('gulp');
-const gulpLess = require('gulp-less');
+const gulpSass = require('gulp-sass');
 const del = require('del');
 const fs = require('fs');
 
+gulpSass.compiler = require('node-sass');
+
 const paths = {
     css: './src/App/Css',
 };
 
-const lessFiles = [
+const sassFiles = [
-    './src/App/Less/android.less',
+    './src/App/Sass/android.scss',
-    './src/App/Less/ios.less',
+    './src/App/Sass/ios.scss',
-    './src/App/Less/dark.less',
+    './src/App/Sass/dark.scss',
-    './src/App/Less/styles.less',
+    './src/App/Sass/styles.scss',
 ];
 
-function less() {
+function sass() {
-    return gulp.src(lessFiles).pipe(gulpLess()).pipe(gulp.dest(paths.css));
+    return gulp.src(sassFiles)
+        .pipe(gulpSass().on('error', gulpSass.logError))
+        .pipe(gulp.dest(paths.css));
 }
 
-function fixLess(cb) {
+function fixSass(cb) {
     fs.readdir(paths.css, (err, cssFiles) => {
         cssFiles.forEach((cssFile) => {
             const file = paths.css + '/' + cssFile;
             let fileContents = fs.readFileSync(file, 'utf8');
-            fileContents = fileContents.replace(/ \^ /g, '^');
+            fileContents = fileContents.replace(/__/g, '^');
             fs.writeFileSync(file, fileContents, 'utf8');
         });
         cb();
@@ -34,6 +38,4 @@ function cleanCss() {
     return del(paths.css);
 }
 
-exports.cleanCss = cleanCss;
+exports.sass = gulp.series(cleanCss, sass, fixSass);
-exports.fixLess = fixLess;
-exports.less = gulp.series(cleanCss, less, fixLess);

package.json

@@ -2,11 +2,12 @@
   "name": "bitwarden-mobile",
   "version": "1.0.0",
   "scripts": {
-    "less": "gulp less"
+    "sass": "gulp sass"
   },
   "devDependencies": {
     "del": "4.1.0",
     "gulp": "4.0.0",
-    "gulp-less": "4.0.1"
+    "gulp-sass": "4.0.2",
+    "node-sass": "4.11.0"
   }
 }

src/App/Less/android.less

@@ -1,3 +0,0 @@
-^Label, ^Entry, ^Editor {
-    font-size: 16;
-}

src/App/Less/ios.less

@@ -1,3 +0,0 @@
-^Label, ^Entry, ^Editor {
-    font-size: 14;
-}

src/App/Less/variables.less

@@ -1 +0,0 @@
-@white: #FFFFFF;

src/App/Sass/android.scss

@@ -0,0 +1,3 @@
+__Label, __Entry, __Editor {
+    font-size: 16;
+}

src/App/Sass/dark.scss

@@ -1,3 +1,3 @@
-^contentpage {
+__contentpage {
     background-color: gray;
 }

src/App/Sass/ios.scss

@@ -0,0 +1,3 @@
+__Label, __Entry, __Editor {
+    font-size: 14;
+}

src/App/Sass/styles.scss

@@ -1,7 +1,7 @@
-@import "variables.less";
+@import "variables.scss";
 
-^ContentPage {
+__ContentPage {
-    background-color: @white;
+    background-color: $white;
 }
 
 StackLayout.list-cell {

src/App/Sass/variables.scss

@@ -0,0 +1 @@
+$white: #FFFFFF;