Articles- Most recent

New web site PattytheAstrologer.com
New web site PattytheAstrologer.com

Patty the Astrologer.com and SASS

(Web Basics - Intermediate)

Linkedin Article by Carol Hicks: Posted on www.linkedin.com
March 28, 2021

Patty Finlayson contacted me to build a website to promote her Astrology blog, podcast, and free email newsletter. Patty's astrology readings have helped many people over the years. She has compassion and empathy helping her clients understand romantic and family relationships, career and money situations. Patty does have a lively personality, but I thought this was good opportunity to use SASS, a stylesheet language that compiles into CSS, Cascading Style Sheets. In the web development world, the acronym SASS stands for Syntactically Awesome Style Sheets.

Over the years, web pages have changed so that files like CSS and JavaScript are linked as separate files and not added right into the HTML page. This helps make the HTML easier to read and maintain. As time went on, several CSS files were linked to each page, like the Bootstrap Library for responsive design, Google Font links, and custom site styles. The best practice is to add the custom CSS link last and not overwrite or edit the Bootstrap file. Each time the web page requests a different resource, it slows the site’s loading time down. Smaller page sizes work better on phones and load faster. Using SASS, you can compile all the stylesheets together as one and then minify to reduce the file size. This reduces the clutter in the header section of the page and speeds up the time the site needs to load.

Patty selected two Google Fonts: Dancing Script for a little flare and the suggested pairing Open Sans for its readability. Google fonts were designed for the web, so they are ideal. There are two formats you can use with Sass I used the_sassy CSS (SCSS) syntax. I created partial files using an underscore and the extension .scss, i.e., _variable.scss. Here is the link to Google Fonts that I added to import them into my “_variables.scss” file.

@import url('https://fonts.googleapis.com/css2?family= Dancing+Script:wght@500;700&family= Open+Sans: wght@400;700&display=swap');

The “$” dollar sign designates a variable. Here is the one I used so that I could style the font in other partials.

$dancing: “Dancing Script,” serif;

Here is an example of a style using variables:

.header1{ font-family: $dancing; color: $header-color; font-size: 3rem; }

Other uses for variables could be custom colors, and padding or margins. You can even create your own grid system similar to Bootstrap. The partials can have media queries in them so those styles work for phone, tablets, or desktop computers. There are more advanced features than are listed in this web basics article. The Bootstrap Library is also added as a partial: _bootstrap.scss.

All these partials are tied together by a file without an underscore, i.e., style.scss. It imports the other partial SCSS files using this syntax: @import"bootstrap";.

Pluralsight.com course "Hands-on Responsive Web Design 1: Media Queries & CSS Preprocessing" by Paul Cheney suggested using the free app Koala or Adobe Dreamweaver to process the SCSS into one CSS file. Both work very well. If you are familiar with Dreamweaver, then you probably have used the dialog box “Manage Sites” to define a site and the path to where the files exist on your computer. In this dialog, there is a menu link on the left named "CSS Preprocessors," and one of the panels will allow you to set up a source (SCSS) and output (CSS). Kola has a much simpler interface that uses a drag and drop system or a plus sign to add files. The error reporting on both was a little troublesome but manageable. Once compiled, the new styles.css file can be minified to make it even smaller and uploaded to the server. The SCSS files still exist and can be edited or added, too, and then compiled again.

This process worked great. Visit https://sass-lang.com/ to learn more about SASS. There are several webs sites that will minify CSS, and it is also build into Dreamweaver. Please visit PattytheAstologer.com to see the results.