[WEEK #3] – 04 Introduction to NPM and Sass + Problem Sets + Blog Question


Howdy guys. This weeks work was not that bad. The only part I struggled in was when Jonas was using the terminal. I have a windows OS and it was hard following along to the video tutorials. I had to stop the videos and look up the different CMD inputs that he was using. I also had some issues compiling to sass. I eventually somehow figured it out and got progress. I really liked using the VS Code terminal. Most of the stuff was not that confusing, except for Mixins and extends (I need to re-watch those parts).

Tutorials


Problem Set – BEM/SCSS Problem Set

This problem set was pretty much straight forward. I really enjoyed using SCSS. It is much easier than using the typical CSS syntax. My favorite additions are the variables such as $color-primary, and nested CSS. It makes my life so much easier instead of writing all the class names and getting confused. I did not want to try using @each loops and YIQ functions because I am not that ready for that stuff and I did not want to hassle myself in learning something new that fast. I just wanted to do the basics and get this part down. I tried to make the example look as similar to the original.


Blog Question


Describe how you are using node.js for this project. What is node.js? What is the node package manager (npm)? What is the particular package you’re using for this project? How did you install it and note that it going to be required for your project moving forward? How did you setup the Sass compiler to run?

Node.js is an open source JavaScript run time, that allows users to write and run java script applications on a server. Developers started to use Node.js to write tools to help them with local web development tools such as comping SASS. For this class we are going to use Node.js to write SCSS code. To use and share packages, we use NPM. NPM is a command line program that allows developers to install and manage packages on their local computers. For this particular course we are going to be using the node-sass package inside of the node_modules. There is a specific order I noted while watching the tutorials. I made a simple method list showing what to do when in a new project. Make sure you are in the project directory before typing into the terminal. I use the VSCode terminal.

  1. npm init
  2. npm install node-sass –save-dev
  3. Change the script inside of the script tag in package.json
    • “compile:sass”: “node-sass sass/main.scss[InputFileDirectory] css/style.css[OutputFileDirectory]”
  4. npm run compile:sass
    • “compile:sass”: “node-sass sass/main.scss css/style.css -w”
    • the -w is to keep watching the file for whenever you save, it will automatically compile SASS to CSS.

This is what I have so far. This is my method using my Windows computer. I will continue to update my personal notes if I come across something new. This was hard to explain..


Leave a comment

Your email address will not be published. Required fields are marked *

css.php