diff --git a/README.md b/README.md
index 8a40573..2c47ba0 100644
--- a/README.md
+++ b/README.md
@@ -3,4 +3,17 @@ WiredAnchor is a web project.
 It creates a stylesheet for links in texts so that they are more conspicuous and better perceived by users.
 As a result of this, links can be better marked and the user does not have to search for them in a time-consuming way.
 
-If you If you want to participate in this project, create a fork first. After pushing the changes to your local repository, you can then create a pull request.
\ No newline at end of file
+If you If you want to participate in this project, create a fork first. After pushing the changes to your local repository, you can then create a pull request.
+
+## Using Grunt and SCSS
+`cd` into your project directory and run `npm install` to install Grunt and other dependencies.
+
+Now run `grunt watch` to have Grunt watch your SCSS file for changes to compile into the CSS file.
+
+Never edit the CSS file directly; always work from the SCSS file as any changes made in the SCSS file will override changes in the CSS file once Grunt is run.
+
+## Dependencies
+
+Ensure that your system has <a href="https://www.ruby-lang.org/en/documentation/installation/">Ruby</a> installed, as well as <a href="https://nodejs.org/en/">NodeJS</a>.
+
+To install Grunt on your system, open up your command line and run `npm install -g grunt-cli` to install Grunt globally on your machine.
\ No newline at end of file
diff --git a/gruntfile.js b/gruntfile.js
new file mode 100644
index 0000000..e6b047f
--- /dev/null
+++ b/gruntfile.js
@@ -0,0 +1,21 @@
+module.exports = function(grunt) {
+	grunt.initConfig({
+		pkg: grunt.file.readJSON('package.json'),
+		sass: {
+			dist: {
+				files: {
+					'wiredanchor.css' : 'scss/wiredanchor.scss'
+				}
+			}
+		},
+		watch: {
+			css: {
+				files: '**/*.scss',
+				tasks: ['sass']
+			}
+		}
+	});
+	grunt.loadNpmTasks('grunt-contrib-sass');
+	grunt.loadNpmTasks('grunt-contrib-watch');
+	grunt.registerTask('default',['watch']);
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 2318706..a135aeb 100644
--- a/package.json
+++ b/package.json
@@ -20,5 +20,10 @@
   "bugs": {
     "url": "https://github.com/sorocabacss/wiredanchor/issues"
   },
-  "homepage": "https://github.com/sorocabacss/wiredanchor#readme"
+  "homepage": "https://github.com/sorocabacss/wiredanchor#readme",
+  "devDependencies": {
+    "grunt": "^1.0.1",
+    "grunt-contrib-sass": "^1.0.0",
+    "grunt-contrib-watch": "^1.0.0"
+  }
 }
diff --git a/scss/wiredanchor.scss b/scss/wiredanchor.scss
new file mode 100644
index 0000000..f1cded4
--- /dev/null
+++ b/scss/wiredanchor.scss
@@ -0,0 +1,47 @@
+// SCSS for the main CSS file “wiredanchor.css
+
+// Vars.
+$color-primary: #ff6f6f;
+$color-charcoal: #333;
+
+// Main Styles.
+.wiredanchor {
+    text-decoration: none;
+    color: $color-charcoal;
+    position: relative;
+
+  &:hover,
+  &:focus,
+  &:visited,
+  &:active {
+    text-decoration: none;
+    color: $color-primary;
+  }
+
+  &:hover::before {
+    opacity: 0.3;
+  }
+
+  &:before {
+    content:'';
+    opacity: 0;
+    transition: opacity 0.1s linear;
+    background-color: $color-primary;
+    width: 100%;
+    height: 82%;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+
+  &:after {
+    content:'';
+    background-color: $color-primary;
+    opacity: 0.3;
+    width: 100%;
+    height: 30%;
+    position: absolute;
+    left: 0;
+    bottom: -10%;
+  }
+} // .wiredanchor
diff --git a/wiredanchor.css b/wiredanchor.css
index 8f4def9..04f2de8 100644
--- a/wiredanchor.css
+++ b/wiredanchor.css
@@ -1,40 +1,30 @@
 .wiredanchor {
   text-decoration: none;
   color: #333;
-  position: relative;
-}
+  position: relative; }
+  .wiredanchor:hover, .wiredanchor:focus, .wiredanchor:visited, .wiredanchor:active {
+    text-decoration: none;
+    color: #ff6f6f; }
+  .wiredanchor:hover::before {
+    opacity: 0.3; }
+  .wiredanchor:before {
+    content: '';
+    opacity: 0;
+    transition: opacity 0.1s linear;
+    background-color: #ff6f6f;
+    width: 100%;
+    height: 82%;
+    position: absolute;
+    left: 0;
+    top: 0; }
+  .wiredanchor:after {
+    content: '';
+    background-color: #ff6f6f;
+    opacity: 0.3;
+    width: 100%;
+    height: 30%;
+    position: absolute;
+    left: 0;
+    bottom: -10%; }
 
-.wiredanchor:hover,
-.wiredanchor:focus,
-.wiredanchor:visited,
-.wiredanchor:active {
-  text-decoration: none;
-  color: #ff6f6f;
-}
-
-.wiredanchor:hover::before {
-  opacity: 0.3;
-}
-
-.wiredanchor:before {
-  content:'';
-  opacity: 0;
-  transition: opacity 0.1s linear;
-  background-color: #ff6f6f;
-  width: 100%;
-  height: 82%;
-  position: absolute;
-  left: 0;
-  top: 0;
-}
-
-.wiredanchor:after {
-  content:'';
-  background-color: #ff6f6f;
-  opacity: 0.3;
-  width: 100%;
-  height: 30%;
-  position: absolute;
-  left: 0;
-  bottom: -10%;
-}
+/*# sourceMappingURL=wiredanchor.css.map */