CSS is the styling language which is used to style web pages.\u00a0Initially, CSS was written to style the HTML pages which grows more and more in the line of codes if the HTML pages increases.<\/p>\n
As the project gets bigger, maintenance & readability of CSS code gets harder. CSS causes some problems like:<\/p>\n
A preprocessor helps us to deal with the above problems. It has some advantages over regular CSS. First, define what is a CSS preprocessor?\u00a0A program\/tool that has its own syntax that gets compiled later in standard CSS code.\u00a0A preprocessor has its own syntax to write easier as well as cleaner CSS code. Later, it gets rendered in a separate file to standard CSS, because browsers don\u2019t understand the syntax. There are completely different preprocessors like Sass<\/strong><\/em>, Less<\/strong><\/em>, and Stylus<\/strong><\/em>.<\/p>\n Sass (Syntactically Awesome Style Sheets) has two syntaxes. The most usually used syntax is understood as \u201cSCSS\u201d (for \u201cSassy CSS\u201d) and is a superset of CSS3\u2019s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss<\/strong><\/em>.\u00a0SCSS is a special type of file for SASS, a program written in Ruby that assembles CSS style sheets for a browser.\u00a0Using SCSS, we can add much additional functionality such as variables, nesting and more.<\/p>\n Standard CSS doesn\u2019t support nesting. We can\u2019t write a class inside another class. As the project gets bigger, this brings a readability problem and the structure doesn\u2019t look nice.<\/p>\n Like in other programming languages, we can use variables to store values and reuse them later.<\/p>\n <\/p>\n Mixins are Scss functions that group CSS declarations together. We can repeat them later like variables. We can see some differences in the code below.<\/p>\n We can see from the CSS below that the SCSS style is a lot more similar to regular CSS.<\/p>\n <\/p>\n Advantages of using Scss:<\/strong><\/span><\/p>\n The main advantage of using Scss is to save time and make writing CSS easier. You can use variables for unremarkably documented things like color, font-family, margin, etc.<\/p>\n Some handy features Scss provided are:<\/strong><\/p>\n CSS is the styling language which is used to style web pages.\u00a0Initially, CSS was written to style the HTML pages which grows more and more in the line of codes if the HTML pages increases. As the project gets bigger, maintenance & readability of CSS code gets harder. CSS causes some problems like: Big effort […]<\/p>\n","protected":false},"author":31,"featured_media":1401,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[18,5],"tags":[112,107],"yoast_head":"\nSCSS<\/span><\/h5>\n
<\/h3>\n
Difference between CSS and SCSS<\/h3>\n
Feature #1: Nesting<\/h4>\n
Feature #2: Variables<\/h4>\n
\/* SCSS *\/<\/span><\/h5>\n
$text-color: #f443a5;\r\nbody {\r\ncolor: $text-color;\r\n}<\/pre>\n<\/h4>\n
Feature #3: Mixins<\/h4>\n
\u00a0 \u00a0\/* SCSS *\/<\/span><\/h5>\n
$pink: #F443a5;\r\n$margin: 20px;\r\n\r\n\r\n.container {\r\nborder-color: $pink;\r\ncolor: darken($pink, 10%);\r\nwidth:300px; \r\nheight:300px;\r\n}\r\n.border {\r\npadding: $margin \/ 2;\r\nmargin: $margin \/ 2;\r\nborder-color: $ pink;\r\n}<\/pre>\n\/* CSS *\/ <\/span><\/h5>\n
.container {\r\nborder-color: #F443a5;\r\ncolor: #F443a5;\r\n\u00a0\u00a0width:200px; \u00a0\r\n\u00a0\u00a0\u00a0height:200px;\r\n}\r\n.border {\r\npadding: 8px;\r\nmargin: 8px;\r\n\u00a0border-color: #F443a5;\r\n}<\/pre>\n\n