10

The original CSS have the @import keyword, which helps us with including an external CSS file.

So, what is the difference between this @import and the one from SASS/SCSS?

Dharman
  • 30,962
  • 25
  • 85
  • 135
maxisacoder
  • 1,709
  • 2
  • 13
  • 18
  • 1
    They fundamentally do the same conceptual thing, but SASS is preprocessed by the SASS compiler and that compiler does whatever it does with that directive, while a browser does whatever it does when encountering the directive in a .css file. Not sure into how much detail you expect us to go here… – deceze Dec 05 '16 at 14:48
  • The annoying thing is that you cannot @import a *css* file in SCSS *for compilation*. SASS assumes it's a CSS import you want and so it stays in the generated code. – connexo Dec 05 '16 at 14:56
  • 1
    It seems it've been [fixed at least in libsass](http://stackoverflow.com/a/30279590/137626) (and some ruby compilers?) – FelipeAls Dec 05 '16 at 16:48

4 Answers4

8

@import in CSS: CSS has an import option that lets you split your CSS into smaller, more maintainable portions.

Whereas,

@import in SASS/SCSS: Sass builds on top of the current CSS @import but instead of requiring an HTTP request, Sass will take the file that you want to import and combine it with the file you're importing into so you can serve a single CSS file to the web browser.

For Example:

In _reset.scss

// _reset.scss

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}

In base.scss

// base.scss

@import 'reset';

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

References: SASS Guide

Saurav Rastogi
  • 9,575
  • 3
  • 29
  • 41
  • 1
    Does this mean that the compiled css file will show the `reset.scss` content and the `base.scss` content in the same file, with the `reset.scss` content showing up first? – wmock Dec 15 '17 at 06:33
7

css @import happens at runtime, Sass @import at build time.

sbaechler
  • 1,329
  • 14
  • 21
3

I recommend to use Sass imports wherever it is possible.

Assume that we have the following code written in native CSS:

@import "style1.css";
@import "style2.css";
@import "style3.css";

As a result, you getting one file, which is downloading another files. These requests are sent separately to your server and you get 3 files in response. Just look at the developer console to notice this problem.

In Sass way files are concatenated to one file (by the frontend workflow you use) and it's just one request to your server.

plvice
  • 462
  • 2
  • 11
1

From the docs:

Sass extends CSS's @import rule with the ability to import Sass and CSS stylesheets, providing access to mixins, functions, and variables and combining multiple stylesheets' CSS together.

However, the use of @import is now discouraged in Sass, which recommends using @use instead.

This should reduce the confusion between css and scss @import statements.

Standaa - Remember Monica
  • 1,878
  • 2
  • 28
  • 45