IV. Import and Expansion Instructions

@ Rules and instructions

@import
  • Sass extends the CSS@import rule to allow it to import SCSS or Sass files. All SCSS or Sass files imported will be merged together into the same CSS file
  • Any variable or mixins defined in the import file can be used in the main file.
  • Typically, @import looks for the Sass file and imports it, but in the following cases, @import is only a normal CSS statement and will not import any Sass file:
  1. The extension of the file is.css
  2. File names start with http://
  3. The file name is url()
  4. @ import contains any media queries
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);
Compile all of them into
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);
  • Without an extension specified, Sass will attempt to find the name file with an extension of. scss or. sass and import it.
@ import "foo.scss"; or
@import "foo";
Both lines of code can import the file foo.scss
  • Sass supports the simultaneous import of multiple files in one @import rule
@import "rounded-corners", "text-shadow";
Partials
  • If you have a SCSS or Sass file to import but do not want to compile it into a CSS file, you can add an underscore at the beginning of the file name.

This tells Sass not to compile it into a normal CSS file. Then, you don't need to add an underscore in the import statement

There may be a file named _colors.scss, but it will not compile into _colors.css. You can do this @import "colors"; so _colors.scss will be imported.

Note that do not place underlined and non-underlined files of the same name in the same directory, for example, _colors.scss and colors.scss cannot exist in the same directory at the same time. Otherwise, underlined files will be ignored

@extend
  • @ The extend instruction tells Sass that one selector style should inherit another selector
.error { border: 1px #f00; background-color: #fdd; }
.seriousError { @extend .error; border-width: 3px; } Compiled to:
.error, .seriousError { border: 1px #f00; background-color: #fdd; } .seriousError { border-width: 3px; }
.error { border: 1px #f00; background-color: #fdd; }
.error.intrusion { background-image: url("/image/hacked.png"); }
.seriousError { @extend .error; border-width: 3px; } Compiled to:
.error, .seriousError { border: 1px #f00; background-color: #fdd; }
.error.intrusion, .seriousError.intrusion { background-image: url("/image/hacked.png"); }
.seriousError { border-width: 3px; }
  • Multiple Extensions
.error { border: 1px #f00; background-color: #fdd; }
.attention { font-size: 3em; background-color: #ff0; }
.seriousError { @extend .error; @extend .attention; border-width: 3px; } Compiled to:
.error, .seriousError { border: 1px #f00; background-color: #fdd; }
.attention, .seriousError { font-size: 3em; background-color: #ff0; }
.seriousError { border-width: 3px; }
  • Chain Extension
.error { border: 1px #f00; background-color: #fdd; }
.seriousError { @extend .error; border-width: 3px; }
.criticalError { @extend .seriousError; position: fixed; top: 10%; bottom: 10%; left: 10%; right: 10%; } Compiled to:
.error, .seriousError, .criticalError { border: 1px #f00; background-color: #fdd; }
.seriousError, .criticalError { border-width: 3px; }
.criticalError { position: fixed; top: 10%; bottom: 10%; left: 10%; right: 10%; }
  • Selector sequence
a { color: blue; &:hover { text-decoration: underline; } }
#Fake-links.link {@extend a;} will be compiled to:
a, #fake-links .link { color: blue; }
.seriousError, .criticalError { border-width: 3px; }
a:hover, #fake-links .link:hover { text-decoration: underline; }

Tags: Web Development sass

Posted on Mon, 09 Sep 2019 23:39:00 -0700 by BIOSTALL