diff --git a/static/src/less/style.less b/static/src/scss/style.scss
similarity index 80%
rename from static/src/less/style.less
rename to static/src/scss/style.scss
index 48b03f15b1587305b5a91c2e36187de2aafe2d57..0d4dbb533588bc9da1a8052ceee6d9f181170ade 100644
--- a/static/src/less/style.less
+++ b/static/src/scss/style.scss
@@ -1,31 +1,31 @@
 /***************************
 /** Fonts
 ***************************/
-@font-face {
+$font-face {
   font-family: 'Lato';
   src: url(../fonts/Lato/Lato-Regular.ttf);
   font-weight: normal;
   font-style: normal;
 }
-@font-face {
+$font-face {
   font-family: 'Lato';
   src: url(../fonts/Lato/Lato-Light.ttf);
   font-weight: 300;
   font-style: normal;
 }
-@font-face {
+$font-face {
   font-family: 'Lato';
   src: url(../fonts/Lato/Lato-Bold.ttf);
   font-weight: bold;
   font-style: normal;
 }
-@font-face {
+$font-face {
   font-family: 'Lekton';
   src: url(../fonts/Lekton/Lekton-Regular.ttf);
   font-weight: normal;
   font-style: normal;
 }
-@font-face {
+$font-face {
   font-family: 'Lekton';
   src: url(../fonts/Lekton/Lekton-Bold.ttf);
   font-weight: bold;
@@ -35,11 +35,11 @@
 /***************************
 /** Variables
 ***************************/
-@typo_body: 'Lato',sans-serif;
-@typo_1: 'Lekton', sans-serif;
+$typo_body: 'Lato',sans-serif;
+$typo_1: 'Lekton', sans-serif;
 
-@color1: #1C2F82;
-@color2: rgb(0, 180, 149);
+$color1: #1C2F82;
+$color2: rgb(0, 180, 149);
 
 
 /***************************
@@ -55,15 +55,15 @@ body, table, td, span, div {
 }
 
 .attendance, .attendance td, .convention, .convention td {
-	font-family: @typo_body;
+	font-family: $typo_body;
 	font-weight: 300;
 }
 
 .training-footer {
 	border-top: 1px solid #eee;
 	padding-top: 10px;
-	font-size: 11px; 
-	font-family: @typo_1;
+	font-size: 11px;
+	font-family: $typo_1;
 	text-align: center;
 	color: #333;
 }
@@ -72,32 +72,32 @@ body, table, td, span, div {
 /** Attendance
 ***************************/
 .attendance h1 {
-	color: @color2;
+	color: $color2;
 	font-size: 26px;
-	font-family: @typo_1;
+	font-family: $typo_1;
 	text-transform: uppercase;
 }
 .attendance h2 {
-	color: @color1;
+	color: $color1;
 	font-size: 22px;
-	font-family: @typo_1;
+	font-family: $typo_1;
 }
 
 /***************************
 /** Convention
 ***************************/
 .convention h1 {
-	background-color: @color2;
+	background-color: $color2;
 	color: #fff;
 	padding: 5px 0;
 	font-size: 26px;
-	font-family: @typo_1;
+	font-family: $typo_1;
 	text-transform: uppercase;
 }
 .convention h2 {
-	color: @color1;
+	color: $color1;
 	font-size: 22px;
-	font-family: @typo_1;
+	font-family: $typo_1;
 	text-transform: uppercase;
 }
 .convention h3 {
diff --git a/views/assets.xml b/views/assets.xml
index 65aa2159c4992fb67887f9313283459f2758fcbd..dc6aa9e07b74ecacc557f037ccd960cdaf942809 100644
--- a/views/assets.xml
+++ b/views/assets.xml
@@ -5,19 +5,19 @@
 
 		<template id="training_assets" inherit_id="web.report_assets_common">
 			<xpath expr="." position="inside">
-				<link rel="stylesheet" href="/lefilament_training/static/src/less/style.less"/>
+				<link rel="stylesheet" href="/lefilament_training/static/src/scss/style.scss"/>
 			</xpath>
 		</template>
 
 		<template id="training_assets_common" name="training_assets" inherit_id="web.report_assets_pdf">
 			<xpath expr="." position="inside">
-				<link rel="stylesheet" href="/lefilament_training/static/src/less/style.less"/>
+				<link rel="stylesheet" href="/lefilament_training/static/src/scss/style.scss"/>
 			</xpath>
 		</template>
 
 		<template id="report_assets_common_custom_fonts" name="Custom QWeb fonts" inherit_id="web.report_assets_common">
 			<xpath expr="." position="inside">
-				<link rel="stylesheet" href="/lefilament_training/static/src/less/style.less"/>
+				<link rel="stylesheet" href="/lefilament_training/static/src/scss/style.scss"/>
 			</xpath>
 		</template>