Design: CSS, SASS, SCSS and Compiling
Cascading Style Sheets (CSS) is a fundamental technology used for styling web pages. CSS provides web developers with a way to describe how HTML elements should be displayed on a screen, on paper, in speech, or on other media. With CSS, designers can define a variety of visual properties for each HTML element, such as the font size, color, background, margins, and more. This separation of presentation and content allows web developers to create responsive, accessible, and aesthetically pleasing websites that can be adapted to different devices and user preferences. In this way, CSS has become an essential tool in modern web development, enabling developers to create beautiful and functional web pages that enhance the user experience.
.warning {
background: #be5f5f;
border: 1px solid red;
padding: 15px;
border-radius: 15px;
color: #fff;
}
In the example above, we can see a CSS class named 'warning'. CSS has two primary types: an ID, which is identified by a hash symbol (e.g. #warning), and a class, which is indicated by a dot (e.g. .warning). Unlike an ID, which can only be used once in an HTML document, a class can be reused multiple times, making it a more flexible and versatile option for styling web pages.
When working on large projects, utilizing raw CSS can present challenges. It can result in an unwieldy unminified file with thousands of lines of code or require the injection of multiple CSS files into the HTML document. To address this issue, developers have created libraries that can compile CSS from more manageable documents. SASS and SCSS are two such libraries that have been developed to make it easier to create and manage CSS code.
SASS and SCSS
SASS (Syntactically Awesome Style Sheets) is a preprocessor scripting language that is used to generate CSS code, however it is designed to make writing CSS easier and more efficient, by providing additional features such as variables, file nesting, and basic scripting through mixins. SASS files have a .sass file extension.
SCSS (Sassy CSS) is a syntax that is based on SASS, but is designed to look more like traditional CSS. It is a superset of CSS, which means that any valid CSS code is also valid SCSS code.
Compiling SASS and SCSS
The SASS compiler can be run from the command line or integrated into build tools such as Grunt, Gulp, or Webpack. The SASS compiler takes SASS or SCSS code as input, processes it, and generates CSS code as output. Here is a brief overview of different ways to compile and deliver CSS code:
-
Writing SASS or SCSS code
SASS and SCSS code is written in a text editor, with the file extension .sass or .scss. -
Compilation
The SASS compiler takes the SASS or SCSS code and converts it into standard CSS code. This is handled by a third-party library, usually installed with node package manager (npm). -
Configuration
The SASS compiler can be configured to customize the output CSS, such as setting the output style, specifying the source map file, or setting up watch tasks to automatically compile SASS or SCSS files when they are modified. By using configuration files, themes can easily be switched as each colourway can be stored in its own file. -
Integration
The compiled CSS code can be integrated into a web project by linking to the output CSS file in a document as part of the sites build, or using more complex means of injecting the CSS code into the HTML document using a server-side/client-side template engine.
Minifying CSS
After creating a CSS file either manually or using a compiler, developers have the option to minify the final output to reduce its file size. Some compilers offer the convenience of minifying the code during the compilation process, which can save time. Minification is a process that involves removing any unnecessary characters and spaces from the CSS file, such as comments, whitespace, and newline characters that are not necessary for the code to function properly.
.warning{background:#be5f5f;border:1px solid red;padding:15px;border-radius:15px;color:#fff;}
This process enables web developers to reduce the loading time of a webpage, resulting in a faster and more streamlined user experience. Minified CSS is particularly beneficial for larger websites that require multiple CSS files, as reducing the file size helps to minimize the amount of data transmitted over the network. While minified CSS can make the code harder to read and edit, it is a vital optimization technique used in modern web development to enhance webpage performance.