1. Introduction to SCSS
SCSS (Sassy CSS) is a syntax of SASS (Syntactically Awesome Style Sheets), a preprocessor scripting language that is interpreted or compiled into CSS. SCSS extends CSS by adding features that are not available in regular CSS, such as variables, nesting, mixins, inheritance, and more. These features make writing and maintaining CSS more efficient, especially for large-scale projects.
2. Variables
Variables in SCSS allow you to store values that you can reuse throughout your stylesheet. This is particularly useful for managing colors, fonts, or any other CSS property that you may need to use multiple times. By defining these values in one place, you make it easier to update your styles globally.
2.1 Syntax
Variables are defined with a dollar sign ($) followed by the variable name, and then the value you want to store.
2.1.1 Example
$primary-color: #3498db;
$font-stack: Helvetica, sans-serif;
body {
color: $primary-color;
font-family: $font-stack;
}
In this example, the color and font-family properties use the variables $primary-color and $font-stack. If you want to change the primary color across your entire project, you only need to update the variable's value.
3. Nesting
Nesting in SCSS allows you to nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. This makes your stylesheets more readable and mirrors the structure of your HTML, making it easier to understand which styles apply to which elements.
3.1 Syntax
Nested rules are placed within the curly braces of their parent rule.
3.1.1 Example
nav {
background-color: #333;
ul {
list-style: none;
li {
display: inline-block;
a {
color: white;
text-decoration: none;
}
}
}
}
In this example, the ul, li, and a selectors are nested inside the nav selector, reflecting the structure of the HTML. This makes it clear that the styles are related and belong to the nav component.
4. Partials and Import
SCSS allows you to split your CSS into multiple smaller files called partials. Partials help keep your code organized and manageable, especially in large projects. Each partial is usually responsible for styling a specific part of your project, such as buttons, navigation, or layout.
4.1 Partials
Partials are SCSS files that begin with an underscore (_) and are not compiled into separate CSS files. Instead, they are meant to be included in other SCSS files using the @import directive.
4.1.1 Example
Suppose you have a partial named _buttons.scss:
// _buttons.scss
.button-primary {
background-color: $primary-color;
border: none;
color: white;
padding: 10px 20px;
}
You can include this partial in your main stylesheet like this:
// main.scss
@import 'buttons';
This imports the styles defined in _buttons.scss into your main stylesheet.
5. Mixins
Mixins are a way to group CSS declarations that you want to reuse throughout your project. They can take arguments, making them very powerful for creating reusable, dynamic styles. This helps to keep your code DRY (Don't Repeat Yourself) and reduces redundancy.
5.1 Syntax
A mixin is defined using the @mixin directive, followed by the name of the mixin and any parameters it requires. To use a mixin, you call it with the @include directive.
5.1.1 Example
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-o-border-radius: $radius;
border-radius: $radius;
}
.button {
@include border-radius(5px);
background-color: $primary-color;
color: white;
}
In this example, the border-radius mixin allows you to apply consistent border-radius properties across different browsers by using the @include directive with the desired radius value.
6. Extend/Inheritance
SCSS provides a way to share a set of CSS properties from one selector to another using the @extend directive. This feature allows one selector to inherit the styles of another, reducing redundancy and making your code more maintainable.
6.1 Syntax
The @extend directive is followed by the name of the selector whose styles you want to inherit.
6.1.1 Example
.message {
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
.success {
@extend .message;
background-color: #dff0d8;
border-color: #d0e9c6;
}
.error {
@extend .message;
background-color: #f2dede;
border-color: #ebccd1;
}
Here, both .success and .error classes inherit the basic styles from the .message class, but apply different background and border colors.
7. Functions in SCSS
SCSS functions are similar to mixins but are used to perform calculations and return values rather than generating blocks of CSS. SCSS comes with a variety of built-in functions, but you can also create your own custom functions.
7.1 Built-In Functions
Some of the built-in functions include darken(), lighten(), percentage(), and abs(). These functions can manipulate colors, perform calculations, and much more.
7.1.1 Example
$primary-color: #3498db;
$dark-primary: darken($primary-color, 10%);
$light-primary: lighten($primary-color, 10%);
.button {
background-color: $primary-color;
&:hover {
background-color: $dark-primary;
}
&:active {
background-color: $light-primary;
}
}
In this example, the darken() and lighten() functions adjust the brightness of the primary color, which is then used in different states of a button.
7.2 Custom Functions
Creating custom functions allows you to encapsulate logic and reuse it across your stylesheets.
7.2.1 Example
@function calculate-rem($size-px) {
$base-font-size: 16px;
@return $size-px / $base-font-size * 1rem;
}
body {
font-size: calculate-rem(18px);
}
This custom function calculate-rem() converts a pixel value to a rem value based on the base font size of 16px.
8. Control Directives and Expressions
SCSS also includes control directives and expressions that allow you to add logic to your stylesheets. These include conditionals (@if, @else), loops (@for, @each, @while), and other similar programming constructs.
8.1 Conditionals
Conditionals allow you to apply different styles based on specific conditions.
8.1.1 Example
$theme: dark;
body {
@if $theme == dark {
background-color: #333;
color: #fff;
} @else {
background-color: #fff;
color: #000;
}
}
8.2 Loops
Loops are useful when you want to generate repetitive styles based on a pattern.
8.2.1 Example
@for $i from 1 through 3 {
.col-#{$i} {
width: #{$i * 10}%;
}
}
@each $color in red, green, blue {
.btn-#{$color} {
background-color: $color;
}
}
The first loop creates classes with widths corresponding to their column numbers, and the second loop generates button classes for each color in the list.