โก What is SCSS Preprocessor? โก
A thread ๐งตโ
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.
โ 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 ๐ฒ๐ ๐๐ฟ๐ฎ ๐ฝ๐ผ๐๐ฒ๐ฟ๐.
โ 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
โ 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.
โ 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.
โ 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.
โ 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.
โ 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.
โ 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 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.
โ 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.๐
- 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...