CODEWITHSUNDEEP
csssassscss-mixins
Dip773
Dip773

Reputation: 15

How to import part of an scss file

For example I am trying to import .navbar-nav from bootstrap's _navbar.scss and not the whole _navbar.scss file to my compiled css file. Is there a way to do it?

Sorry if this was asked before.

Upvotes: 0

Views: 6392

Answers (3)

Brebber
Brebber

Reputation: 3084

As you are learning Sass here are some explanations which may help:

Better wording helps ...

At first some wording to get a correct understandable communication here and anywhere else you are talking about coding:

  1. SASS don't minify a given CSS, it writes the CSS. Minify means the process that a given CSS code is compressed by a postprocessor to a shorter way to write it, - i.e. comments and spaces will be removed ... But yes: as SASS writes CSS it is able to write code in a minified format.

  2. What you mean is to 'reduce code' or 'avoid not needed code' as you only try to import, use and write! the only needed parts of a given module which is a good practice.

  3. .navbar is a CSS class. SASS don't load CSS classes, it writes CSS classes. It doesn't matter if you 'write the code on your own to a SCSS file' or 'get the code from a framework/module' ... SASS writes the however prepared CSS classes to your CSS file.

  4. What you mean is the SASS includes/imports files with code from a framework/module to write that code/classes to css. So yes: maybe you can say you 'load' that module/scss-file ... but you don't load as css class. (This is as important as 'classes' in coding allways means a special construct of excutable code which does something in your programm. CSS classes don't execute anything, in SASS they are content you want to write/output to css.)

Please: these wordings are important to understand each other and to understand the mechanic of the process how SASS works is going on as well.

Reducing code by importing only selected file is good practice

So, I am not sure if I did understand your question right:

  1. No. You are not able to include/import/load a part of the code of a single scss-file only. If you do @import 'somefile.scss' you always get the whole code of the whole file.
  2. Yes. you are able to include/import/load parts of a given framework/module as you are able to load only the special FILES(!) of a framework/module you need for your project.
  3. Yes. That is a really good practice.

As you mentioned Bootstrap indeed is developed and allows you to do that. But head up. If you import i.e. the part navbar.scss (or other selected elements) it only works if you also load the other files navbar.scss depends on. That are almost variables, functions, mixins and sometimes needed JS components to this element as well. Please note, that importing the files the elements are based on (i.e. vars, functions, mixins) has to be done BEFORE you load the element (i.e. like navbars, grid,...) itself.

A way to organize your project

Yes. A good way to organize your project is to have a single(!!!) file which brings all the code together you write in other partial files yourself or which you import from other framework/modules.

In case of Bootstrap this can be (simplified example):


// ###> file: your 'custom.scss'

// Note: file is without leading underscore 
// as this files GENERATES/WRITE the css to custom.css
// Files with underscore as _partial-footer-styling.scss 
// are not compiled to write css on their own
// that files are only compiled to css when they are imported to files without underscore


@import 'path/your-own-vars';
// Note: technique importing files 
// you don't need to write underscore and '.scss'
// Note: function of this file
// the file '_your-own-vars.scss' is to organize you needed vars special to your project
// it includes your own vars and bootstrap vars as well
// --> the Bootstrap vars in this file will overwrite the vars of Bootstrap which will be included next

@import 'bootstrap-path/functions';
@import 'bootstrap-path/variables';
@import 'bootstrap-path/mixins';

@import 'bootstrap-path/your-selected-component-1';
@import 'bootstrap-path/your-selected-component-2';
@import 'bootstrap-path/your-selected-component-3';
...

@import 'path/partial-your-own-additional-css-special-section';
@import 'path/partial-your-own-additional-css-footer-settings';
....

A detailed explanation how to include and use Bootstrap (partly if you like to do so) to your project is here: https://getbootstrap.com/docs/4.6/getting-started/theming/

Upvotes: 1

Yadab
Yadab

Reputation: 1883

One of the way to import .scss in javascript is

import { navbar-nav } from '_navbar.scss'

When using in your component you can do.

<div className={navbar-nav} />

if you want to import it in your .scss file then you can do.

@import '_navbar.scss'

.class {
  @extend .navbar-nav
}

Upvotes: 1

DumbUXEngineer
DumbUXEngineer

Reputation: 71

You can try doing an extend:

.your-class{
    @extend .navbar-nav;
}

However, this would only work if you had imported the _navbar.scss somewhere else or the bootstrap.scss.

Additional

// main.scss
@import ../wherever bootstrap file is/_navbar.scss;
@import _custom.scss;

// _custom.scss
.your-class{
    @extend .navbar-nav;
}

Upvotes: 1

Related Questions