Convert CSS to SCSS

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.
+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.

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']);
+}

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"
+  }
 }

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