Inherit a class to another file in Sass

Sass or syntactically awesome style sheets is a CSS preprocessor that gives CSS such powers that are not available in plain CSS. It gives the power of using expressions, variables, nesting, mixins(Sass form of functions), inheritance, and more. Other well-known CSS preprocessor examples include Less and Stylus but Sass is more popular.

Sass includes two syntaxes:

• SCSS(Sassy CSS)
• Sass

SCSS uses the .scss syntax and it is very similar to regular CSS. SCSS is fully compliant with CSS. SCSS can be assumed as a superset of CSS. Any valid CSS style is a valid SCSS. Because of the similarity with CSS, it takes less time to get started with it.

$heading-color: #e94e1b; //Using Sass Variables
h4 {
    color: $heading-color;
}

This is the original syntax of Sass. It uses .sass file extension. It uses all the features of Sass but instead of using the curly-braces, it uses indentation to describe the format of the document. It is not fully compliant with CSS.

$heading-color: #e94e1b; 
h4
  color: $heading-color

A single CSS file can eventually grow larger and it'll be a tough job to maintain large stylesheets. So, it would be easier if there's a way to separate classes into various files. So one can import only the necessary files. In this way the stylesheet will be smaller and also maintenance will be easier. The stylesheet will also maintain the DRY(Don't Repeat Yourself) rule. 

Approach 1: To import another stylesheet into a stylesheet, the @import keyword is used. The CSS or Scss files to be imported can reside in the same folder or somewhere else on the internet.

@import 'file-name';
@import url('url of the stylesheet')

@import './buttons.scss';
@import url('https://example.com/css/breadcrumbs.scss');

Compiled CSS

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css'); .btn-large { border-radius: 3rem; border: 4px solid black; background: black; color: white; width: 20rem; height: 10rem; display: flex; align-items: center; justify-content: center; }

This is a feasible solution to import a CSS file into another file. But Sass has deprecated @import and will eventually remove it. Instead of using @import, Sass now supports @use because CSS also has a @import feature and there are some other major drawbacks of using @import which is a topic for another article.

Approach 2: The @use has to be used with a namespace. Suppose a file buttons residing on the same directory has a color variable called primary-color. To use the variable in other files, the below syntax will be followed.

@use 'file-name';

@use 'buttons';

.card {
    color: buttons.$primary-color;
}

Compiled CSS:

.btn-large {
  border-radius: 3rem;
  border: 4px solid black;
  background: black;
  color: white;
  width: 20rem;
  height: 10rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

The namespace is used because of the naming conflicts that exist in @import. If two imported files contain two different variables of the same name, @import will force to use the variable value defined in the last imported file.

The @use also gives the ability to use a user-defined namespace.

@use 'buttons' as btn;

.card {
    color: btn.$primary-color;
}

The as keyword allows defining custom namespaces.

An important thing to note here is that the Live Sass Compiler on VS Code is based on LibSass and LibSass currently doesn't support the @use function. So it is better to use the Dart Sass which generally is the first to implement new features. Installing Dart Sass is easy. This post here describes the steps.

The previous section briefly described how to import and use styles stored in another file using the @import and the @use operator. To inherit a style from another class or id, the @extend keyword is used. Let's see an example, suppose the buttons class has a color: green; and opacity: .5; property, now to inherit these styles into another class, the @extend keyword will be used.

buttons.scss file

/* buttons.scss file */
.btn {
  color: red;
  opacity: 0.5;
}

style.scss file

/*style.scss file
where the style is to be inherited */
@use 'buttons';

.new-btn {
  @extend .btn;
}

So, the above code will inherit the properties from .btn class to the .new-btn class.

Now, let's take a look at the compiled CSS file.

Compiled CSS

/* style.css */
.btn, .new-btn {
  color: red;
  opacity: 0.5;
}

One thing to note here is that the styles from the .btn class are not getting copied to the new-btn class, rather it comma separates the original selector which reduces duplicate code.

So, in this article, the @include, @use and the @extend keyword used in Sass are described briefly. Inheriting can also be achieved using mixins. To read about the mixin, you can check this article. Though if the style doesn't take any parameters, it is better to use the @extend method. 

nemotivity

Follow

Improve

Article Tags :

• Web Technologies
• CSS
• SASS