Copyright Derek O'Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.
The CSS @import rule allows us to import one style sheet into another style sheet. We can import a file from the current website or from an external file on the www.
To import a file from the current website, use @import, as shown below:
@import "stylesheet_in_this_website.css";
To import a file from an external server, use @import url(), as shown below:
@import url("stylesheet_on_external_server.css");
We can add media queries to limit when a style sheet is imported. For example, the style sheet below will only be imported if the max-width <= 600px.
@import "mobile.css" screen and (max-width:600px);
The rules from one SCSS file can be mergered into another SCSS file by using @import.
Write code to move the colour information in the code below into a separate file.
:root
{
--text_colour:#ff0000;
--textshadow_colour:#ffaaaa;
--textshadow_offset:5px;
}
h1,
p
{
color:var(--text_colour);
}
h1
{
text-shadow:var(--textshadow_colour) var(--textshadow_offset) var(--textshadow_offset);
}
red.css
:root { --text_colour:#ff0000; --textshadow_colour:#ffaaaa; --textshadow_offset:5px; }main.scss
@import "red.css"; h1, p { color:var(--text_colour); } h1 { text-shadow:var(--textshadow_colour) var(--textshadow_offset) var(--textshadow_offset); }
Change the code above, so as to import a green colour scheme instead of the red colour.
Copyright Derek O' Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.