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.
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
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
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;
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
<h1> heading, a few paragraphs with the event
<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.
DownloadBy downloading the following file, you agree to the license terms
Downloaded 14x (16.18 kB)
Application includes source codes in language HTML and CSS
In order to absolve this article, please pass all exercises above by submitting them.