By this point in the tutorial you should have a grasp on how to send a request out to a server, get the response back, and parse that response into meaningful data for your user. Now, we want to add some style to the page so that it is aesthetically pleasing. In the previous tutorial we used the Bootstrap framework along with some basic CSS. Today, we are going to touch on the basics of using a CSS preprocessor to add some additional functionality to our stylesheet. The preprocessor that we will be looking at is called Syntactically Awesome Style Sheets (SASS). With SASS, we can add some additional logic into the stylesheet that gives us greater flexibility and easier ways to adjust styles throughout our site. Before we begin on this topic, let’s revisit the Bootstrap framework briefly.
If you look at the HTML file below, you should see some similarities between our last styling tutorial and this one. Take a look at the previous link if you need a little refresher. Now, remember, we add the Bootstrap stylesheet and then take advantage of the functionality through the use of classes. We set some basic classes on the form and the table, which we will then add upon using SASS.
Now, before we can begin using it, we must first download SASS. My recommendation is to use one of the Command Line options. For myself, I used the npm install option since I already have Node running on my machine. However, you should choose the option that works best for your setup. Now that SASS is installed, we can begin writing our stylesheet. SASS files use the extension SCSS. While in your Books directory for the current project, add a file called main.scss. You will notice (if working in VS Code) that the editor comes with support for SASS. Now, let’s begin talking about some of the different functionality that this preprocessor offers.
While SASS has a whole host of features, we will focus on the basics. SASS has a great guide for the basics on their website as well. To begin, let’s look at lines 2 through 6 below. Notice that I am using a $ to create variables. This is a very useful tool in SASS. For example, if you want to mess around with the color scheme of your site, it is much easier to change a single variable than every CSS attribute that contains the color. The first CSS selector for the body element shows how to call these variables. Now, let’s look at the use of nesting. Starting at line 17, we start with the label element and change the text color. Next, we use the concatenation operator ‘&’ to also use the hover selector. It is important to use the concatenation operator here, as without it SASS will put a space here that will make your CSS not functional for the hover.
Now. let’s look at a little more advanced nesting example beginning at line 25. Here, for the table with the id of tblOutputJSON, wee nest inside it th and tr for the table headers and rows. Notice, that for th and tr we are not using the concatenation operator. Because, we want SASS to compile these with a space, so that the CSS will select the th and tr tags that are children of tblOutputJSON. We also nest a hover inside the tr element. So, when the user hovers over each row the background color and text color will change. Now that we have our SCSS file, how to we compile it into a regular CSS file? Simple. In the terminal type the following:
sass main.scss main.css
You will notice that a new file is created named main.css. Look inside the file. You will see the compiled CSS that will run on the browser to style the page. Go ahead and load the page into the browser. All the styles that we set in our main.scss are now applied to the page. Pretty cool, right? Go ahead and mess around with some of the other functionality of SASS and post what you come up with in the comments section. Remember to share this post don your favorite social media platform and stop by next week where we will begin learning about AJAX. Thanks for your support.