What's the difference between SCSS and Sass?












1438














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?










share|improve this question





























    1438














    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?










    share|improve this question



























      1438












      1438








      1438


      324





      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?










      share|improve this 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?







      css sass






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Jun 1 '13 at 21:34









      bookcasey

      29.7k106389




      29.7k106389










      asked Apr 13 '11 at 19:23









      bruno077bruno077

      10.9k63347




      10.9k63347
























          12 Answers
          12






          active

          oldest

          votes


















          1455














          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.



          The main reason for this is the addition of features that CSS painfully lacks (like variables).



          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.






          share|improve this answer



















          • 3




            English is not my first language and i did'nt understand on thing.. .scss or .sass will not be suported in the future?
            – Daniel Faria
            Mar 19 '14 at 20:44










          • If you are wondering which syntax you should use? There's no recommendation on this it's just personal preference.
            – 0x1ad2
            May 18 '16 at 8:36






          • 33




            When choosing the syntax, keep in mind that only scss allows copying and pasting css from stackoverflow and the browsers' development tools, whereas in sass you always have to adjust the syntax
            – fishbone
            Nov 23 '16 at 6:49








          • 3




            CSS3 has variables: developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
            – Jersh
            Feb 11 '17 at 21:29






          • 5




            The old .sass sounds much like a YAML file.
            – Ciasto piekarz
            Mar 23 '18 at 2:44



















          502














          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.






          share|improve this answer



















          • 31




            Excuse me? Did I read that right? Can Sass actually import Less files correctly? Is there any synergy between mixins/variables?
            – pilau
            Jun 1 '13 at 13:30






          • 7




            Similarity to standard CSS may be more important in group environments where there are people who need to read your code, but only occasionally, and they don't have time/interest to learn a whole new syntax.
            – c roald
            Aug 16 '14 at 21:25



















          297














          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.






          share|improve this answer























          • @Novocaine +1, I agree. As a C++ programmer, I prefer the brackets and semicolons. BTW, I have a question, does the conversion from .scss to .css the same as .css to .scss?
            – JW.ZG
            Feb 2 '16 at 4:42










          • We can see the difference here sass-lang.com/guide
            – Anthuan Vásquez
            Nov 9 '16 at 6:47










          • This is more what I care about compare with the answers above... Too lazy to read ;-)
            – LYu
            Sep 21 '18 at 21:04



















          64














          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 {
          &.bg-cover#{$i} { background-color: adjust-hue($color, 15deg * $i) }
          }
          }
          .wrapper { @include cover }


          // SASS
          =cover
          $color: red
          @for $i from 1 through 5
          &.bg-cover#{$i}
          background-color: adjust-hue($color, 15deg * $i)
          .wrapper
          +cover





          share|improve this answer



















          • 2




            @cimmanon It features pros and cons, spelled out clearly. That is the difference between this and other answers. I upvoted to pull out of the red. I thought it was useful even though it has the usual venn diagram of answer overlap that every other SO post has. This could be more useful to someone just making the choice on the two paths. I also think it's a bit better than the accepted answer because it actually shows the difference of the language instead of just saying "Sass is different because it's not SCSS", which to me is useless. I could do without the personal usage stuff, but still :)
            – coblr
            May 13 '15 at 22:01



















          50














          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.






          share|improve this answer































            46














            Sass (Syntactically Awesome StyleSheets) have two syntaxes:




            • a newer: SCSS (Sassy CSS)

            • and an older, original: indent syntax, wich 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 differents between SCSS and original Sass:



            SCSS:




            • It syntax is similar to CSS.

            • Use braces {}.

            • Use semi-colons ;.

            • Variable sign in SCSS is $.

            • Aassignment sign in SCSS is :.

            • Files using this syntax have the .scss extension.


            Original Sass:




            • It syntax is similar to Ruby.

            • Here no uses of braces.

            • No strict indentation.

            • No semi-colons.

            • Variable sign in Sass is ! instead of $.

            • Assignment sign in Sass is = instead of :.

            • Files using this syntax have the .sass extension.


            These are two syntaxes available for Sass.



            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


            SASS REFERENCE






            share|improve this answer



















            • 5




              Strange that such clear and concise answer has such less votes than others. I have been going through piles of sources to understand what are the differences between Sass and Scss and finally found this that instantly enlighten me. Good job except a few spelling/grammar errors.
              – tnkh
              Nov 6 '17 at 2:50






            • 1




              @TonyNg thank you. I'm glad I could help you. Regarding the points, it is so sure because I answered very late – about 6 years after asking questions. Feel free to correct me, where I made spelling or grammatical errors.
              – simhumileco
              Nov 6 '17 at 10:47





















            20














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






            share|improve this answer































              10














              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;
              }





              share|improve this answer































                9














                Sass was the first one, and The syntax is a bit diffrent.
                For example, including a mixin:



                Sass: +mixinname()
                Scss: @include mixinname()


                Sass ignores curly brackets and semi colons and lay on nesting, which I found more useful.






                share|improve this answer





























                  7














                  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.






                  share|improve this answer





























                    6















                    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.




                    enter image description here



                    Eample 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 refer official website






                    share|improve this answer































                      3














                      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.






                      share|improve this answer






















                        protected by cimmanon Jan 31 '16 at 16:33



                        Thank you for your interest in this question.
                        Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).



                        Would you like to answer one of these unanswered questions instead?














                        12 Answers
                        12






                        active

                        oldest

                        votes








                        12 Answers
                        12






                        active

                        oldest

                        votes









                        active

                        oldest

                        votes






                        active

                        oldest

                        votes









                        1455














                        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.



                        The main reason for this is the addition of features that CSS painfully lacks (like variables).



                        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.






                        share|improve this answer



















                        • 3




                          English is not my first language and i did'nt understand on thing.. .scss or .sass will not be suported in the future?
                          – Daniel Faria
                          Mar 19 '14 at 20:44










                        • If you are wondering which syntax you should use? There's no recommendation on this it's just personal preference.
                          – 0x1ad2
                          May 18 '16 at 8:36






                        • 33




                          When choosing the syntax, keep in mind that only scss allows copying and pasting css from stackoverflow and the browsers' development tools, whereas in sass you always have to adjust the syntax
                          – fishbone
                          Nov 23 '16 at 6:49








                        • 3




                          CSS3 has variables: developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
                          – Jersh
                          Feb 11 '17 at 21:29






                        • 5




                          The old .sass sounds much like a YAML file.
                          – Ciasto piekarz
                          Mar 23 '18 at 2:44
















                        1455














                        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.



                        The main reason for this is the addition of features that CSS painfully lacks (like variables).



                        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.






                        share|improve this answer



















                        • 3




                          English is not my first language and i did'nt understand on thing.. .scss or .sass will not be suported in the future?
                          – Daniel Faria
                          Mar 19 '14 at 20:44










                        • If you are wondering which syntax you should use? There's no recommendation on this it's just personal preference.
                          – 0x1ad2
                          May 18 '16 at 8:36






                        • 33




                          When choosing the syntax, keep in mind that only scss allows copying and pasting css from stackoverflow and the browsers' development tools, whereas in sass you always have to adjust the syntax
                          – fishbone
                          Nov 23 '16 at 6:49








                        • 3




                          CSS3 has variables: developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
                          – Jersh
                          Feb 11 '17 at 21:29






                        • 5




                          The old .sass sounds much like a YAML file.
                          – Ciasto piekarz
                          Mar 23 '18 at 2:44














                        1455












                        1455








                        1455






                        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.



                        The main reason for this is the addition of features that CSS painfully lacks (like variables).



                        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.






                        share|improve this 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.



                        The main reason for this is the addition of features that CSS painfully lacks (like variables).



                        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.







                        share|improve this answer














                        share|improve this answer



                        share|improve this answer








                        edited Jan 26 '17 at 20:05









                        MauroPorrasP

                        2,34342441




                        2,34342441










                        answered Apr 13 '11 at 19:25







                        anon















                        • 3




                          English is not my first language and i did'nt understand on thing.. .scss or .sass will not be suported in the future?
                          – Daniel Faria
                          Mar 19 '14 at 20:44










                        • If you are wondering which syntax you should use? There's no recommendation on this it's just personal preference.
                          – 0x1ad2
                          May 18 '16 at 8:36






                        • 33




                          When choosing the syntax, keep in mind that only scss allows copying and pasting css from stackoverflow and the browsers' development tools, whereas in sass you always have to adjust the syntax
                          – fishbone
                          Nov 23 '16 at 6:49








                        • 3




                          CSS3 has variables: developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
                          – Jersh
                          Feb 11 '17 at 21:29






                        • 5




                          The old .sass sounds much like a YAML file.
                          – Ciasto piekarz
                          Mar 23 '18 at 2:44














                        • 3




                          English is not my first language and i did'nt understand on thing.. .scss or .sass will not be suported in the future?
                          – Daniel Faria
                          Mar 19 '14 at 20:44










                        • If you are wondering which syntax you should use? There's no recommendation on this it's just personal preference.
                          – 0x1ad2
                          May 18 '16 at 8:36






                        • 33




                          When choosing the syntax, keep in mind that only scss allows copying and pasting css from stackoverflow and the browsers' development tools, whereas in sass you always have to adjust the syntax
                          – fishbone
                          Nov 23 '16 at 6:49








                        • 3




                          CSS3 has variables: developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
                          – Jersh
                          Feb 11 '17 at 21:29






                        • 5




                          The old .sass sounds much like a YAML file.
                          – Ciasto piekarz
                          Mar 23 '18 at 2:44








                        3




                        3




                        English is not my first language and i did'nt understand on thing.. .scss or .sass will not be suported in the future?
                        – Daniel Faria
                        Mar 19 '14 at 20:44




                        English is not my first language and i did'nt understand on thing.. .scss or .sass will not be suported in the future?
                        – Daniel Faria
                        Mar 19 '14 at 20:44












                        If you are wondering which syntax you should use? There's no recommendation on this it's just personal preference.
                        – 0x1ad2
                        May 18 '16 at 8:36




                        If you are wondering which syntax you should use? There's no recommendation on this it's just personal preference.
                        – 0x1ad2
                        May 18 '16 at 8:36




                        33




                        33




                        When choosing the syntax, keep in mind that only scss allows copying and pasting css from stackoverflow and the browsers' development tools, whereas in sass you always have to adjust the syntax
                        – fishbone
                        Nov 23 '16 at 6:49






                        When choosing the syntax, keep in mind that only scss allows copying and pasting css from stackoverflow and the browsers' development tools, whereas in sass you always have to adjust the syntax
                        – fishbone
                        Nov 23 '16 at 6:49






                        3




                        3




                        CSS3 has variables: developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
                        – Jersh
                        Feb 11 '17 at 21:29




                        CSS3 has variables: developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
                        – Jersh
                        Feb 11 '17 at 21:29




                        5




                        5




                        The old .sass sounds much like a YAML file.
                        – Ciasto piekarz
                        Mar 23 '18 at 2:44




                        The old .sass sounds much like a YAML file.
                        – Ciasto piekarz
                        Mar 23 '18 at 2:44













                        502














                        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.






                        share|improve this answer



















                        • 31




                          Excuse me? Did I read that right? Can Sass actually import Less files correctly? Is there any synergy between mixins/variables?
                          – pilau
                          Jun 1 '13 at 13:30






                        • 7




                          Similarity to standard CSS may be more important in group environments where there are people who need to read your code, but only occasionally, and they don't have time/interest to learn a whole new syntax.
                          – c roald
                          Aug 16 '14 at 21:25
















                        502














                        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.






                        share|improve this answer



















                        • 31




                          Excuse me? Did I read that right? Can Sass actually import Less files correctly? Is there any synergy between mixins/variables?
                          – pilau
                          Jun 1 '13 at 13:30






                        • 7




                          Similarity to standard CSS may be more important in group environments where there are people who need to read your code, but only occasionally, and they don't have time/interest to learn a whole new syntax.
                          – c roald
                          Aug 16 '14 at 21:25














                        502












                        502








                        502






                        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.






                        share|improve this 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.







                        share|improve this answer














                        share|improve this answer



                        share|improve this answer








                        edited Mar 23 '14 at 0:54









                        fotanus

                        13.4k76195




                        13.4k76195










                        answered Apr 20 '11 at 15:16









                        chriseppsteinchriseppstein

                        7,55212117




                        7,55212117








                        • 31




                          Excuse me? Did I read that right? Can Sass actually import Less files correctly? Is there any synergy between mixins/variables?
                          – pilau
                          Jun 1 '13 at 13:30






                        • 7




                          Similarity to standard CSS may be more important in group environments where there are people who need to read your code, but only occasionally, and they don't have time/interest to learn a whole new syntax.
                          – c roald
                          Aug 16 '14 at 21:25














                        • 31




                          Excuse me? Did I read that right? Can Sass actually import Less files correctly? Is there any synergy between mixins/variables?
                          – pilau
                          Jun 1 '13 at 13:30






                        • 7




                          Similarity to standard CSS may be more important in group environments where there are people who need to read your code, but only occasionally, and they don't have time/interest to learn a whole new syntax.
                          – c roald
                          Aug 16 '14 at 21:25








                        31




                        31




                        Excuse me? Did I read that right? Can Sass actually import Less files correctly? Is there any synergy between mixins/variables?
                        – pilau
                        Jun 1 '13 at 13:30




                        Excuse me? Did I read that right? Can Sass actually import Less files correctly? Is there any synergy between mixins/variables?
                        – pilau
                        Jun 1 '13 at 13:30




                        7




                        7




                        Similarity to standard CSS may be more important in group environments where there are people who need to read your code, but only occasionally, and they don't have time/interest to learn a whole new syntax.
                        – c roald
                        Aug 16 '14 at 21:25




                        Similarity to standard CSS may be more important in group environments where there are people who need to read your code, but only occasionally, and they don't have time/interest to learn a whole new syntax.
                        – c roald
                        Aug 16 '14 at 21:25











                        297














                        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.






                        share|improve this answer























                        • @Novocaine +1, I agree. As a C++ programmer, I prefer the brackets and semicolons. BTW, I have a question, does the conversion from .scss to .css the same as .css to .scss?
                          – JW.ZG
                          Feb 2 '16 at 4:42










                        • We can see the difference here sass-lang.com/guide
                          – Anthuan Vásquez
                          Nov 9 '16 at 6:47










                        • This is more what I care about compare with the answers above... Too lazy to read ;-)
                          – LYu
                          Sep 21 '18 at 21:04
















                        297














                        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.






                        share|improve this answer























                        • @Novocaine +1, I agree. As a C++ programmer, I prefer the brackets and semicolons. BTW, I have a question, does the conversion from .scss to .css the same as .css to .scss?
                          – JW.ZG
                          Feb 2 '16 at 4:42










                        • We can see the difference here sass-lang.com/guide
                          – Anthuan Vásquez
                          Nov 9 '16 at 6:47










                        • This is more what I care about compare with the answers above... Too lazy to read ;-)
                          – LYu
                          Sep 21 '18 at 21:04














                        297












                        297








                        297






                        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.






                        share|improve this 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.







                        share|improve this answer














                        share|improve this answer



                        share|improve this answer








                        edited Aug 3 '18 at 21:15









                        surfmuggle

                        3,74752859




                        3,74752859










                        answered Nov 30 '14 at 3:05









                        Anthuan VásquezAnthuan Vásquez

                        3,101188




                        3,101188












                        • @Novocaine +1, I agree. As a C++ programmer, I prefer the brackets and semicolons. BTW, I have a question, does the conversion from .scss to .css the same as .css to .scss?
                          – JW.ZG
                          Feb 2 '16 at 4:42










                        • We can see the difference here sass-lang.com/guide
                          – Anthuan Vásquez
                          Nov 9 '16 at 6:47










                        • This is more what I care about compare with the answers above... Too lazy to read ;-)
                          – LYu
                          Sep 21 '18 at 21:04


















                        • @Novocaine +1, I agree. As a C++ programmer, I prefer the brackets and semicolons. BTW, I have a question, does the conversion from .scss to .css the same as .css to .scss?
                          – JW.ZG
                          Feb 2 '16 at 4:42










                        • We can see the difference here sass-lang.com/guide
                          – Anthuan Vásquez
                          Nov 9 '16 at 6:47










                        • This is more what I care about compare with the answers above... Too lazy to read ;-)
                          – LYu
                          Sep 21 '18 at 21:04
















                        @Novocaine +1, I agree. As a C++ programmer, I prefer the brackets and semicolons. BTW, I have a question, does the conversion from .scss to .css the same as .css to .scss?
                        – JW.ZG
                        Feb 2 '16 at 4:42




                        @Novocaine +1, I agree. As a C++ programmer, I prefer the brackets and semicolons. BTW, I have a question, does the conversion from .scss to .css the same as .css to .scss?
                        – JW.ZG
                        Feb 2 '16 at 4:42












                        We can see the difference here sass-lang.com/guide
                        – Anthuan Vásquez
                        Nov 9 '16 at 6:47




                        We can see the difference here sass-lang.com/guide
                        – Anthuan Vásquez
                        Nov 9 '16 at 6:47












                        This is more what I care about compare with the answers above... Too lazy to read ;-)
                        – LYu
                        Sep 21 '18 at 21:04




                        This is more what I care about compare with the answers above... Too lazy to read ;-)
                        – LYu
                        Sep 21 '18 at 21:04











                        64














                        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 {
                        &.bg-cover#{$i} { background-color: adjust-hue($color, 15deg * $i) }
                        }
                        }
                        .wrapper { @include cover }


                        // SASS
                        =cover
                        $color: red
                        @for $i from 1 through 5
                        &.bg-cover#{$i}
                        background-color: adjust-hue($color, 15deg * $i)
                        .wrapper
                        +cover





                        share|improve this answer



















                        • 2




                          @cimmanon It features pros and cons, spelled out clearly. That is the difference between this and other answers. I upvoted to pull out of the red. I thought it was useful even though it has the usual venn diagram of answer overlap that every other SO post has. This could be more useful to someone just making the choice on the two paths. I also think it's a bit better than the accepted answer because it actually shows the difference of the language instead of just saying "Sass is different because it's not SCSS", which to me is useless. I could do without the personal usage stuff, but still :)
                          – coblr
                          May 13 '15 at 22:01
















                        64














                        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 {
                        &.bg-cover#{$i} { background-color: adjust-hue($color, 15deg * $i) }
                        }
                        }
                        .wrapper { @include cover }


                        // SASS
                        =cover
                        $color: red
                        @for $i from 1 through 5
                        &.bg-cover#{$i}
                        background-color: adjust-hue($color, 15deg * $i)
                        .wrapper
                        +cover





                        share|improve this answer



















                        • 2




                          @cimmanon It features pros and cons, spelled out clearly. That is the difference between this and other answers. I upvoted to pull out of the red. I thought it was useful even though it has the usual venn diagram of answer overlap that every other SO post has. This could be more useful to someone just making the choice on the two paths. I also think it's a bit better than the accepted answer because it actually shows the difference of the language instead of just saying "Sass is different because it's not SCSS", which to me is useless. I could do without the personal usage stuff, but still :)
                          – coblr
                          May 13 '15 at 22:01














                        64












                        64








                        64






                        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 {
                        &.bg-cover#{$i} { background-color: adjust-hue($color, 15deg * $i) }
                        }
                        }
                        .wrapper { @include cover }


                        // SASS
                        =cover
                        $color: red
                        @for $i from 1 through 5
                        &.bg-cover#{$i}
                        background-color: adjust-hue($color, 15deg * $i)
                        .wrapper
                        +cover





                        share|improve this 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 {
                        &.bg-cover#{$i} { background-color: adjust-hue($color, 15deg * $i) }
                        }
                        }
                        .wrapper { @include cover }


                        // SASS
                        =cover
                        $color: red
                        @for $i from 1 through 5
                        &.bg-cover#{$i}
                        background-color: adjust-hue($color, 15deg * $i)
                        .wrapper
                        +cover






                        share|improve this answer














                        share|improve this answer



                        share|improve this answer








                        edited May 13 '18 at 10:54









                        MLavoie

                        6,96172242




                        6,96172242










                        answered May 13 '15 at 14:16









                        DropsDrops

                        1,6721116




                        1,6721116








                        • 2




                          @cimmanon It features pros and cons, spelled out clearly. That is the difference between this and other answers. I upvoted to pull out of the red. I thought it was useful even though it has the usual venn diagram of answer overlap that every other SO post has. This could be more useful to someone just making the choice on the two paths. I also think it's a bit better than the accepted answer because it actually shows the difference of the language instead of just saying "Sass is different because it's not SCSS", which to me is useless. I could do without the personal usage stuff, but still :)
                          – coblr
                          May 13 '15 at 22:01














                        • 2




                          @cimmanon It features pros and cons, spelled out clearly. That is the difference between this and other answers. I upvoted to pull out of the red. I thought it was useful even though it has the usual venn diagram of answer overlap that every other SO post has. This could be more useful to someone just making the choice on the two paths. I also think it's a bit better than the accepted answer because it actually shows the difference of the language instead of just saying "Sass is different because it's not SCSS", which to me is useless. I could do without the personal usage stuff, but still :)
                          – coblr
                          May 13 '15 at 22:01








                        2




                        2




                        @cimmanon It features pros and cons, spelled out clearly. That is the difference between this and other answers. I upvoted to pull out of the red. I thought it was useful even though it has the usual venn diagram of answer overlap that every other SO post has. This could be more useful to someone just making the choice on the two paths. I also think it's a bit better than the accepted answer because it actually shows the difference of the language instead of just saying "Sass is different because it's not SCSS", which to me is useless. I could do without the personal usage stuff, but still :)
                        – coblr
                        May 13 '15 at 22:01




                        @cimmanon It features pros and cons, spelled out clearly. That is the difference between this and other answers. I upvoted to pull out of the red. I thought it was useful even though it has the usual venn diagram of answer overlap that every other SO post has. This could be more useful to someone just making the choice on the two paths. I also think it's a bit better than the accepted answer because it actually shows the difference of the language instead of just saying "Sass is different because it's not SCSS", which to me is useless. I could do without the personal usage stuff, but still :)
                        – coblr
                        May 13 '15 at 22:01











                        50














                        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.






                        share|improve this answer




























                          50














                          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.






                          share|improve this answer


























                            50












                            50








                            50






                            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.






                            share|improve this 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.







                            share|improve this answer














                            share|improve this answer



                            share|improve this answer








                            edited Aug 8 '13 at 19:52









                            Andrew Nesbitt

                            5,20212430




                            5,20212430










                            answered Apr 13 '11 at 19:27









                            BlenderBlender

                            206k36334400




                            206k36334400























                                46














                                Sass (Syntactically Awesome StyleSheets) have two syntaxes:




                                • a newer: SCSS (Sassy CSS)

                                • and an older, original: indent syntax, wich 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 differents between SCSS and original Sass:



                                SCSS:




                                • It syntax is similar to CSS.

                                • Use braces {}.

                                • Use semi-colons ;.

                                • Variable sign in SCSS is $.

                                • Aassignment sign in SCSS is :.

                                • Files using this syntax have the .scss extension.


                                Original Sass:




                                • It syntax is similar to Ruby.

                                • Here no uses of braces.

                                • No strict indentation.

                                • No semi-colons.

                                • Variable sign in Sass is ! instead of $.

                                • Assignment sign in Sass is = instead of :.

                                • Files using this syntax have the .sass extension.


                                These are two syntaxes available for Sass.



                                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


                                SASS REFERENCE






                                share|improve this answer



















                                • 5




                                  Strange that such clear and concise answer has such less votes than others. I have been going through piles of sources to understand what are the differences between Sass and Scss and finally found this that instantly enlighten me. Good job except a few spelling/grammar errors.
                                  – tnkh
                                  Nov 6 '17 at 2:50






                                • 1




                                  @TonyNg thank you. I'm glad I could help you. Regarding the points, it is so sure because I answered very late – about 6 years after asking questions. Feel free to correct me, where I made spelling or grammatical errors.
                                  – simhumileco
                                  Nov 6 '17 at 10:47


















                                46














                                Sass (Syntactically Awesome StyleSheets) have two syntaxes:




                                • a newer: SCSS (Sassy CSS)

                                • and an older, original: indent syntax, wich 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 differents between SCSS and original Sass:



                                SCSS:




                                • It syntax is similar to CSS.

                                • Use braces {}.

                                • Use semi-colons ;.

                                • Variable sign in SCSS is $.

                                • Aassignment sign in SCSS is :.

                                • Files using this syntax have the .scss extension.


                                Original Sass:




                                • It syntax is similar to Ruby.

                                • Here no uses of braces.

                                • No strict indentation.

                                • No semi-colons.

                                • Variable sign in Sass is ! instead of $.

                                • Assignment sign in Sass is = instead of :.

                                • Files using this syntax have the .sass extension.


                                These are two syntaxes available for Sass.



                                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


                                SASS REFERENCE






                                share|improve this answer



















                                • 5




                                  Strange that such clear and concise answer has such less votes than others. I have been going through piles of sources to understand what are the differences between Sass and Scss and finally found this that instantly enlighten me. Good job except a few spelling/grammar errors.
                                  – tnkh
                                  Nov 6 '17 at 2:50






                                • 1




                                  @TonyNg thank you. I'm glad I could help you. Regarding the points, it is so sure because I answered very late – about 6 years after asking questions. Feel free to correct me, where I made spelling or grammatical errors.
                                  – simhumileco
                                  Nov 6 '17 at 10:47
















                                46












                                46








                                46






                                Sass (Syntactically Awesome StyleSheets) have two syntaxes:




                                • a newer: SCSS (Sassy CSS)

                                • and an older, original: indent syntax, wich 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 differents between SCSS and original Sass:



                                SCSS:




                                • It syntax is similar to CSS.

                                • Use braces {}.

                                • Use semi-colons ;.

                                • Variable sign in SCSS is $.

                                • Aassignment sign in SCSS is :.

                                • Files using this syntax have the .scss extension.


                                Original Sass:




                                • It syntax is similar to Ruby.

                                • Here no uses of braces.

                                • No strict indentation.

                                • No semi-colons.

                                • Variable sign in Sass is ! instead of $.

                                • Assignment sign in Sass is = instead of :.

                                • Files using this syntax have the .sass extension.


                                These are two syntaxes available for Sass.



                                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


                                SASS REFERENCE






                                share|improve this answer














                                Sass (Syntactically Awesome StyleSheets) have two syntaxes:




                                • a newer: SCSS (Sassy CSS)

                                • and an older, original: indent syntax, wich 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 differents between SCSS and original Sass:



                                SCSS:




                                • It syntax is similar to CSS.

                                • Use braces {}.

                                • Use semi-colons ;.

                                • Variable sign in SCSS is $.

                                • Aassignment sign in SCSS is :.

                                • Files using this syntax have the .scss extension.


                                Original Sass:




                                • It syntax is similar to Ruby.

                                • Here no uses of braces.

                                • No strict indentation.

                                • No semi-colons.

                                • Variable sign in Sass is ! instead of $.

                                • Assignment sign in Sass is = instead of :.

                                • Files using this syntax have the .sass extension.


                                These are two syntaxes available for Sass.



                                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


                                SASS REFERENCE







                                share|improve this answer














                                share|improve this answer



                                share|improve this answer








                                edited Sep 21 '17 at 5:40









                                Nick Cox

                                3,46111826




                                3,46111826










                                answered Apr 10 '17 at 11:16









                                simhumilecosimhumileco

                                6,46434946




                                6,46434946








                                • 5




                                  Strange that such clear and concise answer has such less votes than others. I have been going through piles of sources to understand what are the differences between Sass and Scss and finally found this that instantly enlighten me. Good job except a few spelling/grammar errors.
                                  – tnkh
                                  Nov 6 '17 at 2:50






                                • 1




                                  @TonyNg thank you. I'm glad I could help you. Regarding the points, it is so sure because I answered very late – about 6 years after asking questions. Feel free to correct me, where I made spelling or grammatical errors.
                                  – simhumileco
                                  Nov 6 '17 at 10:47
















                                • 5




                                  Strange that such clear and concise answer has such less votes than others. I have been going through piles of sources to understand what are the differences between Sass and Scss and finally found this that instantly enlighten me. Good job except a few spelling/grammar errors.
                                  – tnkh
                                  Nov 6 '17 at 2:50






                                • 1




                                  @TonyNg thank you. I'm glad I could help you. Regarding the points, it is so sure because I answered very late – about 6 years after asking questions. Feel free to correct me, where I made spelling or grammatical errors.
                                  – simhumileco
                                  Nov 6 '17 at 10:47










                                5




                                5




                                Strange that such clear and concise answer has such less votes than others. I have been going through piles of sources to understand what are the differences between Sass and Scss and finally found this that instantly enlighten me. Good job except a few spelling/grammar errors.
                                – tnkh
                                Nov 6 '17 at 2:50




                                Strange that such clear and concise answer has such less votes than others. I have been going through piles of sources to understand what are the differences between Sass and Scss and finally found this that instantly enlighten me. Good job except a few spelling/grammar errors.
                                – tnkh
                                Nov 6 '17 at 2:50




                                1




                                1




                                @TonyNg thank you. I'm glad I could help you. Regarding the points, it is so sure because I answered very late – about 6 years after asking questions. Feel free to correct me, where I made spelling or grammatical errors.
                                – simhumileco
                                Nov 6 '17 at 10:47






                                @TonyNg thank you. I'm glad I could help you. Regarding the points, it is so sure because I answered very late – about 6 years after asking questions. Feel free to correct me, where I made spelling or grammatical errors.
                                – simhumileco
                                Nov 6 '17 at 10:47













                                20














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






                                share|improve this answer




























                                  20














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






                                  share|improve this answer


























                                    20












                                    20








                                    20






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






                                    share|improve this 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.







                                    share|improve this answer














                                    share|improve this answer



                                    share|improve this answer








                                    edited Apr 7 '15 at 16:40









                                    JasonMArcher

                                    9,126104749




                                    9,126104749










                                    answered May 6 '14 at 10:36









                                    designerNProgrammerdesignerNProgrammer

                                    1,53742741




                                    1,53742741























                                        10














                                        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;
                                        }





                                        share|improve this answer




























                                          10














                                          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;
                                          }





                                          share|improve this answer


























                                            10












                                            10








                                            10






                                            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;
                                            }





                                            share|improve this 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;
                                            }






                                            share|improve this answer














                                            share|improve this answer



                                            share|improve this answer








                                            edited Dec 11 '17 at 22:16

























                                            answered Jul 2 '17 at 4:51









                                            AlirezaAlireza

                                            45.9k12165119




                                            45.9k12165119























                                                9














                                                Sass was the first one, and The syntax is a bit diffrent.
                                                For example, including a mixin:



                                                Sass: +mixinname()
                                                Scss: @include mixinname()


                                                Sass ignores curly brackets and semi colons and lay on nesting, which I found more useful.






                                                share|improve this answer


























                                                  9














                                                  Sass was the first one, and The syntax is a bit diffrent.
                                                  For example, including a mixin:



                                                  Sass: +mixinname()
                                                  Scss: @include mixinname()


                                                  Sass ignores curly brackets and semi colons and lay on nesting, which I found more useful.






                                                  share|improve this answer
























                                                    9












                                                    9








                                                    9






                                                    Sass was the first one, and The syntax is a bit diffrent.
                                                    For example, including a mixin:



                                                    Sass: +mixinname()
                                                    Scss: @include mixinname()


                                                    Sass ignores curly brackets and semi colons and lay on nesting, which I found more useful.






                                                    share|improve this answer












                                                    Sass was the first one, and The syntax is a bit diffrent.
                                                    For example, including a mixin:



                                                    Sass: +mixinname()
                                                    Scss: @include mixinname()


                                                    Sass ignores curly brackets and semi colons and lay on nesting, which I found more useful.







                                                    share|improve this answer












                                                    share|improve this answer



                                                    share|improve this answer










                                                    answered Apr 11 '15 at 13:25









                                                    user3522940user3522940

                                                    363513




                                                    363513























                                                        7














                                                        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.






                                                        share|improve this answer


























                                                          7














                                                          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.






                                                          share|improve this answer
























                                                            7












                                                            7








                                                            7






                                                            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.






                                                            share|improve this 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.







                                                            share|improve this answer












                                                            share|improve this answer



                                                            share|improve this answer










                                                            answered May 2 '18 at 5:40









                                                            Shailesh Vikram SinghShailesh Vikram Singh

                                                            467416




                                                            467416























                                                                6















                                                                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.




                                                                enter image description here



                                                                Eample 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 refer official website






                                                                share|improve this answer




























                                                                  6















                                                                  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.




                                                                  enter image description here



                                                                  Eample 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 refer official website






                                                                  share|improve this answer


























                                                                    6












                                                                    6








                                                                    6







                                                                    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.




                                                                    enter image description here



                                                                    Eample 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 refer official website






                                                                    share|improve this 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.




                                                                    enter image description here



                                                                    Eample 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 refer official website







                                                                    share|improve this answer














                                                                    share|improve this answer



                                                                    share|improve this answer








                                                                    edited Aug 2 '18 at 14:24

























                                                                    answered Jul 19 '18 at 13:20









                                                                    Srikrushna PalSrikrushna Pal

                                                                    591819




                                                                    591819























                                                                        3














                                                                        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.






                                                                        share|improve this answer




























                                                                          3














                                                                          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.






                                                                          share|improve this answer


























                                                                            3












                                                                            3








                                                                            3






                                                                            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.






                                                                            share|improve this answer














                                                                            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.







                                                                            share|improve this answer














                                                                            share|improve this answer



                                                                            share|improve this answer








                                                                            edited Jun 27 '18 at 21:34

























                                                                            answered Jun 27 '18 at 13:10









                                                                            matthiasmatthias

                                                                            2,02911526




                                                                            2,02911526

















                                                                                protected by cimmanon Jan 31 '16 at 16:33



                                                                                Thank you for your interest in this question.
                                                                                Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).



                                                                                Would you like to answer one of these unanswered questions instead?



                                                                                Popular posts from this blog

                                                                                "Incorrect syntax near the keyword 'ON'. (on update cascade, on delete cascade,)

                                                                                Alcedinidae

                                                                                RAC Tourist Trophy