SCSS Flashcards
CSS with superpowers
Officially described as “CSS with superpowers,” SCSS (or Sass) offers a way to write styles for websites with more enhanced CSS syntax. In general, browsers do not know how to process SCSS features, such as functions, mixins, and nesting. We’ll need to convert them to regular CSS files to run them in the browser.
What’s the difference between SCSS and Sass?
This is where most beginners get confused. SCSS and Sass are two syntax flavors for the same concept. The difference between them is UI.
SCSS Stands for Sassy CSS Similar to CSS (uses curly braces and semicolons) Any valid CSS is valid SCSS .scss extension
Sass Stands for Syntactically Awesome Style Sheets Uses strict indentation (like Python) CSS code cannot be used as SASS .sass extension
Here’s an example of SCSS:
body {
background-color:#000;
color:#fff;
}
Below is an example of Sass.
body
background-color:#000;
color:#fff;
It’s up to you to choose one. Don’t stress on the decision — you can easily convert SCSS to Sass and vice versa with the sass-convert tool.
In this article, I’ll focus on SCSS mainly for two reasons.
SCSS syntax is similar to CSS, so it’s easy to explain the advancements for someone who already knows CSS
Once you know SCSS, it takes only a few minutes to learn Sass
Any valid CSS is valid SCSS
Any valid CSS is valid SCSS
Sass - old one and SCSS - new one both are from SASS
Sass was the original version of this new language; SCSS is an improved version they created later.
Sass is a CSS pre-processor with syntax advancements. Style sheets in the advanced syntax are processed by the program, and turned into regular CSS style sheets. However, they do not extend the CSS standard itself.
CSS variables are supported and can be utilized but not as well as pre-processor variables.
For the difference between SCSS and Sass, this text on the Sass documentation page should answer the question:
There are two syntaxes available for Sass. The first, known as SCSS (Sassy CSS) and used throughout this reference, is an extension of the syntax of CSS. This means that every valid CSS stylesheet is a valid SCSS file with the same meaning. This syntax is enhanced with the Sass features described below. Files using this syntax have the .scss extension.
The second and older syntax, known as the indented syntax (or sometimes just “Sass”), provides a more concise way of writing CSS. It uses indentation rather than brackets to indicate nesting of selectors, and newlines rather than semicolons to separate properties. Files using this syntax have the .sass extension.
However, all this works only with the Sass pre-compiler which in the end creates CSS. It is not an extension to the CSS standard itself.
To run SCSS code in a web browser, you must first convert it to CSS. We’ll discuss tools you can use for this and how to automate the process later.
Unfortunately, the features of SCSS have yet to be introduced in the CSS specs and, therefore, are not supported by browsers. To run SCSS code in a web browser, you must first convert it to CSS. We’ll discuss tools you can use for this and how to automate the process later.
The structure of SCSS rules
The structure of SCSS follows that of CSS. First, choose one or more elements using IDs, classes, or other CSS selectors. Then, add styles.
In this example, we select the elements with button class and add some properties. This is valid as CSS code as well as SCSS code. It’s important to note that SCSS supports all CSS properties.
.button {
display:inline-block;
font-size:14px;
padding:4px 10px;
}
Comments in SCSS
Both // (single-line) and /* */ (multi-line) comments are allowed in SCSS.
// this is a single-line comment
/* this is a multi-line comment */ Now let’s go over the basic enhancements of SCSS. We’ll discuss how to compile SCSS to CSS in the final section. For now, you can use CodePen to write and test your code. Make sure you select SCSS as the preprocessor in CSS settings.
ou can use CodePen to write and test your code. Make sure you select SCSS as the preprocessor in CSS settings.
https: //codepen.io/
http: //beautifytools.com/scss-compiler.php
Nesting
Here’s the bottom line: nesting makes code more clear, organized, and concise, but be careful not to overuse it.
if possible keep it little flat as it might save some memory
https://blog.logrocket.com/the-definitive-guide-to-scss/
Your grandpa styled his navbar like this with CSS:
nav {
background-color:#333;
padding:1em;
}
nav ul {
margin:0;
padding:0;
list-style:none;
}
nav ul li {
display:inline-block;
}
But you can do so with SCSS, like this:
nav {
background-color:#333;
padding:1em;
ul {
margin:0;
padding:0;
list-style:none;
li {
display:inline-block;
}
}
}
Much more organized and concise, right? You have two major advantages over your grandpa:
You know that all the styles of nav and its children are between curly braces, so you don’t need to find them in the file or in multiple files
You simply write less code, so there is no repetition
Keep in mind, however, that when you go much deeper with nesting, the CSS file can become much larger and browsers will need to do more work to style the elements. Try to keep the selectors shallow. For example, we can save several bytes by taking the styles of li to the outer scope.
nav {
background-color:#333;
padding:1em;
ul {
margin:0;
padding:0;
list-style:none;
}
li {
display:inline-block;
}
}
For larger projects, this can save a huge amount of bandwidth.
It’s important to make sure this process doesn’t create any conflicts. For example:
content {
ul {
li {
font-style:italic;
}
}
ol {
li {
font-decoration:underline;
}
}
}
In this case, we cannot bring the styles of li elements to the outer scope because they have different rules.
Here’s the bottom line: nesting makes code more clear, organized, and concise, but be careful not to overuse it.
Using & in nesting
& always refers to the upper selection. Below are some use cases. like the parent element
Your grandpa shows off his magical button that changes color when you hover over it. His CSS code looks like this:
button {
background-color: #535353;
color: #000;
}
button:hover {
background-color: #000;
color: #fff;
}
You can achieve the same effect much more easily with SCSS by using the & character in nesting.
button {
background-color: #535353;
color: #000;
&:hover {
background-color: #000;
color: #fff;
}
}
& always refers to the upper selection. Below are some use cases.
.some-class {
&:hover {
/* when hovered */
}
&:focus {
/* when focused */
}
& > button {
/* selector equls to .some-class > button */
}
&-cool {
/*** Notice this! ****/
// selects .some-class-cool elements
}
}
Variables
Variables store data. In SCSS, you can save any CSS value (even with units) in variables. Variables are defined using the $ symbol.
Variable declaration:
$my-font: Nunito, sans-serif;
$my-font-color: #ffd969;
$content-width: 660px;
Variable usage:
body {
font-family: $my-font;
color: $my-font-color;
content {
width: $content-width;
}
}
When Sass is converted to CSS, all the variables are replaced with their original values. SCSS variables are useful to keep fonts, colors, and other values consistent thought a website or web app.
css generated:
body {
font-family: Nunito, sans-serif;
color: #ffd969;
}
body content {
width: 660px;
}
The difference between SCSS and CSS variables
CSS variables are more powerful
SCSS variables are replaced with values when converted into CSS variables. These conversions take place before they are served to the browser, so browsers don’t even know there were variables in the first place, they just see the values. On the other hand, CSS variables are much more powerful.
CSS-Tricks outlined several advantages of CSS variables:
They cascade; you can set a variable inside any selector to set or override its current value
When a variable’s value changes (e.g., media query or another state), the browser repaints as needed
You can access and manipulate variables in JavaScript
Does that mean Grandpa wins? Not exactly: you can use CSS variables in SCSS stylesheets, since any valid CSS is also valid SCSS. If you’re curious about CSS variables, you can learn more here.
Using CSS custom properties (variables)
this could be used in scss as well
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document. They are set using custom property notation (e.g., –main-color: black;) and are accessed using the var() function (e.g., color: var(–main-color);).
Complex websites have very large amounts of CSS, often with a lot of repeated values. For example, the same color might be used in hundreds of different places, requiring global search and replace if that color needs to change. Custom properties allow a value to be stored in one place, then referenced in multiple other places. An additional benefit is semantic identifiers. For example, –main-text-color is easier to understand than #00ff00, especially if this same color is also used in other contexts.
Custom properties are subject to the cascade and inherit their value from their parent.
Basic usage of CSS variables
usually they are declare with :root pseudo class, so that it could be used across
Declaring a custom property is done using a custom property name that begins with a double hyphen (–), and a property value that can be any valid CSS value. Like any other property, this is written inside a ruleset, like so:
element {
–main-bg-color: brown;
}
Note that the selector given to the ruleset defines the scope that the custom property can be used in. A common best practice is to define custom properties on the :root pseudo-class, so that it can be applied globally across your HTML document:
:root {
–main-bg-color: brown;
}
However, this doesn’t always have to be the case: you maybe have a good reason for limiting the scope of your custom properties.
accessing CSS custom property names/variables
Note: Custom property names are case sensitive — –my-color will be treated as a separate custom property to –My-color.
As mentioned earlier, you use the custom property value by specifying your custom property name inside the var() function, in place of a regular property value:
element {
background-color: var(–main-bg-color);
}
This leads to the same result as the previous example, yet allows for one canonical declaration of the desired property value; very useful if you want to change the value across the entire page later.
Inheritance of custom properties CSS
Custom properties do inherit. This means that if no value is set for a custom property on a given element, the value of its parent is used. Take this HTML:
<div class="one">
<div class="two">
<div class="three"></div>
<div class="four"></div>
</div>
</div>
... with the following CSS:
.two {
–test: 10px;
}
.three {
–test: 2em;
}
In this case, the results of var(–test) are:
For the class=”two” element: 10px
For the class=”three” element: 2em
For the class=”four” element: 10px (inherited from its parent)
For the class=”one” element: invalid value, which is the default value of any custom property
Keep in mind that these are custom properties, not actual variables like you might find in other programming languages. The value is computed where it is needed, not stored for use in other rules. For instance, you cannot set a property for an element and expect to retrieve it in a sibling’s descendant’s rule. The property is only set for the matching selector and its descendants, like any normal CSS.
Keep in mind that these are custom properties, not actual variables like you might find in other programming languages. The value is computed where it is needed, not stored for use in other rules. For instance, you cannot set a property for an element and expect to retrieve it in a sibling’s descendant’s rule. The property is only set for the matching selector and its descendants, like any normal CSS.
these are more like setting margin, which follow inheritance
