Web technologies-course 05

2. COURSE 05
SASS, SCSS, LESS
lect. eng. Rajmond JÁNÓ, PhD
rajmond.jano@ael.utcl
uj.ro
fb.com/janorajmond

3. PARTIAL EXAM
• Contents
• Lectures 01-06
• Date
• Hold it on Saturday, 9th November 2019
OR
• Don’t hold it at all → all material will be in the final
exam
• There will be separate group polls (RO/ENG) to
decide
• Results may be different for RO vs ENG

4. C05 – SASS, SCSS, LESS
• SASS and SCSS
• SASS installation
• Compiling SASS/SCSS
to CSS
• Nesting
• Variables
• Functions
• Operators
• Mixins
• Extending and
inheritance
• Partials and imports
• Conditional statements
• SCSS responsive
example
• LESS

5. SASS & SCSS
• Syntactically Awesome Style Sheets (SASS) is a
style sheet language
• SASS is a preprocessor scripting language that
is interpreted or compiled into CSS
• SassScript is the scripting language itself
• SASS consists of two syntaxes: SASS (original)
or SCSS

6. SASS & SCSS
SCSS SASS
CSS
A CSS file isn’t a valid SASS file, however it is a valid

7. SASS INSTALLATION
• Download and Install Ruby

8. SASS INSTALLATION
• Install Ruby – check the Run “ridk install” option
when done

9. SASS INSTALLATION
• Select to install “MSYS2 and MINGW development
toolchain

10. SASS INSTALLATION
• Validating Ruby and Gem installation via
Command Prompt

11. SASS INSTALLATION
• Using Gem to install SASS and checking
installation

12. COMPILING SASS/SCSS TO CSS
HTML
SCSS needs to be compiled to
CSS

13. COMPILING SASS/SCSS TO CSS
• Using the Command Prompt
• SASS will now watch the “style” folder and
compile any SASS/SCSS files to CSS upon save

14. COMPILING SASS/SCSS TO CSS
• To automatically compile in Visual Studio,
install:
• Web Compiler – Visual Studio 2017
• Live Sass Compiler – Visual Studio Code

15. COMPILING SASS/SCSS TO CSS
• Create a Blank Web Application

16. COMPILING SASS/SCSS TO CSS
• Create your HTML and SCSS files
• Set-up automatic compilation
A “compilerconfig.json” file will be added to the

17. COMPILING SASS/SCSS TO CSS

18. COMPILING SASS/SCSS TO CSS
style.scs
s
style.css
This file is automatically
regenerated on each save of
the SCSS file.
Do not edit manually!

19. NESTING IN SCSS
• Nesting allows you to structure and format
your SCSS to reflect the layout from your HTML
document
HTML CSS

20. NESTING IN SCSS
• Nesting allows you to structure and format
your SCSS to reflect the layout from your HTML
document
HTML SCSS

21. VARIABLES IN SCSS
HTML SCSS
I DoN’t
LiKe iT!
ChAnGe
iT tO
gReEn!

22. VARIABLES IN SCSS
SCSS

23. VARIABLES IN SCSS
SCSS
Now
THAT’S
pretty!

24. VARIABLES IN SCSS
• Syntax
$variable-name: value;
• Use meaningful names for your variables
• Try to avoid shorthand

25. VARIABLES IN SCSS

26. VARIABLES IN SCSS

27. VARIABLE MAPS

28. FUNCTIONS
Can we please make this
prettier?!
Refactor it into a function…

29. FUNCTIONS

30. FUNCTIONS
• Syntax
@function function-name($param1, $param2, …) {
instr1;
instr2;
…
@return function-return-value;
}

31. OPERATORS
• Operators allow basic arithmetic on certain CSS
elements

32. OPERATORS
• Operators allow basic arithmetic on certain CSS
elements

33. OPERATORS

34. OPERATORS

35. OPERATORS

36. MIXINS
• Mixins are snippets of reusable SCSS code
SCSS

37. MIXINS
• Mixins can also take parameters
SCSS
default value

38. MIXINS
Syntax
• Definition
@mixin mixin-name($param: default1, $param2: default2, …) {
instr1;
instr2;
…
}
• Usage
@include mixin-name(value1, value2, …);

39. EXTENDING AND INHERITANCE
• Extends can take an actual, already existing
CSS class/ID and add additional styling to
create a new one
SCSS

40. PARTIALS AND IMPORTS
• Partials are external SCSS files that style certain
components of your website
• Partials can then be imported in your main SCSS
file
• Partial file names always start with an underscore
(_)
• Partial files do not get directly compiled into CSS
files
• Partial styles can be overridden in the file that
imports them
(_!_)

41. PARTIALS AND IMPORTS
_header.scs
s
_footer.scss
style.scss
style.css

42. PARTIALS AND IMPORTS
_header.scs
s
_footer.scss
style.scss
style.css

43. CONDITIONAL STATEMENTS
• Similar to any other programming language,
conditional statements allow you to make
decisions based on one or any number of
conditions
• Conditional statements, variables and mixins
combined are powerful tools in aiding in the
creation of responsive layouts

44. CONDITIONAL STATEMENTS

45. CONDITIONAL STATEMENTS
Compiled
to

46. CONDITIONAL STATEMENTS
• Syntax
@if (condition) {
statements_if_cond_true;
} @else {
statements_if_cond_false;
}

47. SCSS RESPONSIVE EXAMPLE
• Build the following responsive website
template
Desktop
Mobile

48. SCSS RESPONSIVE EXAMPLE
• We start development “Mobile first”
HTML
SCSS

49. SCSS RESPONSIVE EXAMPLE

50. SCSS RESPONSIVE EXAMPLE

51. LESS
• Leaner Style Sheets (LESS) is a dynamic
preprocessor style sheet language that can be
compiled into Cascading Style Sheets (CSS)
• LESS is very similar to SASS/SCSS and will not
be covered in this course, mainly so to avoid
confusion

52. BIBLIOGRAPHY
• https://sass-lang.com/
• https://sass-lang.com/documentation/syntax
• https://www.freecodecamp.org/news/the-
complete-guide-to-scss-sass-30053c266b23/
• https://www.w3schools.com/sass/

53. COURSES
Available online at:
http://www.ael.utcluj.ro/
Information for Students -> Courses -> Web
Technologies