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