Difference between SASS and SCSS

Afghanistan Åland Islands Albania Algeria American Samoa Andorra Angola Anguilla Antarctica Antigua and Barbuda Argentina Armenia Aruba Australia Austria Azerbaijan Bahamas Bahrain Bangladesh Barbados Belarus Belgium Belize Benin Bermuda Bhutan Bolivia Bosnia and Herzegovina Botswana Bouvet Island Brazil British Indian Ocean Territory British Virgin Islands Brunei Bulgaria Burkina Faso Burundi Cambodia Cameroon Canada Cape Verde Caribbean Netherlands Cayman Islands Central African Republic Chad Chile China Christmas Island Cocos (Keeling) Islands Colombia Comoros Congo Cook Islands Costa Rica Croatia Cuba Curaçao Cyprus Czechia Denmark Djibouti Dominica Dominican Republic DR Congo Ecuador Egypt El Salvador Equatorial Guinea Eritrea Estonia Eswatini Ethiopia Falkland Islands Faroe Islands Fiji Finland France French Guiana French Polynesia French Southern and Antarctic Lands Gabon Gambia Georgia Germany Ghana Gibraltar Greece Greenland Grenada Guadeloupe Guam Guatemala Guernsey Guinea Guinea-Bissau Guyana Haiti Heard Island and McDonald Islands Honduras Hong Kong Hungary Iceland India Indonesia Iran Iraq Ireland Isle of Man Israel Italy Ivory Coast Jamaica Japan Jersey Jordan Kazakhstan Kenya Kiribati Kosovo Kuwait Kyrgyzstan Laos Latvia Lebanon Lesotho Liberia Libya Liechtenstein Lithuania Luxembourg Macau Madagascar Malawi Malaysia Maldives Mali Malta Marshall Islands Martinique Mauritania Mauritius Mayotte Mexico Micronesia Moldova Monaco Mongolia Montenegro Montserrat Morocco Mozambique Myanmar Namibia Nauru Nepal Netherlands New Caledonia New Zealand Nicaragua Niger Nigeria Niue Norfolk Island Northern Mariana Islands North Korea North Macedonia Norway Oman Pakistan Palau Palestine Panama Papua New Guinea Paraguay Peru Philippines Pitcairn Islands Poland Portugal Puerto Rico Qatar Réunion Romania Russia Rwanda Saint Barthélemy Saint Helena, Ascension and Tristan da Cunha Saint Kitts and Nevis Saint Lucia Saint Martin Saint Pierre and Miquelon Saint Vincent and the Grenadines Samoa San Marino São Tomé and Príncipe Saudi Arabia Senegal Serbia Seychelles Sierra Leone Singapore Sint Maarten Slovakia Slovenia Solomon Islands Somalia South Africa South Georgia South Korea South Sudan Spain Sri Lanka Sudan Suriname Svalbard and Jan Mayen Sweden Switzerland Syria Taiwan Tajikistan Tanzania Thailand Timor-Leste Togo Tokelau Tonga Trinidad and Tobago Tunisia Türkiye Turkmenistan Turks and Caicos Islands Tuvalu Uganda Ukraine United Arab Emirates United Kingdom United States United States Minor Outlying Islands United States Virgin Islands Uruguay Uzbekistan Vanuatu Vatican City Venezuela Vietnam Wallis and Futuna Western Sahara Yemen Zambia Zimbabwe Odoo
Published in Blog on July 18, 2019 4 min read
Difference-between-SASS-and-SCSS

CSS preprocessors

CSS is the standard implementation of the styling component of web pages by the WWWC and all browsers.A CSS preprocessor is a program that allows you to generate CSS from the preprocessor's own unique syntax. CSS preprocessor make it more useful, productive and writing stable code.

we have to install preprocessor compiler on your web server before using CSS preprocessor.

There are many CSS preprocessors available. Most CSS preprocessors will add some features that don't exist in pure CSS, such as mixin, inheritance selector, and so on. These features make the CSS structure more readable and easier to maintain.

Moreover, SASS is a CSS preprocessor 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.

Common options of CSS preprocessors are given below:

  • Sass
  • Less.js
  • Stylus
  • CSS-Crush
  • Myth
  • Rework

Difference between SASS and SCSS

SASS (Syntactically Awesome Style Sheets) is a pre-processor scripting language that will be compiled or interpreted into CSS. SassScript is itself a scripting language whereas SCSS is the main syntax for the SASS which builds on top of the existing CSS syntax. It makes use of semicolons and brackets like CSS (Cascaded Style Sheets).SASS and SCSS can import each other. Sass actually makes CSS more powerful with math and variable support.

  • SASS is used when we need a original syntax, code syntax is not required for SCSS.
  • SASS follows strict indentation, SCSS has no strict indentation.
  • SASS has a loose syntax with white space and no semicolons, the SCSS resembles more to CSS style and use of semicolons and braces are mandatory.
  • SAAS file extension is .sass and SCSS file extension is .scss.
  • SASS has more developer community and support than SCSS.

It is common to confuse with the options available in CSS preprocessors, SASS is a preprocessor that has a lot of features to make styling quicker and more efficient and SCSS is another pre-processor but kind of the middle ground between Sass and CSS. The difference is in the syntax. Don't confuse with the .scss and .sass, both of them are SASS and SCSS options. .scss is Sassy CSS and is the next generation of .sass.

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, called 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.

To understand the difference between SASS AND SCSS, we have to learn the different syntax between them.

SASS

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

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

.border
  padding: $margin / 2
  margin: $margin / 2
  border-color: $blue
  • The code above we use ; to separate the declarations.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 have no strict indentation,sass syntax is similar to ruby

 

SCSS

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

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

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

The SCSS style is a lot more similar to regular CSS than the older SASS approach

The corresponding css code given below:

CSS

/* CSS */

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

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

Other common differences are here:

  • Assignment sign in sass is = instead of : in scss
  • Variable sign in sass is ! instead of $ in scss

example:

// SASS Variable decleration and assignment
!primary-color= hotpink

// SCSS Variable decleration and assignment
$primary-color: hotpink;

In short, hope you understood the comparison of css preprocessors.

Odoo_erp_services

Recent Blogs

Hi...

Got ideas? We’ve got
the skills. Let’s team up.

Have a question or ready to discuss your project? Our team is here to help you scope, design, and deliver.

Trusted by Leading Businesses
Metro
Zabeel Equstrian
GEMS Logo
APSG Logo
Anisia Logo
Foodlinx Logo
🌐 +1
Select Subject?
send mail graphic