12 Tweets 10 reads Jun 01, 2022
โšก What is SCSS Preprocessor? โšก
A thread ๐Ÿงตโ†“
๐Ÿ“Œ What is CSS Preprocessor?
โ†’ A CSS Preprocessor is a program that lets you generate CSS from the preprocessor's own unique syntax.
โ†’ There are many CSS preprocessors out there that will add some features that don't exist in pure CSS.
๐Ÿ“Œ What is SCSS Preprocessor?
โ†’ SCSS stands for Sassy Cascading Style Sheets also referred to as Sassy CSS due to its advanced features.
โ†’ It's like CSS with ๐—ฒ๐˜…๐˜๐—ฟ๐—ฎ ๐—ฝ๐—ผ๐˜„๐—ฒ๐—ฟ๐˜€.
๐Ÿ“Œ Features of SCSS:-
โ†’ SCSS Variables
โ†’ Partials & @๐—ถ๐—บ๐—ฝ๐—ผ๐—ฟ๐˜ directive
โ†’ Nesting
โ†’ @๐—ฐ๐—ผ๐—ป๐˜๐—ฒ๐—ป๐˜ directive (mixin, include)
โ†’ Functions
โ†’ SCSS Maps
๐Ÿ“Œ SCSS Variables
โ†’ You can assign a value to a name that begins with $, and then you can refer to that name instead of the value itself.
๐Ÿ“Œ Partials & Imports
โ†’ The @๐—ถ๐—บ๐—ฝ๐—ผ๐—ฟ๐˜ directive allows you to include the content of one file in another.
โ†’ The @๐—ถ๐—บ๐—ฝ๐—ผ๐—ฟ๐˜ directive imports the file and any variables or mixins defined in the imported file can be used in the main file.
๐Ÿ“Œ Nesting
โ†’ SCSS lets you nest CSS selectors in the same way as HTML.
๐Ÿ“Œ Mixins
โ†’ The @๐—บ๐—ถ๐˜…๐—ถ๐—ป directive lets you create CSS code that is to be reused throughout the website.
๐Ÿ“Œ Extend
โ†’ The @๐—ฒ๐˜…๐˜๐—ฒ๐—ป๐—ฑ directive lets you share a set of CSS properties from one selector to another.
๐Ÿ“Œ Functions
โ†’ SCSS Functions are very similar to functions that we have in JavaScript.
๐Ÿ“Œ SCSS Maps
โ†’ Similar to the map data structure in JavaScript. We define ๐—ธ๐—ฒ๐˜†: ๐˜ƒ๐—ฎ๐—น๐˜‚๐—ฒ pairs inside a map.
โ†’ ๐—บ๐—ฎ๐—ฝ-๐—ด๐—ฒ๐˜ - Returns the value for the specified key in the map.
That's it for this thread. Hope you like it. ๐Ÿ™Œ๐Ÿผ
- Hii I'm Aakash. ๐Ÿ‘‹๐Ÿฝ
- Sharing my journey and learnings. ๐Ÿš€
If you liked it, then you can follow me, @Aakash_codes โœ“ for more such content & resources.
Thanks for the support.๐Ÿ’œ

Loading suggestions...