SCSS

SCSS is a CSS preprocessor that offers additional features and syntax to enable more efficient and organized CSS development. Learn how Slides slides utilize all of those features.

Introduction

SCSS (Sassy CSS) is a preprocessor for CSS that adds a number of powerful additional features to CSS, that allows you to write more efficient, organized, and maintainable CSS by providing additional tools and syntax that are not available in regular CSS.

In order to use SCSS on a web page, it must first be compiled or converted into standard CSS because SCSS is not directly supported by web browsers. Slides 6.1 (and later) automatically converts your SCSS code into standard CSS for the preview and exported versions.

Here are the most interesting features of SCSS you can bring into your Slides 6 Project:

Nesting

SCSS allows you to nest your CSS rules, making it easier to read and write your styles:

//SCSS
.element {
    color: red;
    
    img {
        border-radius: 10px;
    }
    svg {
        fill: none;
    }
}

//CSS Output
.element {
    color: red;
}
.element img {
    border-radius:10px;
}
.element svg {
    border-radius:10px;
}

Nesting in SCSS allows you to structure your styles in a more intuitive and organized way. With nesting, you can define styles for a specific element and its children within the same block of code, rather than having to define them separately. This can make your styles more readable and easier to understand, especially for large and complex stylesheets.

Variables

SCSS allows you to define variables that can be used throughout your stylesheet, making it easier to maintain and update your styles.

$color: #00CCFC;

.element {
    color: $color;
    
    svg {
        fill: $color;
    }
}

Variables in SCSS allow you to define reusable values that can be used throughout your stylesheet. This can make it easier to maintain and update your styles, as you only need to update the value of a variable in one place, rather than having to find and update every instance of that value throughout your styles.

Mixins

SCSS provides a way to define reusable blocks of styles called mixins, which can be included in your styles using the @include directive.

@mixin link-color($color) {
  color: $color;
  border-bottom-color: $color;
}

h1 {
  @include link-color(#333);
}

p {
  @include link-color(#666);
}

Mixins in SCSS allow you to define reusable blocks of styles that can be included in multiple places throughout your stylesheet. This can make it easier to write and maintain your styles, as you can define common styles in a single mixin and reuse them throughout your stylesheet, rather than having to write the same styles multiple times.

Functions

SCSS allows you to define custom functions that can be used to perform calculations and return values that can be used in your styles.

@function realistic-box-shadow($color, $opacity) {
  @return 0 1px 1px rgba($color, $opacity), 
          0 2px 2px rgba($color, $opacity), 
          0 4px 4px rgba($color, $opacity), 
          0 8px 8px rgba($color, $opacity), 
          0 16px 16px rgba($color, $opacity);
}

.shadow {
  box-shadow: realistic-box-shadow(#000, 0.1);
}

Functions are a useful tool in SCSS that can help you write more efficient, maintainable, and readable CSS.

Operators

SCSS provides a number of arithmetic and logical operators that can be used to perform calculations and create complex styles.

$font-size: 16px;

h1 {
  font-size: $font-size * 1.5;
}

h2 {
  font-size: $font-size * 1.25;
}

Operators can be used to perform a variety of calculations within your styles, including arithmetic operations like addition, subtraction, multiplication, and division, as well as logical operations like comparison and boolean operations. This can be useful for creating complex styles that require precise values, such as layout styles that depend on the viewport's size or styles that need to be adjusted based on user input.

More features you can learn on the official website: https://sass-lang.com/

Slides SCSS

Using [this] shortcut

For the cases, where you want to wrap specify your styles within just one slide you can wrap your code with [this]:

[this] {
    h1 {
        filter: blur(2px);
    }
    p { 
        border-width: 1px;
    }
}

Please note that the [this] shortcut is only available for use within the Slides App and should not be used as a replacement for the unique ID of an element. Upon export or preview, [this] will be replaced with the original ID name. The resulting code will be converted to valid SCSS/CSS for both local and exported versions.

//SCSS Output:
.slide[data-cid-"slide-07-341alfea"] {
    h1 {
        filter: blur(2px);
    }
    p { 
        border-width: 1px;
    }
}

//CSS Output:
.slide[data-cid-"slide-07-341alfea"] h1 {
    filter: blur(2px);
}
.slide[data-cid-"slide-07-341alfea"] p {
    border-width: 1px;
}

Slides Variables

Colors

The Slides Framework includes a number of predefined color variables that you can use in your SCSS. These variables are named after the corresponding preset class names in the "Colors" tab of the Slides App. For example, you can use the $lightGreen variable to set the same color as the .lightGreen class. This allows you to easily apply the same color styles across your project without having to manually specify the color values.

.element {
    color: $green;
}

This allows you to easily apply the same color styles across your project without having to manually specify the color values.

Other Variables

The Slides framework includes a number of SCSS variables that you can use or modify in your project. It is recommended to keep these variables outside of the [this] element to avoid conflicts with styles within your slides.

// FONTS
$body-font: ("Inter",-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif) !default;
$body-baseline: 0.1445 !default;
$header-baseline: 0.1445 !default;
$gh: 1rem !default;

//SHADOWS
$small-shadow: 0 1px 4px rgba(0,0,0,0.1), 0 2px 6px rgba(0,0,0,0.1) !default;
$medium-shadow: 0 2px 4px rgba(0,0,0,0.15), 0 3px 9px rgba(0,0,0,0.15) !default;
$large-shadow: 0 10px 40px rgba(0,0,0,0.2) !default;

//WIDTH
$desktop: 1240px !default;
$tablet: 1024px !default;
$phablet: 768px !default;
$phone: 436px !default;

//FLEX
$grid-column: 80px !default;             //1180px wide total
$grid-gap: 20px !default;                //1180px wide total

//BORDER RADIUS
$default-border-radius: 3px !default;
$rounded-border-radius: 6px !default;

//SLIDE SPEED
$slide-speed-fast: 0.7s !default;
$slide-speed-normal: 1s !default;
$slide-speed-slow: 1.4s !default;
$slide-transition-smooth: cubic-bezier(.55,.05,.35,.95) !default;
$slide-transition-bounce: cubic-bezier(0.45, 1.15, 0.5, 1) !default;


//ELEMENT ANIMATION
$horizontal-distance: 50px !default;
$vertical-distance: 25px !default;
$start-delay: 10 !default;
$blur-size: 10px !default;
$small-scale: 0.9 !default;
$large-scale: 1.1 !default;		//ms

//default
$default-duration: 800 !default;	//ms
$default-delay-step: 150 !default; 	//ms

//fast
$fast-duration: 700 !default;		//ms
$fast-delay-step: 100 !default; 	//ms

//slow
$slow-duration: 1000 !default;		//ms
$slow-delay-step: 200 !default; 	//ms

Available Mixins

You can use the media and mediaRange mixin functions in SCSS to insert a special media query that will apply the specified code only for a specific width. For example:

@media (min-width: $tablet) {
  // code to apply only when the width is at least the value of $tablet
}

@media (max-width: $mobile) {
  // code to apply only when the width is at most the value of $mobile
}

The mediaRange function can also be used to apply styles within a range of widths, like this:

@include mediaRange($mobile, $tablet) {
  // code to apply only when the width is between $mobile and $tablet
}

Autoprefixer

Autoprefixer is a tool that automatically adds vendor prefixes to CSS rules to make it easier to write and maintain cross-browser-compatible CSS. Vendor prefixes are a way for browser vendors to add support for new CSS features before they are fully supported by all browsers. Autoprefixer helps to ensure that these vendor prefixes are added to your CSS in a consistent and automated manner, making it easier to write and maintain your styles.

.my-class {
  display: flex;
}

/* Output after Autoprefixer is applied */
.my-class {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

It's worth noting that the Slides App does this for your styles by default. This means that you don't need to do anything special to use Autoprefixer. All of the necessary vendor prefixes will be added automatically, so you can focus on writing your styles without worrying about cross-browser compatibility.

CSS Output Minifier

A minifier is used to reduce the size of a file by removing unnecessary characters, such as whitespace and comments, from the source code. It can help to optimize the size of the compiled CSS file for production by removing unnecessary characters. By default, the Slides App uses the minified version of the styles (slides.min.css) that have been converted from SCSS. However, you also have the option to use the unminified version of the styles if desired. Both minified and unminified versions are exported by the Slides App.

Installation (optional)

For advanced users who would like to make deep changes to the SCSS files locally, you have the option to install a preprocessor on your computer. Please note that this step is optional and not necessary for basic usage of the SCSS files.

PreviousJS

Last updated 1 year ago