Swift week Pre-Christmas sale
Save up to 80 % on Swift e-learning! Only this week!
Christmas are almost here! Get up to 20 % extra points for free! More info

Exercises 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 business card SASS exercise

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 meeting registration form

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.


 

Download

Downloaded 7x (16.18 kB)
Application includes source codes in language HTML and CSS

 

 

Article has been written for you by Honza Bittner
Avatar
Do you like this article?
No one has rated this quite yet, be the first one!
Everything is possible.
Previous article
Introduction to the Sass CSS preprocessor
All articles in this section
Modern and professional web portfolio
Thumbnail
Next article
Data types in Sass
Activities (3)

 

 

Comments

To maintain the quality of discussion, we only allow registered members to comment. Sign in. If you're new, Sign up, it's free.

No one has commented yet - be the first!