What is the difference between CSS and SCSS

Question

I know CSS very well  but am confused about Sass  How is SCSS different from CSS  and if I use SCSS instead of CSS will it work the same

User · Accepted Answer

In addition to Idriss answer   CSS  In CSS we write code as depicted bellow  in full length   body   width  800px   color   ffffff    body content   width 750px   background  ffffff      SCSS  In SCSS we can shorten this code using a  mixin so we don   t have to write color and width properties again and again  We can define this through a function  similarly to PHP or other languages    color   ffffff   width  800px    mixin body   width   width   color   color    content    width   width    background  color         SASS  In SASS however  the whole structure is visually quicker and cleaner than SCSS    It is sensitive to white space when you are using copy and paste  It seems that it doesn t support inline CSS currently    color   ffffff  width  800px  stack  Helvetica  sans-serif  body   width   width   color   color   font  100   stack    content     width   width     background  color

User · Answer

Sass is a language that provides features to make it easier to deal with complex styling compared to editing raw  css  An example of such a feature is allowing definition of variables that can be re-used in different styles  The language has two alternative syntaxes   A JSON like syntax that is kept in files ending with  scss A YAML like syntax that is kept in files ending with  sass  Either of these must be compiled to  css files which are recognized by browsers  See https   sass-lang com  for further information

User · Answer

css has variables as well  You can use them like this   --primaryColor   ffffff  --width  800px   body       width  var --width       color  var --primaryColor      content      width  var --width       background  var --primaryColor

User · Answer

Variable definitions right            gt  SCSS  SASS --       gt  CSS          gt  LESS   All answers is good but question a little different than answers   about Sass  How is SCSS different from CSS    scss is well formed CSS3 syntax  uses sass preprocessor to create that   and if I use SCSS instead of CSS will it work the same  yes  if your ide supports sass preprocessor  than it will work same   Sass has two syntaxes  The most commonly used syntax is known as    SCSS     for    Sassy CSS      and is a superset of CSS3   s syntax  This means that every valid CSS3 stylesheet is valid SCSS as well  SCSS files use the extension  scss   The second  older syntax is known as the indented syntax  or just     sass      Inspired by Haml   s terseness  it   s intended for people who prefer conciseness over similarity to CSS  Instead of brackets and semicolons  it uses the indentation of lines to specify blocks  Files in the indented syntax use the extension  sass      Furher Information About      What Is A CSS Preprocessor   CSS in itself is devoid of complex logic and functionality which is required to write reusable and organized code  As a result  a developer is bound by limitations and would face extreme difficulty in code maintenance and scalability  especially when working on large projects involving extensive code and multiple CSS stylesheets  This is where CSS Preprocessors come to the rescue   A CSS Preprocessor is a tool used to extend the basic functionality of default vanilla CSS through its own scripting language  It helps us to use complex logical syntax like     variables  functions  mixins  code nesting  and inheritance to name a few  supercharging your vanilla CSS  By using CSS Preprocessors  you can seamlessly automate menial tasks  build reusable code snippets  avoid code repetition and bloating and write nested code blocks that are well organized and easy to read  However  browsers can only understand native vanilla CSS code and will be unable to interpret the CSS Preprocessor syntax  Therefore  the complex and advanced Preprocessor syntax needs to be first compiled into native CSS syntax which can then be interpreted by the browsers to avoid cross browser compatibility issues  While different Preprocessors have their own unique syntaxes  eventually all of them are compiled to the same native CSS code   Moving forward in the article  we will take a look at the 3 most popular CSS Preprocessors currently being used by developers around the world i e Sass  LESS  and Stylus  Before you decide the winner between Sass vs LESS vs Stylus  let us get to know them in detail first   Sass     Syntactically Awesome Style Sheets  Sass is the acronym for    Syntactically Awesome Style Sheets     Sass is not only the most popular CSS Preprocessor in the world but also one of the oldest  launched in 2006 by Hampton Catlin and later developed by Natalie Weizenbaum  Although Sass is written in Ruby language  a Precompiler LibSass allows Sass to be parsed in other languages and decouple it from Ruby  Sass has a massive active community and extensive learning resources available on the net for beginners  Thanks to its maturity  stability and powerful logical prowess  Sass has established itself to the forefront of CSS Preprocessor ahead of its rival peers   Sass can be written in 2 syntaxes either using Sass or SCSS  What is the difference between the two  Let   s find out   Syntax Declaration  Sass vs SCSS   SCSS stands for Sassy CSS  Unlike Sass  SCSS is not based on indentation   sass extension is used as original syntax for Sass  while SCSS offers a newer syntax with  scss extension  Unlike Sass  SCSS has curly braces and semicolons  just like CSS  Contrary to SCSS  Sass is difficult to read as it is quite deviant from CSS  Which is why SCSS it the more recommended Sass syntax as it is easier to read and closely resembles Native CSS while at the same time enjoying with power of Sass    Consider the example below with Sass vs SCSS syntax along with Compiled CSS code   Sass SYNTAX      font-color   fff      bg-color   00f       box       color   font-color       background   bg-color  SCSS SYNTAX      font-color   fff       bg-color   00f        box        color   font-color        background   bg-color          In both cases  be it Sass or SCSS  the compiled CSS code will be the same       box         color   fff        background   00f    Usage of Sass  Arguably the most Popular front end framework Bootstrap is written in Sass  Up until version 3  Bootstrap was written in LESS but bootstrap 4 adopted Sass and boosted its popularity  A few of the big companies using Sass are     Zapier  Uber  Airbnb and Kickstarter   LESS     Leaner Style Sheets  LESS is an acronym for    Leaner Stylesheets     It was released in 2009 by Alexis Sellier  3 years after the initial launch of Sass in 2006  While Sass is written in Ruby  LESS is written JavaScript  In fact  LESS is a JavaScript library that extends the functionality of native vanilla CSS with mixins  variables  nesting and rule set loop  Sass vs LESS has been a heated debate  It is no surprise that LESS is the strongest competitor to Sass and has the second-largest user base  However  When bootstrap dumped LESS in favor of Sass with the launch of Bootstrap 4  LESS has waned in popularity  One of the few disadvantages of LESS over Sass is that it does not support functions  Unlike Sass  LESS uses   to declare variables which might cause confusion with  media and  keyframes  However  One key advantage of LESS over Sass and Stylus or any other preprocessors  is the ease of adding it in your project  You can do that either by using NPM or by incorporating Less js file  Syntax Declaration  LESS Uses  less extension  Syntax of LESS is quite similar to SCSS with the exception that for declaring variables  instead of   sign  LESS uses      font-color   fff       bg-color   00f       box        color   font-color        background   bg-color         COMPILED CSS      box           color   fff          background   00f            Usage Of LESS The popular Bootstrap framework until the launch of version 4 was written in LESS  However  another popular framework called SEMANTIC UI is still written in LESS  Among the big companies using Sass are     Indiegogo  Patreon  and WeChat  Stylus  The stylus was launched in 2010 by former Node JS developer TJ Holowaychuk  nearly 4 years after the release of Sass and 1 year after the release of LESS  The stylus is written Node JS and fits perfectly with JS stack  The stylus was heavily influenced by the logical prowess of the Sass and simplicity of LESS  Even though Stylus is still popular with Node JS developers  it hasn   t managed to carve out a sizeable share for itself  One advantage of Stylus over Sass or LESS  is that it is armed with extremely powerful built-in functions and is capable of handling heavy computing   Syntax Declaration  Stylus Uses  styl extension  Stylus offers a great deal of flexibility in writing syntax  supports native CSS as well as allows omission of brackets colons and semicolons  Also  note that Stylus does not use   or   symbols for defining variables  Instead  Stylus uses the assignment operators to indicate a variable declaration   STYLUS SYNTAX WRITTEN LIKE NATIVE CSS  font-color    fff  bg-color    00f    box       color  font-color      background  bg-color      OR  STYLUS SYNTAX WITHOUT CURLY BRACES  font-color    fff  bg-color    00f    box      color  font-color      background  bg-color    OR  STYLUS SYNTAX WITHOUT COLONS AND SEMICOLONS  font-color    fff bg-color    00f   box      color font-color     background bg-color

User · Answer

And this is less   primarycolor   ffffff   width  800px   body   width   width   color   primarycolor    content    width   width    background  primarycolor

User · Answer

CSS is the styling language that any browser understands to style webpages  SCSS is a special type of file for SASS  a program written in Ruby that assembles CSS style sheets for a browser  and for information  SASS adds lots of additional functionality to CSS like variables  nesting and more which can make writing CSS easier and faster  SCSS files are processed by the server running a web app to output a traditional CSS that your browser can understand

[css] What is the difference between CSS and SCSS?

CSS

SCSS

SASS

Examples related to css

Examples related to sass