Like most languages or tools in the web development industry, Sass requires knowing a few other things first. When I say HTML5 I do of course mean CSS3 as well. JavaScript is also often grouped in with the HTML5 family; however, for what we'll be covering, you'll only need to be proficient with HTML5 and CSS3.
The following markup and elements should all be familiar:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mastering Sass: Example</title>
</head>
<body>
<header>
<h1>Mastering Sass</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<section>
<article>
<header><h2>Post No 2</h2></header>
<div><p>Some more text</p></div>
<footer><time>2015-11-12 13:00</time></footer>
</article>
<article>
<header><h2>Post No 1</h2></header>
<div><p>Some text</p></div>
<footer><time>2015-11-12 12:00</time></footer>
</article>
</section>
<aside>
<h3>Sidebar</h3>
<p>Sidebar Text</p>
</aside>
</main>
<footer>
<p>© 2015 Mastering Sass</p>
</footer>
</body>
</html>
With regard to CSS3, I'll be covering most of what we'll need to know, but a good idea of the properties that still require browser prefixes is always extremely useful, especially when using Compass.
We won't be doing much (if anything) with animations or transforms, but we might use some transition effects.
You should understand how to use pseudo-elements and selectors comfortably. Pseudo-elements are ::before and ::after, while the selectors include :first-child, :last-child, and ::nth-child(n). I always put the double colon (::) before the pseudo-elements. They will work with a single colon (IE8 will work with a single colon), but technically they should have two. The idea is that pseudo-elements typically are to do with content, while pseudo-selectors are referencing a specific HTML element or elements, such as first or last paragraphs, or the third list item in an unordered list. You can read more about it in the CSS Tricks almanac: https://css-tricks.com/almanac/selectors/a/after-and-before/.
Finally, I'll be using the data attribute for layout styles in later chapters. So, understanding the following will be necessary (including what the symbols ^, *, and ~ do):
[data-layout~="grid"] .portfolio-image {
width: 100%;
height: auto;
}
Pseudo-selectors and pseudo-elements allow a great amount of control over your CSS, and also allows much more semantic markup.
I love programming! Did I mention that? Any day that goes by that I don't get to write some proper code or work on a problem that makes me scratch my head for at least 30 seconds is a sad day for me.
You don't have to be that extreme about it. However, whether it's Sass, JavaScript, PHP, ASP.NET, Ruby, or Python, it's important that you understand what we'll call the fundamentals of programming. To keep on the topic of Sass, as long as you can write a function and a mixin and use if/else statements, then you understand enough to follow along with what I'll cover.
For brevity, I'm only going to call it the command line from now on. So, regardless of your OS (Windows, Linux, or Mac), whether you use the terminal, Powershell, Cygwin, Babun, or plain old cmd.exe, when I say command line, you know what I mean.
If you don't know what I mean, then you'll need to brush up your command-line skills. I won't be using any software to compile or watch files and folders. We'll be using Sass and Compass mainly from the command line. I'll also be creating directories and files occasionally from the command line, and navigating around our project within the command line. We'll also be using Gulp from the command line a lot in later chapters.
When I'm working the command line, I prefer not to have to jump in and out of it to create folders and files. It's faster to just leave the mouse alone for as long as possible and keep typing. With practice, I'm sure you'll agree (hopefully, you already do).
So I'll quickly mention a few commands I often use so you'll know what I'm doing when you see them.
To change into a directory (assuming you are in the documents folder, which contains a folder called my-projects), use the following command:
cd ./my-projects
Or simply use the following command:
cd my-projects
To create a directory, use the following command:
mkdir mastering-sass
We could also have combined those commands on one line using the and operator, &&, which I used earlier in this chapter:
cd my-projects && mkdir mastering-sass
You should now have a folder structure like this:
documents
|-- my-projects
|-- mastering-sass
To move up one directory (or out of the current directory into the parent directory), use the following command:
cd ..
Or you can use this command:
cd ../
To move up two directories, use this command:
cd ../../
We will discuss some useful command-line tips in this section.
The quickest way to open the cmd.exe command line in Windows from XP upwards is as follows:
Press the WinKey + R, which will open the Run... dialog.
Then simply type
cmdand hit Enter .
The second tip that can be used is as follows.
Have you ever been in a folder and wanted to just open up the command line to be in that folder, without needing to copy the path, and right-click on the command line and go to Edit | Paste...ugh! It's actually really simple.
Hold down the Shift key and right-click in the window. Now the context popup will have an extra option, Open command window here.
You could even just hold down Shift, right-click, and then press W if that's still too much.
Why is this hidden by default? I wish I knew.
On the flip side, I bet there's been times you've been in the command line and wanted to simply open the File Explorer window in the current directory. To do that, simply type explorer and hit Enter.
To view files and folders in the current directory, use the following command:
dir
To create a file in the current directory, use this command:
notepad index.html
Note
This will create a file if that file doesn't already exist, or it will open existing files in Notepad. When creating a file, you will have to click Yes to allow Notepad to create a file and then Save from within Notepad. It's not as nice as the Unix touch command or nano, but it's there if you need to create a file quickly. It's still quicker than opening another program, saving finding the right folder, and typing the name and perhaps having to choose an extension.
To list files and folders in the current directory, use this command:
ls
To list all files and folders, including hidden files and folders (such as .htaccess, .git, .DS_Store), use this command:
ls -a
List files and folders with metadata such as file owner, timestamps, and file permissions using the following command:
ls -l
You can even combine them to show you everything, including hidden files and all meta data, as follows:
ls -la
To create a file, use this command:
touch index.html
To edit an existing file, use this command:
nano index.html