helpers.sass
helps with developing their stylesheetsposition: relative
creates a new origin for properties like top
, left
etc.a[href]
Note
Sass has two different syntaxes,
.scss
and.sass
.
We use the indented syntax (.sass
).
Tip
You can use tools like CSS explain Show archive.org snapshot or this calculator Show archive.org snapshot to specificity of two CSS selectors.
We want to layout a classic website with a header, a sidebar with navigation links, a big content area and a footer:
+------------------------------------------------------+
| |
| BIG LOGO |
| |
+------------+-----------------------------------------+
| | |
| Link 1 | HEADLINE |
| | |
| Link 2 | Lorem ipsum dolor amit. |
| | At vero eos et accusam et justo. |
| Link 3 | Stet clita kasd gubergren, no sea. |
| | Sed diam nonumy eirmod tempor. |
| | Lorem ipsum dolor amit. |
| | At vero eos et accusam et justo. |
| | Stet clita kasd gubergren, no sea. |
| | Sed diam nonumy eirmod tempor. |
| | |
| | |
| | |
| | |
| | |
| | |
+------------+-----------------------------------------+
| Footer |
+------------------------------------------------------+
Here are some more details how the layout should behave:
Build multiple versions of this layout in separate files. Each file should use a different CSS layout technique:
Tip
You can implement this exercise in plain CSS, you don't need to use Sass.
Give each layout element a CSS class so you can apply styles. Some layout techniques may require more HTML elements than others, or a different nesting.
You can generate paragraphs of random text on https://loremipsum.de/ Show archive.org snapshot .
Apply some basic styles to MovieDB. You should author your styles in Sass, using the indented syntax (.sass
).
Here are some hints for this exercise:
Movies | Actors | Roles
).Tip
Up until version 6, Rails understands Sass out of the box. No need to install additional software.
Your MovieDB uses Rails 7 with Esbuild, Sass support is included using theesbuild-sass-plugin
library.
Tip
Every time you add a new SASS or JS file to your application (e.g.
app/assets/application/navbar.sass
), you need to restart your development server for it to show up in your browser.
This is caused by a limitation of the esbuild-plugin-import-glob Show archive.org snapshot , which we use to import all assets in this directory: Seeimport './application/**/*.sass'
in yourapplication.js
. Direct import statements likeimport 'app/assets/application/navbar.sass'
would work without restarting the server.
You'll learn the details of esbuild and the frontend build pipelines in a later card, for now it's enough to know why new files might be missing.