What s the difference between SCSS and Sass

Question

From what I ve been reading  Sass is a language that makes CSS more powerful with variable and math support    What s the difference with SCSS  Is it supposed to be the same language  Similar  Different

User · Answer

Difference between SASS and SCSS article explains the difference in details. Don’t be confused by the SASS and SCSS options, although I also was initially, .scss is Sassy CSS and is the next generation of .sass.

If that didn’t make sense you can see the difference in code below.

/* SCSS */
$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color: darken($blue, 9%);
}

.border {
  padding: $margin / 2; margin: $margin / 2; border-color: $blue;
}

In the code above we use ; to separate the declarations. I’ve even added all the declarations for .border onto a single line to illustrate this point further. In contrast, the SASS code below must be on different lines with indentation and there is no use of the ;.

/* SASS */
$blue: #3bbfce
$margin: 16px

.content-navigation
  border-color: $blue
  color: darken($blue, 9%)

.border
  padding: $margin / 2
  margin: $margin / 2
  border-color: $blue

You can see from the CSS below that the SCSS style is a lot more similar to regular CSS than the older SASS approach.

/* CSS */
.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

I think most of the time these days if someone mentions that they are working with Sass they are referring to authoring in .scss rather than the traditional .sass way.

User · Answer

The compact answer   SCSS refers to the main syntax supported by the Sass CSS pre-processor     Files ending with  scss represent the standard syntax supported by Sass  SCSS is a superset of CSS  Files ending with  sass represent the  older  syntax supported by Sass originating in the Ruby world

User · Answer

Sass was the first one  and the syntax is a bit different  For example  including a mixin   Sass   mixinname   Scss   include mixinname     Sass ignores curly brackets and semicolons and lay on nesting  which I found more useful

User · Answer

From the homepage of the language     Sass has two syntaxes  The new main   syntax  as of Sass 3  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  Although no longer the   primary syntax  the indented syntax   will continue to be supported  Files   in the indented syntax use the   extension  sass    SASS is an interpreted language that spits out CSS  The structure of Sass looks like CSS  remotely   but it seems to me that the description is a bit misleading  it s not a replacement for CSS  or an extension  It s an interpreter which spits out CSS in the end   so Sass still has the limitations of normal CSS  but it masks them with simple code

User · Answer

The Sass  sass file is visually different from  scss file  e g   Example sass - sass is the older syntax   color  red   my-border  color    border  1px solid  color  body   background   color    my-border green    Example scss - sassy css is the new syntax as of Sass 3   color  red    mixin my-border  color      border  1px solid  color     body     background   color     include my-border green       Any valid CSS document can be converted to Sassy CSS  SCSS  simply by changing the extension from  css to  scss

User · Answer

Its syntax is different  and that s the main pro  or con  depending on your perspective     I ll try not to repeat much of what others said  you can easily google that but instead  I d like to say a couple of things from my experience using both  sometimes even in the same project   SASS pro    cleaner - if you are coming from Python  Ruby  you can even write props with symbol-like syntax  or even the CoffeeScript world  it will come very natural to you - writing mixins  functions and generally any reusable stuff in  sass is much  easier  and readable than in  scss  subjective     SASS cons   whitespace sensitive  subjective   I don t mind it in other languages but here in CSS it just bothers me  issues  copying  tab vs space war  etc   no inline rules  this was game breaking for me   you can t do body color  red like you can in  scss body  color  red  importing other vendor stuff  copying vanilla CSS snippets - not impossible but very boring after some time  The solution is to either have  scss files  alongside with  sass files  in your project or to convert them to  sass    Other than this - they do the same job    Now  what I like to do is to write mixins and variables in  sass and code that will actually compile to CSS in  scss if possible  ie Visual studio doesn t have support for  sass but whenever I work on Rails projects I usually combine two of them  not in one file ofc     Lately  I m considering giving Stylus a chance  for a full-time CSS preprocessor  because it allows you to combine two syntaxes in one file  among some other features   That may not be a good direction for a team to take but when you are maintaining it alone - it s ok  The stylus is actually most flexible when syntax is in question    And finaly mixin for  scss vs  sass syntax comparison       SCSS  mixin cover      color  red     for  i from 1 through 5        amp  bg-cover   i    background-color  adjust-hue  color  15deg    i           wrapper    include cover        SASS  cover    color  red    for  i from 1 through 5      amp  bg-cover   i        background-color  adjust-hue  color  15deg    i   wrapper    cover

User · Answer

SASS is Syntactically Awesome Style Sheets and is an extension of CSS which provides the features of nested rules  inheritance  Mixins whereas SCSS is Sassy Cascaded Style Sheets which is similar to that of CSS and fills the gaps and incompatibilities between CSS and SASS  It was licensed under the MIT license  This article has more about the differences https   www educba com sass-vs-scss

User · Answer

SCSS is the new syntax for Sass  In Extension wise   sass for the SASS while  scss for the SCSS  Here SCSS has more logical and complex approach for coding than SASS  Therefore  for a newbie to software field the better choice is SCSS

User · Answer

Sass is a CSS pre-processor with syntax advancements  Style sheets in the advanced syntax are processed by the program  and turned into regular CSS style sheets  However  they do not extend the CSS standard itself  CSS variables are supported and can be utilized but not as well as pre-processor variables  For the difference between SCSS and Sass  this text on the Sass documentation page should answer the question   There are two syntaxes available for Sass  The first  known as SCSS  Sassy CSS  and used throughout this reference  is an extension of the syntax of CSS  This means that every valid CSS stylesheet is a valid SCSS file with the same meaning  This syntax is enhanced with the Sass features described below  Files using this syntax have the  scss extension  The second and older syntax  known as the indented syntax  or sometimes just    Sass      provides a more concise way of writing CSS  It uses indentation rather than brackets to indicate nesting of selectors  and newlines rather than semicolons to separate properties  Files using this syntax have the  sass extension   However  all this works only with the Sass pre-compiler which in the end creates CSS  It is not an extension to the CSS standard itself

User · Answer

The basic difference is the syntax  While SASS has a loose syntax with white space and no semicolons  the SCSS resembles more to CSS

User · Answer

I m one of the developers who helped create Sass    The difference is UI  Underneath the textual exterior they are identical  This is why sass and scss files can import each other  Actually  Sass has four syntax parsers  scss  sass  CSS  and less  All of these convert a different syntax into an Abstract Syntax Tree which is further processed into CSS output or even onto one of the other formats via the sass-convert tool   Use the syntax you like the best  both are fully supported and you can change between them later if you change your mind

User · Answer

Sass  Syntactically Awesome StyleSheets  have two syntaxes    a newer  SCSS  Sassy CSS  and an older  original  indent syntax  which is the original Sass and is also called Sass    So they are both part of Sass preprocessor with two different possible syntaxes   The most important difference between SCSS and original Sass   SCSS    Syntax is similar to CSS  so much that every regular valid CSS3 is also valid SCSS  but the relationship in the other direction obviously does not happen  Uses braces    Uses semi-colons   Assignment sign is   To create a mixin it uses the  mixin directive To use mixin it precedes it with the  include directive Files have the  scss extension    Original Sass    Syntax is similar to Ruby No braces No strict indentation No semi-colons Assignment sign is   instead of   To create a mixin it uses the   sign To use mixin it precedes it with the   sign Files have the  sass extension    Some prefer Sass  the original syntax - while others prefer SCSS  Either way  but it is worth noting that Sass   s indented syntax has not been and will never be deprecated   Conversions with sass-convert     Convert Sass to SCSS   sass-convert style sass style scss    Convert SCSS to Sass   sass-convert style scss style sass   The Sass and SCSS documentation

User · Answer

Original sass is ruby syntax-like  similar to ruby  jade etc     In those syntaxes  we don t use     instead we go with white spaces  also no usage of       In scss syntaxes are more like CSS  but with getting more options like  nesting  declaring  etc  similar to less and other pre-processing CSS      They basically do the same thing  but I put couple of lines of each to see the syntax difference  look at the        and spaces   SASS    width  100px  color  green  div   width   width   background-color   color   SCSS    width  100px   color  green   div     width   width    background-color   color

User · Answer

SASS stands for Syntactically Awesome StyleSheets  It is an extension   of CSS that adds power and elegance to the basic language  SASS is   newly named as SCSS with some chages  but the old one SASS is also   there  Before you use SCSS or SASS please see the below difference      An example of some SCSS and SASS syntax   SCSS   font-stack     Helvetica  sans-serif   primary-color   333   body     font  100   font-stack    color   primary-color       Mixins  mixin transform  property      -webkit-transform   property        -ms-transform   property            transform   property      box    include transform rotate 30deg        SASS   font-stack     Helvetica  sans-serif  primary-color   333  body   font  100   font-stack   color   primary-color    Mixins  transform  property    -webkit-transform   property   -ms-transform       property   transform           property   box    transform rotate 30deg     Output CSS after Compilation Same for Both   body     font  100  Helvetica  sans-serif    color   333      Mixins  box     -webkit-transform  rotate 30deg     -ms-transform  rotate 30deg     transform  rotate 30deg       For more guide you can see the official website

[css] What's the difference between SCSS and Sass?

Examples related to css

Examples related to sass