Sass CSS Preprocessor Flashcards For Beginners

Placeholder selectors are selectors that are not rendered in the final CSS, but can be used as a template for other selectors. They are denoted by a % symbol. Here is an example code for a placeholder selector:

/* Placeholder selector */
%button {
background-color: #3498db;
color: white;
padding: 10px;
border: none;
border-radius: 5px;
}

/* Use the placeholder selector */
button {
@extend %button;
}

Sass stands for Syntactically Awesome Style Sheets. It is a preprocessor scripting language that is compiled into CSS. Sass allows developers to write more efficient and organized CSS code, with features such as variables, mixins, and nested rules.

Sass allows developers to use inheritance to share properties between selectors. This can reduce duplication in the stylesheet and make it easier to maintain. Here is an example code for using inheritance:

/* Inheritance */
.panel {
padding: 10px;
border: 1px solid #ccc;
}

.success-panel {
@extend .panel;
background-color: #d4edda;
border-color: #c3e6cb;
}

Sass allows developers to set default values for variables, which can be overridden if necessary. Here is an example code for setting a default variable:

/* Default variable */

$primary-color: #3498db !default;

Maps are key-value pairs that can be used to store and access data in Sass. They can be used for storing colors, font sizes, and other common values. Here is an example code for using a map:

/* Map */
$colors: (
primary: #3498db,
secondary: #f1c40f,
tertiary: #e67e22
);

button {
background-color: map-get($colors, primary);
}

Sass allows developers to create namespaces for their variables and mixins to avoid naming conflicts. Here is an example code for using a namespace:

/* Namespace */
@use 'variables' as v;

button {
  @include v.button(v.$primary-color);
}

Sass allows developers to use loops to generate CSS rules based on a set of data. Here is an example code for using a loop:

/* Loop */
@for $i from 1 through 3 {
 .box-#{$i} {
   width: 100px * $i;
 }
}

Sass allows developers to use interpolation to embed a variable or expression within a string. Here is an example code for using interpolation:

/* Interpolation */
$property: background;

button {
#{$property}-color: #3498db;
}

Sass allows developers to use math operators in their stylesheets, making it easier to calculate values such as widths and heights. Here is an example code for using operators:

/* Operators */
.container {
  width: 100% / 3;
}

Mixins are reusable pieces of code that can be included in multiple CSS rules. They can be used to define styles for commonly used elements, such as buttons or forms. Here is an example code for a mixin:

/* Mixin */
@mixin button($color) {
  background-color: $color;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
}

/* Use the mixin */
button {
  @include button(#3498db);
}

Sass allows developers to use conditional statements such as @if and @else to create dynamic stylesheets. Here is an example code for using a conditional statement:

/* Conditional statement */
@mixin button($color, $size) {
  background-color: $color;
  color: white;
  padding: $size;

@if $size < 20px {
  border-radius: 3px;
  } @else {
     border-radius: 5px;
  }
}

Sass allows developers to declare global variables that can be accessed throughout their stylesheets. Here is an example code for declaring a global variable:

/* Global variable */

$primary-color: #3498db !global;

Sass allows developers to use both single-line and multi-line comments in their stylesheets. Here is an example code for using comments:

/* Single-line comment */

/*
Multi-line
comment
*/

Sass can be installed using a package manager such as npm or yarn. Here is an example code for installing Sass with npm:

npm install -g sass

Sass allows developers to nest CSS rules within each other to create a more organized and readable stylesheet. Here is an example code for nesting:

/* Nesting */
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      display: inline-block;
      margin-left: 10px;
    }
  }
}

Partials are Sass files that are meant to be included in other Sass files. They are denoted by an underscore at the beginning of the filename. Here is an example code for a partial:

/* _variables.scss */

$primary-color: #3498db;

The @extend directive is used to inherit styles from one selector to another. It can be useful for reducing duplication in the stylesheet. Here is an example code for using the @extend directive:

/* @extend directive */
.box {
  padding: 10px;
  border: 1px solid #ccc;
}

.success-box {
  @extend .box;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

Sass includes control directives such as @if, @for, and @each that allow developers to create more dynamic and flexible stylesheets. Here is an example code for using a control directive:

/* Control directive */
@for $i from 1 through 3 {
  .box-#{$i} {
    width: 100px * $i;
  }
}

Sass includes built-in functions for manipulating colors, strings, and other data types. Here is an example code for using a function:

/* Functions */
.container {
  color: darken(#3498db, 10%);
}

Sass provides several built-in debugging tools, such as the @debug and @warn directives, that can help developers identify and fix issues in their stylesheets. Here is an example code for using the @debug directive:

/* Debugging */
$primary-color: #3498db;

button {
  @debug $primary-color;
  background-color: $primary-color;
}

Sass allows developers to declare variables for use throughout their stylesheets. Variables can be used for colors, font sizes, and other common values. Here is an example code for declaring a variable:

$primary-color: #3498db;

/* Use the variable */
button {
  background-color: $primary-color;
}

Sass allows developers to import other Sass files into their main stylesheet using the @import rule. Here is an example code for importing a partial:

@import 'variables';