SASS

Goals


- Create style sheets using Sass

Program

Introducing Sass
Difference between Less and Sass
Dart Sass vs LibSass vs RubSass
Difference between Sass and scss

Workshop: Install Sass and compile a first file

Declaration of variables
Types of values
Operators
Define default values
SassScript expressions
Understanding the scope of variables
The @if and @else conditions
The @for, @while loops

Workshop: Using variables to define the colors of a theme

Presentation of the acronym DRY
Nesting rules
The parent selector « & »
Combinators
Using string
interpolations Property nesting

Workshop: Format a navigation bar

Declare a mixin (@mixin)
Include a mixin in a class (@include)
Define arguments (optional, required, named)
Pass a list of values
Use the content block (@content)

Workshop: Using mixins to create a responsive grid

Overview
Difference between list and map
Browse values ​​using @each
Manipulate values ​​with sass: map and sass: list modules

Workshop: Use maps to decline a css component in several colors or in several sizes

Declare and use a function (@function)
Define arguments (optional, mandatory, named)
Pass a list of values
Return values ​​(@return)
Difference between functions and mixins

Workshop: Recreate the calc () function of css

Cut the code in several files: _partials
Import partials with @import
Use @import to import files css
The placeholder
Extend selectors @extend
difference between @extend and @mixin

Workshop: Distribute our code in several dedicated files

Sass modules: color, list, map, etc.
Presentation of the @use rule
Loading a module
Naming rules
Making properties private
Configuring import variables

Workshop: Import and configure a module

Duration

2 days

Price

£ 979

Audience

Web developers, integrator, front-end developer

Prerequisites

Master HTML / CSS

Reference

SIT101082-F

Sessions

Contact us for more informations about session date