Use crafty to build css, convert less to scss

crafty.config.js

@@ -0,0 +1,30 @@
+
+module.exports = {
+    presets: [
+      "@swissquote/crafty-preset-postcss",
+      "@swissquote/crafty-runner-gulp"
+    ],
+    destination_css: "themes",
+    css: {
+      "theme_blue": {
+        source: "themes/daux/scss/theme-blue.scss",
+        destination: "daux/css/theme-blue.min.css"
+      },
+      "theme_green": {
+        source: "themes/daux/scss/theme-green.scss",
+        destination: "daux/css/theme-green.min.css"
+      },
+      "theme_navy": {
+        source: "themes/daux/scss/theme-navy.scss",
+        destination: "daux/css/theme-navy.min.css"
+      },
+      "theme_red": {
+        source: "themes/daux/scss/theme-red.scss",
+        destination: "daux/css/theme-red.min.css"
+      },
+      "daux_singlepage": {
+        source: "themes/daux_singlepage/scss/main.scss",
+        destination: "daux_singlepage/css/main.min.css"
+      }
+    }
+  };

gulpfile.js

@@ -1,86 +0,0 @@
-var cssnano = require('cssnano'),
-    gulp = require('gulp'),
-    less = require('gulp-less'),
-    rename = require('gulp-rename'),
-    plumber = require('gulp-plumber'),
-    postcss = require('gulp-postcss'),
-    stylelint = require('gulp-stylelint');
-
-var resources = {
-    daux_blue:{source: "themes/daux/less/theme-blue.less", dest: "themes/daux/css/"},
-    daux_green:{source: "themes/daux/less/theme-green.less", dest: "themes/daux/css/"},
-    daux_navy:{source: "themes/daux/less/theme-navy.less", dest: "themes/daux/css/"},
-    daux_red:{source: "themes/daux/less/theme-red.less", dest: "themes/daux/css/"},
-
-    daux_singlepage:{source: "themes/daux_singlepage/less/main.less", dest: "themes/daux_singlepage/css/"}
-};
-
-var stylelintRules = {
-    "indentation": 4,
-    "selector-list-comma-newline-after": "always-multi-line",
-    "selector-max-id": 0,
-
-    // Autoprefixer
-    "at-rule-no-vendor-prefix": true,
-    "media-feature-name-no-vendor-prefix": true,
-    "property-no-vendor-prefix": true,
-    "selector-no-vendor-prefix": true,
-    "value-no-vendor-prefix": true
-};
-
-var cssnanoOptions = {
-    safe: true,           // Disable dangerous optimisations
-    filterPlugins: false, // This does very weird stuff
-    autoprefixer: {
-        add: true,        // Add needed prefixes
-        remove: true      // Remove unnecessary prefixes
-    }
-};
-
-function createCSSTask(source, dest) {
-    return function () {
-        return gulp.src(source)
-            .pipe(plumber())
-            .pipe(less())
-            .pipe(postcss([cssnano(cssnanoOptions)]))
-            .pipe(rename({suffix: '.min'}))
-            .pipe(gulp.dest(dest));
-    }
-}
-
-gulp.task('lint-css', function () {
-    return gulp
-        .src(['themes/**/less/**/*.less', '!themes/**/vendor/**/*.less'])
-        .pipe(stylelint({
-            failAfterError: true,
-            config: {
-                extends: 'stylelint-config-standard',
-                rules: stylelintRules
-            },
-            syntax: 'less',
-            reporters: [{
-                formatter: 'string',
-                console: true
-            }],
-            debug: true
-        }));
-});
-
-var style_tasks = [];
-for (var style in resources) {
-    if (resources.hasOwnProperty(style)) {
-        gulp.task('style_' + style, createCSSTask(resources[style].source, resources[style].dest));
-        style_tasks.push('style_' + style);
-    }
-}
-
-style_tasks.push('lint-css');
-
-gulp.task("styles", style_tasks);
-
-gulp.task('watch', ['default'], function () {
-    // Watch .less files
-    gulp.watch('themes/**/less/**/*.less', ['styles']);
-});
-
-gulp.task('default', ['styles']);

package.json

@@ -3,17 +3,12 @@
   "version": "0.3.0",
   "private": true,
   "devDependencies": {
-    "cssnano": "^3.7.3",
-    "gulp": "^3.9.1",
-    "gulp-less": "^3.1.0",
-    "gulp-plumber": "^1.1.0",
-    "gulp-postcss": "^7.0.0",
-    "gulp-rename": "^1.2.2",
-    "gulp-stylelint": "^5.0.0",
-    "stylelint-config-standard": "^17.0.0"
+    "@swissquote/crafty": "^1.0.1",
+    "@swissquote/crafty-preset-postcss": "^1.0.1",
+    "@swissquote/crafty-runner-gulp": "^1.0.1"
   },
   "scripts": {
-    "build": "gulp",
-    "watch": "gulp watch"
+    "build": "crafty run",
+    "watch": "crafty watch"
   }
 }

templates/layout/00_layout.php

@@ -3,15 +3,15 @@
 <head>
     <title><?= $page['title']; ?> <?= ($page['title'] != $params['title'])? '- ' . $params['title'] : "" ?></title>
 <?php //SEO meta tags...
-    if (array_key_exists('description', $page['attributes'])) {
+    if (array_key_exists('attributes', $page) && array_key_exists('description', $page['attributes'])) {
         echo "    <meta name=\"description\" content=\"{$page['attributes']['description']}\">\n";
     } elseif (array_key_exists('tagline', $params)) {
         echo "    <meta name=\"description\" content=\"{$params['tagline']}\">\n";
     }
-    if (array_key_exists('keywords', $page['attributes'])) {
+    if (array_key_exists('attributes', $page) && array_key_exists('keywords', $page['attributes'])) {
         echo "    <meta name=\"keywords\" content=\"{$page['attributes']['keywords']}\">\n";
     }
-    if (array_key_exists('author', $page['attributes'])) {
+    if (array_key_exists('attributes', $page) && array_key_exists('author', $page['attributes'])) {
         echo "    <meta name=\"author\" content=\"{$page['attributes']['author']}\">\n";
     } elseif (array_key_exists('author', $params)) {
         echo "    <meta name=\"author\" content=\"{$params['author']}\">\n";

themes/common/scss/_fonts.scss

@@ -1,7 +1,10 @@
 
-@font-family-text:      "Helvetica Neue", Helvetica, Arial, sans-serif;
-@font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
-@font-family-heading:   "Roboto Slab", @font-family-text;
+:root {
+    --font-family-text:      "Helvetica Neue", Helvetica, Arial, sans-serif;
+    --font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
+    --font-family-heading:   "Roboto Slab", var(--font-family-text);
+}
+
 
 /*! Generated by Font Squirrel (https://www.fontsquirrel.com) on September 13, 2017 */
 

themes/common/scss/_typography.scss

@@ -157,7 +157,7 @@ img {
 }
 
 code {
-    font-family: @font-family-monospace;
+    font-family: var(--font-family-monospace);
 }
 
 code, tt {

themes/daux/less/theme-blue.less

@@ -1,11 +0,0 @@
-
-//Daux.io Blue
-@sidebar-background: #f7f7f7;
-@sidebar-hover: #c5c5cb;
-@lines: #e7e7e9;
-@dark: #3f4657;
-@light: #82becd;
-@text: #2d2d2d;
-
-// Daux.io Base
-@import "theme.less";

themes/daux/less/theme-green.less

@@ -1,11 +0,0 @@
-
-//Daux.io Green
-@sidebar-background: #f5f5f6;
-@sidebar-hover: #a0d55d;
-@lines: #e7e7e9;
-@dark: #000;
-@light: #8acc37;
-@text: #2d2d2d;
-
-// Daux.io Base
-@import "theme.less";

themes/daux/less/theme-navy.less

@@ -1,11 +0,0 @@
-
-//Daux.io Navy
-@sidebar-hover: #c5c5cb;
-@lines: #e7e7e9;
-@sidebar-background: #f5f5f6;
-@dark: #13132a;
-@light: #7795b4;
-@text: #2d2d2d;
-
-// Daux.io Base
-@import "theme.less";

themes/daux/less/theme-red.less

@@ -1,11 +0,0 @@
-
-// Daux.io Red
-@sidebar-hover: #eee;
-@lines: #eee;
-@sidebar-background: #f7f7f7;
-@dark: #c64641; //#df4f49;
-@light: #ecb5a1;
-@text: #2d2d2d;
-
-// Daux.io Base
-@import "theme.less";

themes/daux/less/theme.less

@@ -1,24 +0,0 @@
-/*!
- * DAUX.IO
- * https://dauxio.github.io/
- * MIT License
- */
-
-// Daux Style
-@import "../../common/less/vendor/normalize.less";
-@import "../../common/less/_fonts.less";
-@import "_mixins.less";
-@import "_utilities.less";
-
-// Layout
-@import "_structure.less";
-
-// Content presentation
-@import "_typography.less";
-@import "_components.less";
-@import "_homepage.less";
-@import "../../common/less/vendor/highlight.less";
-
-@media print {
-    @import "_print.less";
-}

themes/daux/scss/_components.scss

@@ -4,7 +4,7 @@ Base tags
 
 a {
     text-decoration: none;
-    color: @light;
+    color: var(--light);
 
     &.external::after {
         content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=);
@@ -27,7 +27,7 @@ hr {
 }
 
 code {
-    color: @dark;
+    color: var(--dark);
 }
 
 /* ===========================================================================================
@@ -97,32 +97,32 @@ Components
             margin-left: 0;
 
             &:not(:last-child):not(.dropdown-toggle) {
-                .border-right-radius(0);
+                @include border-right-radius(0);
             }
         }
 
         // Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
         &:last-child:not(:first-child) {
-            .border-left-radius(0);
+            @include border-left-radius(0);
         }
     }
 }
 
 .Brand {
     display: block;
-    background-color: @dark;
+    background-color: var(--dark);
     padding: 15px 20px;
     font-size: 18px;
     text-shadow: none;
-    font-family: @font-family-heading;
+    font-family: var(--font-family-heading);
     font-weight: 700;
-    color: @light;
+    color: var(--light);
 }
 
 .Navbar {
     height: 50px;
     box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
-    background-color: @dark;
+    background-color: var(--dark);
     margin-bottom: 0;
 
     .Brand {
@@ -162,8 +162,8 @@ Components
             top: 50%;
             width: 0.5em;
             height: 0.5em;
-            border-right: 0.15em solid @dark;
-            border-top: 0.15em solid @dark;
+            border-right: 0.15em solid var(--dark);
+            border-top: 0.15em solid var(--dark);
             transform: rotate(45deg);
             transition-duration: 0.3s;
         }
@@ -176,17 +176,17 @@ Components
             display: block;
             margin: 0;
             padding: 6px 15px 6px 20px;
-            font-family: @font-family-heading;
+            font-family: var(--font-family-heading);
             font-weight: 400;
-            color: @dark;
+            color: var(--dark);
             font-size: 15px;
             text-shadow: none;
-            border-color: @lines;
+            border-color: var(--lines);
 
             &:hover {
-                color: @dark;
+                color: var(--dark);
                 text-shadow: none;
-                background-color: @sidebar-hover;
+                background-color: var(--sidebar-hover);
             }
         }
     }
@@ -200,8 +200,8 @@ Components
                 margin: 0;
                 margin-left: -15px;
                 padding: 3px 30px;
-                font-family: @font-family-text;
-                color: @text;
+                font-family: var(--font-family-text);
+                color: var(--text);
                 opacity: 0.7;
 
                 &:hover {
@@ -210,7 +210,7 @@ Components
             }
 
             &--active a {
-                color: @dark;
+                color: var(--dark);
             }
         }
     }
@@ -219,7 +219,7 @@ Components
         &--open,
         &--active {
             > a {
-                background-color: @sidebar-hover;
+                background-color: var(--sidebar-hover);
             }
         }
 
@@ -241,7 +241,7 @@ Components
     padding: 0;
     border-bottom: 1px solid #eee;
 
-    .clearfix();
+    @include clearfix();
 
     h1 {
         margin: 0;
@@ -274,9 +274,9 @@ Components
     padding: 0 20px;
 
     a {
-        font-family: @font-family-heading;
+        font-family: var(--font-family-heading);
         font-weight: 400;
-        color: @light;
+        color:var(--light);
         line-height: 2em;
     }
 }
@@ -296,7 +296,7 @@ Components
         transition: border-color ease-in-out 0.15s;
 
         &:focus {
-            border-color: @light;
+            border-color: var(--light);
             outline: 0;
         }
     }
@@ -395,7 +395,7 @@ ul.TableOfContents {
     text-align: center;
     clear: both;
 
-    .clearfix();
+    @include clearfix();
 
     li {
         display: inline;
@@ -460,7 +460,7 @@ ul.TableOfContents {
 
     /* Checked state */
     .Checkbox input:checked ~ & {
-        background: @dark;
+        background: var(--dark);
 
         /* Show check mark */
         &::after {
@@ -470,7 +470,7 @@ ul.TableOfContents {
 
     /* Hover state whilst checked */
     .Checkbox:hover input:not([disabled]):checked ~ &, .Checkbox input:checked:focus ~ & {
-        background: @light;
+        background: var(--light);
     }
 
     /* Disabled state */

themes/daux/scss/_homepage.scss

@@ -38,15 +38,15 @@ Homepage
 
 .Homepage {
     padding-top: 60px !important;
-    background-color: @light;
+    background-color: var(--light);
     border-radius: 0;
     border: none;
-    color: @dark;
+    color: var(--dark);
     overflow: hidden;
     padding-bottom: 0;
     margin-bottom: 0;
 
-    .kill-box-shadow;
+    @include kill-box-shadow;
 }
 
 .HomepageTitle {
@@ -69,7 +69,7 @@ Homepage
 
 .HomepageButtons {
     padding: 20px 0;
-    background-color: @sidebar-hover;
+    background-color: var(--sidebar-hover);
     text-align: center;
 
     .Button--hero {
@@ -79,12 +79,12 @@ Homepage
         opacity: 0.8;
         margin: 0 10px;
         text-transform: uppercase;
-        border: 5px solid @dark;
-        font-family: @font-family-heading;
+        border: 5px solid var(--dark);
+        font-family: var(--font-family-heading);
         font-weight: 700;
 
-        .kill-background-image;
-        .kill-box-shadow;
+        @include kill-background-image;
+        @include kill-box-shadow;
 
         @media (max-width: 768px) {
             display: block;
@@ -96,13 +96,13 @@ Homepage
         }
 
         &.Button--secondary {
-            background-color: @sidebar-hover;
-            color: @dark;
+            background-color: var(--sidebar-hover);
+            color: var(--dark);
         }
 
         &.Button--primary {
-            background-color: @dark;
-            color: @sidebar-background;
+            background-color: var(--dark);
+            color: var(--sidebar-background);
         }
     }
 }
@@ -136,7 +136,7 @@ Homepage
                 width: 0;
                 height: 0;
                 border: 3px solid transparent;
-                border-left: 3px solid @light;
+                border-left: 3px solid var(--light);
                 float: left;
                 display: block;
                 margin: 6px 6px 6px -12px;
@@ -145,7 +145,7 @@ Homepage
     }
 
     .lead {
-        font-family: @font-family-heading;
+        font-family: var(--font-family-heading);
         font-weight: 300;
         font-size: 16px;
         margin-bottom: 20px;
@@ -162,12 +162,12 @@ Homepage
 }
 
 .HomepageFooter {
-    background-color: @dark;
+    background-color: var(--dark);
     border-radius: 0;
-    color: @light;
+    color: var(--light);
     border: none;
 
-    .kill-box-shadow;
+    @include kill-box-shadow;
 
     @media (max-width: 768px) {
         padding: 0 20px;
@@ -196,11 +196,11 @@ Homepage
             a {
                 line-height: 32px;
                 font-size: 16px;
-                font-family: @font-family-heading;
+                font-family: var(--font-family-heading);
                 font-weight: 700;
 
                 &:hover {
-                    color: @light;
+                    color: var(--light);
                     text-decoration: underline;
                 }
             }

themes/daux/scss/_mixins.scss

@@ -2,39 +2,42 @@
 Mixins
 ============================================================================================== */
 
-.kill-background-image() {
+@mixin kill-background-image {
     background-image: none;
     filter: none;
 }
 
-.kill-box-shadow() {
+@mixin kill-box-shadow {
     box-shadow: none;
 }
 
-.sans-serif(@weight: normal, @size: 14px, @lineheight: 20px) {
-    font-weight: @weight;
-    font-size: @size;
-    font-family: @font-family-text;
-    line-height: @lineheight;
+@mixin sans-serif($weight: normal, $size: 14px, $lineheight: 20px) {
+    font-weight: $weight;
+    font-size: $size;
+    font-family: $font-family-text;
+    line-height: $lineheight;
 }
 
 // Single side border-radius
 
-.border-top-radius(@radius) {
-    border-top-right-radius: @radius;
-    border-top-left-radius: @radius;
+@mixin border-top-radius($radius) {
+    border-top-right-radius: $radius;
+    border-top-left-radius: $radius;
 }
-.border-right-radius(@radius) {
-    border-bottom-right-radius: @radius;
-    border-top-right-radius: @radius;
+
+@mixin border-right-radius($radius) {
+    border-bottom-right-radius: $radius;
+    border-top-right-radius: $radius;
 }
-.border-bottom-radius(@radius) {
-    border-bottom-right-radius: @radius;
-    border-bottom-left-radius: @radius;
+
+@mixin border-bottom-radius($radius) {
+    border-bottom-right-radius: $radius;
+    border-bottom-left-radius: $radius;
 }
-.border-left-radius(@radius) {
-    border-bottom-left-radius: @radius;
-    border-top-left-radius: @radius;
+
+@mixin border-left-radius($radius) {
+    border-bottom-left-radius: $radius;
+    border-top-left-radius: $radius;
 }
 
 // Clearfix
@@ -49,7 +52,7 @@ Mixins
 //
 // Source: http://nicolasgallagher.com/micro-clearfix-hack/
 
-.clearfix() {
+@mixin clearfix {
     &::before,
     &::after {
         content: " "; // 1

themes/daux/scss/_print.scss

@@ -1,4 +1,4 @@
-@import "../../common/less/_print.less";
+@import "../../common/scss/_print.scss";
 
 .Pager { display: none; }
 

themes/daux/scss/_structure.scss

@@ -15,12 +15,12 @@ Docs Body & Page Structure
 html, body {
     height: 100%;
     background-color: #fff;
-    color: @text;
+    color: var(--text);
 }
 
 .Columns {
     &__left {
-        background-color: @sidebar-background;
+        background-color: var(--sidebar-background);
     }
 
     &__right {
@@ -44,8 +44,8 @@ html, body {
         border: none;
         float: right;
 
-        .kill-background-image;
-        .kill-box-shadow;
+        @include kill-background-image;
+        @include kill-box-shadow;
 
         &--bar {
             display: block;
@@ -53,17 +53,17 @@ html, body {
             height: 2px;
             margin-top: 2px;
             margin-bottom: 3px;
-            background-color: @light;
-            .kill-box-shadow;
+            background-color: var(--light);
+            @include kill-box-shadow;
         }
 
         &:hover {
-            background-color: @sidebar-hover;
-            .kill-box-shadow;
+            background-color: var(--sidebar-hover);
+            @include kill-box-shadow;
 
             .Collapsible__trigger--bar {
-                background-color: @dark;
-                .kill-box-shadow;
+                background-color: var(--dark);
+                @include kill-box-shadow;
             }
         }
     }
@@ -72,7 +72,7 @@ html, body {
 @media screen and (min-width: 768px) {
     body {
         //Needed only for floating code blocks
-        background-color: @light;
+        background-color: var(--light);
     }
 
     .Navbar {
@@ -114,7 +114,7 @@ html, body {
 
         &__left {
             width: 25%;
-            border-right: 1px solid @lines;
+            border-right: 1px solid var(--lines);
             overflow-x: hidden;
         }
 

themes/daux/scss/_typography.scss

@@ -3,7 +3,7 @@ Base CSS
 ============================================================================================== */
 
 body {
-    font-family: @font-family-text;
+    font-family: var(--font-family-text);
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -12,12 +12,12 @@ body {
 }
 
 h1, h2, h3, h4, h5, h6 {
-    font-family: @font-family-heading;
+    font-family: var(--font-family-heading);
     font-weight: 300;
 }
 
 .s-content {
-    @import "../../common/less/_typography.less";
+    @import "../../common/scss/_typography.scss";
 
     pre {
         border: none;

themes/daux/scss/_utilities.scss

@@ -6,7 +6,7 @@
 // -------------------------
 
 .clearfix {
-    .clearfix();
+    @include clearfix();
 }
 
 .pull-right {

themes/daux/scss/theme-blue.scss

@@ -0,0 +1,11 @@
+@import "theme.scss";
+
+//Daux.io Blue
+:root {
+    --sidebar-background: #f7f7f7;
+    --sidebar-hover: #c5c5cb;
+    --lines: #e7e7e9;
+    --dark: #3f4657;
+    --light: #82becd;
+    --text: #2d2d2d;
+}

themes/daux/scss/theme-green.scss

@@ -0,0 +1,11 @@
+@import "theme.scss";
+
+//Daux.io Green
+:root {
+    --sidebar-background: #f5f5f6;
+    --sidebar-hover: #a0d55d;
+    --lines: #e7e7e9;
+    --dark: #000;
+    --light: #8acc37;
+    --text: #2d2d2d;
+}

themes/daux/scss/theme-navy.scss

@@ -0,0 +1,11 @@
+@import "theme.scss";
+
+//Daux.io Navy
+:root {
+    --sidebar-hover: #c5c5cb;
+    --lines: #e7e7e9;
+    --sidebar-background: #f5f5f6;
+    --dark: #13132a;
+    --light: #7795b4;
+    --text: #2d2d2d;
+}

themes/daux/scss/theme-red.scss

@@ -0,0 +1,11 @@
+@import "theme.scss";
+
+// Daux.io Red
+:root {
+    --sidebar-hover: #eee;
+    --lines: #eee;
+    --sidebar-background: #f7f7f7;
+    --dark: #c64641; //#df4f49;
+    --light: #ecb5a1;
+    --text: #2d2d2d;
+}

themes/daux/scss/theme.scss

@@ -0,0 +1,24 @@
+/*!
+ * DAUX.IO
+ * https://dauxio.github.io/
+ * MIT License
+ */
+
+// Daux Style
+@import "../../common/scss/vendor/normalize.scss";
+@import "../../common/scss/_fonts.scss";
+@import "_mixins.scss";
+@import "_utilities.scss";
+
+// Layout
+@import "_structure.scss";
+
+// Content presentation
+@import "_typography.scss";
+@import "_components.scss";
+@import "_homepage.scss";
+@import "../../common/scss/vendor/highlight.scss";
+
+@media print {
+    @import "_print.scss";
+}

themes/daux_singlepage/scss/_print.scss

@@ -1,5 +1,5 @@
 
-@import "../../common/less/_print.less";
+@import "../../common/scss/_print.scss";
 
 a[href]::after {
     content: " (" attr(href) ")";

themes/daux_singlepage/scss/_typography.scss

@@ -1,6 +1,6 @@
 
 h1, h2, h3, h4, h5, h6 {
-    font-family: @font-family-heading;
+    font-family: var(--font-family-heading);
     font-weight: 300;
 }
 
@@ -8,5 +8,5 @@ section.content {
     padding: 15px 25px 25px;
     background-color: white;
 
-    @import "../../common/less/_typography.less";
+    @import "../../common/scss/_typography.scss";
 }

themes/daux_singlepage/scss/main.scss

@@ -1,7 +1,7 @@
 // Core variables and mixins
-@import "../../common/less/_fonts.less";
-@import "vendor/highlight.less";
-@import "_typography.less";
+@import "../../common/scss/_fonts.scss";
+@import "vendor/highlight.scss";
+@import "_typography.scss";
 
 * {
     -webkit-overflow-scrolling: touch;
@@ -17,7 +17,7 @@ body {
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    font-family: @font-family-text;
+    font-family: var(--font-family-text);
 }
 
 a {
@@ -54,5 +54,5 @@ img {
 }
 
 @media print {
-    @import "_print.less";
+    @import "_print.scss";
 }