Solved tasks for the Sass CSS preprocessor introduction

Alright, we should already understand the basic ideas of the SASS preprocessor from the previous lesson, Introduction to the Sass CSS preprocessor. Let's try out our knowledge on practical exercises.

Each exercise contains a picture and a guide under it, in other words, information that can help you to write the styles. You can, of course, download both of the exercises finished using the link at the end.

Exercise 1

Let's create a simple web business card. You don't have implement switching between tabs, create only the HTML part and its styles.

A simple web business card

We have to create the HTML code first, containing div.profile. Inside, there will be <ul> holding its items, each of the size of 1/6. The name in the center will be of the size 2/6. Later, you can come back and create a grid using loops. The div.profile element will also contain div.content inside. And in it, there will be a paragraph with some text.

The only thing left is to style the example using the following variables:

$background-color: #fff;
$text-color: #333;
$text-color-hidden: #aaa;
$border-color: #ccc;
$profile-width: 600px;
$gutter: 25px;
$border-width: 1px;

Exercise 2

In the next exercise, we'll create an invitation to a community meeting.

A simple community event registration

This time we have to create an invitation to an event. First, we'll create div.content where everything will be placed. Inside, we'll have an image, an <h1> heading, a few paragraphs with the event description, an <h2> heading, and a sign-up form. he form will consist of a table in which the name and a confirmation of arrival will be entered. It will also include a submit button.

Style the invitation using nested selectors, variables, extensions, etc. You can use the following variables:

$text-color: #333;
$gutter: 20px;
$padding: 10px;
$content-width: 900px;
$item-width: 600px;
$h1-size: 40px;
$h2-size: 25px;
$line-height: 20px;
$table-background-color: #F6F6F6;
$table-text-color: $text-color;
$table-border: #C9CBCD;

In the "next lesson", Data types in Sass, we'll talk about Sass data types.

Did you have a problem with anything? Download the sample application below and compare it with your project, you will find the error easily.

In order to absolve this article, please pass all exercises above by submitting them.