What’s the difference between SCSS and CSS and why we should use SCSS
Hi everyone!! Welcome to my blog. I will explain why you should SCSS in 4 examples.
1. Typing system
2. functions
3. Built-In Modules
4. variables
1. Typing System
SCSS typing system makes more easy and quick for you like for example.
the typing system is more easily read the code and understand. SCSS compress all CSS codes
2. Functions
SCSS has a bunch of function like in the Javascript and other programming languages that means you can menage you CSS code functionality
SCSS function types with examples:
@use “sass:list”
@use “sass:meta”
@use “sass:string”/// Return a copy of $list with all elements for which $condition returns `true`
/// removed.
@function remove-where($list, $condition)
$new-list: ()
$separator: list.separator($list)
@each $element in $list
@if not meta.call($condition, $element)
$new-list: list.append($new-list, $element, $separator: $separator)@return $new-list
$fonts: Tahoma, Geneva, “Helvetica Neue”, Helvetica, Arial, sans-serif.content
@function contains-helvetica($string)
@return string.index($string, “Helvetica”)font-family: remove-where($fonts, meta.get-function(“contains-helvetica”))
3. Built-In Modules
Sass provides many built-in modules which contain useful functions like color, list, map, math, meta, selector, and string.
for more information, you can visit the
Resources: https://sass-lang.com/documentation/modules
4. variables
yes, you can use variables in SCSS like programming languages for example.
Actually, that seems not to make sense on the small website but think about you got a 100-page huge website like amazon.com and probably if you wanna try to change the whole details on the page you should spend few hours but SCSS figure out that quickly.
and finally, we finish the 4 crucial points about SCSS if you like that article you can see my whole blog post here yusufpıçakcı.com or my medium account
if you want to dispute that subject please type a comment and share your opinion.
Bonus!!
Good Resources for learning SCSS :
https://sass-lang.com/documentation
https://www.udemy.com/course/advanced-css-and-sass/
https://www.youtube.com/watch?v=Zz6eOVaaelI
https://en.wikipedia.org/wiki/Sass_(stylesheet_language)
https://www.w3schools.com/sass/
