ttmind

Main Navigation

ttmind
  • jim-jams
  • Tech
  • Positive
Login

Login

Facebook Google

OR

Remember me Forgot password?

Don't have account? Signup here.

Sort by Categorys

.Net

PHP

Java

JavaScript

C++

Database

C#

Server

Client Side

Tools

Artificial Intelligence

Cloud

Hybrid Development

Event

Smart City

Education

Security

Scrum

Digital Marketing

APP Development

Business

Internet

Simulation

Art

Network

Microservices

Architecture

Technology

Leadership

    Top Articles

  • When to use .NET Core and When to use .NET Framework
    Alok Pandey
  • Cookie in ASP.NET Core
    Prakash Pokhrel
  • CRUD Operations in ASP.NET Core Using Entity Framework Core Code First
    TTMind Author
  • How to upload file via Swagger in ASP.NET Core Web API?
    Alok Pandey
  • Token based authentication in Angular 6 with Web API
    Gautam Deep
  • Related Topic

  • Invalid Scopes: pages_manage_instant_articles. This message is only shown to developers. Users of your app will ignore these permissions if present
  • What is ReadOnly and Disabled attribute in HTML?

Main Content

What exactly is CSS, SCSS, and SASS? How to separate them?

Client Side CSS about 5 months ago || 10/8/2018 || 246 View

  • Hide


Most of the beginner might get confused in these terms. All these terms are usually used for giving style to our site. This styling helps us design our application as per our need and requirement. CSS refers to Cascade Style Sheet whereas, SASS and SCSS are the preprocessors of CSS. The easiest way to determine the difference between them can be shown in the example below:
CSS:
-    .css extension is used
Example:

.content {
Border-color: #23jdh3;
}

.border {
Padding: 8px;
Border-color: 23jdh3;
}

SASS:

-    Preprocessor version of CSS
-    .sass extension used
-    Compile with traditional CSS which is easily understood by many of the browsers
Example:

$margin: 20px
$gray: #23jdh3

.content
Border-color: $gray

.border
Padding: $margin / 3
Border-color: $gray

As we can see that, semi-colons and curly braces are not used in SASS. Also, the next style is written in the new line.
SCSS:
-    A new version of SASS
-    Also known as Sassy CSS
-    Working mechanism is similar to that of SASS but consists of curly braces and semicolons
-    The next styling can be separated using semi-colon which decreases the number of lines while writing the code.

Example:

$margin: 20px;
$gray: #23jdh3;

.content {
Border-color: $gray;
}

.border {
Padding: $margin / 3; Border-color: $gray;
}

For more information, do visit

https://responsivedesign.is/articles/difference-between-sass-and-scss/
https://www.quora.com/What-is-the-difference-between-CSS-SASS-and-SCSS

  • 3
  • 0
  • 0
    • Facebook
    • Twitter
    • Google +
    • LinkedIn

About author

Nistha Shrestha

Nistha Shrestha

Currently the student of Kathmandu BernHardt College

  • Tech
  • About Us
  • Contact Us
  • TechHelp
  • PositiveHelp
  • Jim-Jams Help
  • Terms & Conditions

© Copyright ttmind.com

Reset Your Password
Enter your email address that you used to register. We'll send you an email with your username and a link to reset your password.

Quick Survey