CSS vs SCSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. It's a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.

CSS was first proposed by Håkon Wium Lie on October 10, 1994. And the first W3C CSS Recommendation (CSS1) being released in 1996. It's designed to enable the separation of presentation and content, including layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file and reduce complexity and repetition in the structural content. The CSS specifications are maintained by the World Wide Web Consortium (W3C). CSS has a simple syntax and uses a number of English keywords to specify the names of various style properties. A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors and a declaration block.

Scss stands for Sassy Cascading Style Sheets. Scss can be separated by a semicolon and run on the same line. SCSS is a preprocessor which lets you use features that aren’t a part of the wider CSS standard yet, and provides better workflows for maintaining your stylesheets. With SCSS preprocessor, you can reduce the number of times you repeat yourself and ensure you’re writing clean, maintainable code for the future. Scss can take CSS code and work. SCSS is fully compatible with the syntax of CSS, while still supporting the full power of Sass.

Differences between CSS and SCSS

CSS is the styling language that your browser understands and uses to style web pages, whereas SCSS is a special type of file for SASS a program written in Ruby that assembles CSS style sheets for a browser.
SCSS helps you write your CSS codes much easier.
SCSS files are processed by the server running a web app to output a traditional CSS that your browser can understand.
CSS facilitates the publication of content in multiple presentation formats based on nominal parameters.
Scss is an extension of the syntax of CSS. That means that every valid CSS stylesheet is a valid SCSS file with the same meaning.
When CSS is used effectively, in terms of inheritance and "cascading", a global style sheet can be used to affect and style elements site-wide.
SCSS understands most CSS hacks and vendor-specific syntax, such as IE's old filter syntax. This syntax is enhanced with the Sass features. Files using this syntax have the .scss extension.
SCSS dry (don't repeat yourself) code is much better than wet code (write every time).
SCSS is developed on ruby on rails.
CSS helps web developers create a uniform look across several pages of a website.
In CSS, with a simple change of one line, a different style sheet can be used for the same page. This has advantages for accessibility, as well as providing the ability to tailor a page or site to different target devices.
It is irritating to manage child and parents selectors in CSS.
You may face an issue in CSS if you wish to change the complete color theme of the website. Because you have to change each and every color properties of selectors.
You can create variables in SCSS.
SCSS gets processed into CSS because our browsers just understand the CSS.
SCSS helps you to split your CSS into smaller, more maintainable portions.
SCSS mixin lets you make groups of CSS declarations that you want to reuse throughout your site.
SCSS let you do math in CSS easily.
CSS makes it easy to change styles across several pages at once.
CSS was written to style the HTML pages which grows more and more in the line of codes if the .html pages increases.
SCSS program written in Ruby that assembles CSS style sheets for a browser.
CSS is the styling language that your browser understands and uses to style web pages. SCSS is a special type of file.

#w3c Stories - 1 stories

CSS vs SCSS