I've discovered that #import has performance implications. However all of my sass files #import a global-constants.scss at the top of the file to reuse several variables for colour and other properties, so that I can change the main colour etc from one place.
Is there a more performant way to reuse variables in sass?
EDIT: upon pondering this further, I notice that my css file that is generated from my sass file after compilation, has no import statement, and all of the variables are rendered as proper css values. So I'm probably not going to get any performance issues anyway, is my guess.
When you are using #import inside the SCSS, it will try to include the whole file and send it to the browser, (it is better, if you have configured it to return only one single CSS file or minified). That way, it is clean and better:
No #import in the output.
Source code is split using #import, keeping the modularity.
Summary: No performance issues because of #import.
Related
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.
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;
}
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
}
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:
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.
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.
.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.
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:
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.
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.
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/
We have a hundreds of .less files in production, but would like to start incorporating .scss files as well.
Would I need to make my own file type in order to compile mutliple types of CSS preprocessor files or is there already a way to do something like this:
#import 'less-styles.less';
#import 'scss-styles.scss';
#import 'stylus-styles.styl'; //potentially
whereby it produces a single CSS file in that order.
Because of valid CSS code is also valid Less code, you could compile your SCSS and stylus files first to CSS and import that.
sass scss-styles.scss scss-styles.css
Than in your Less code:
#import (less) scss-styles.css
The less keyword above does:
less: treat the file as a Less file, no matter what the file extension
The above means that you can extend and mixin the CSS selectors from the scss-styles.css file in your Less code.
Notice that variables and mixins from the from the scss-styles.css file are not available for (re)use in Less.
If you need the variables and mixins too, the only solution seems to convert your SCSS to Less. See also: https://github.com/bassjobsen/grunt-scss2less
You should be able to do the same for your stylus (.styl) files.
So far I have not seen any tools that would allow developers to cross-reference LESS mixins from Sass, or versa-vice.
That doesn't mean that you can't use multiple preprocessors in the same site, it just means that you will be limited in how they can interact. With concatenation and minification tools you could certainly build LESS and Sass separately and then merge them into a single file that gets minified.
With all of that said, I highly discourage that approach. Pick a technology for the project, and stick with it. That way you can make the most of the tools at hand, and only have to worry about a single technology lifecycle (updates, API changes, etc).
So I have this unusual situation, may be it's not Sassy way OR the right way and that's why I am asking it.
I have a main.scss which basically imports all other partials and frameworks say bootstrap. It works perfectly if all I needed was one single global CSS but I require different css files for various components and pages. One option could have been to include variables and mixins in every SASS file and compile different SASS files. Following are the reasons I didn't venture this path-
This somehow doesn't seem right, may be there is much efficient and automated way.
Not everything is coded by me or I may not have options to arrange variables and mixins locations. E.g. variables and mixins are not declared in separate files and I might not have option to re-factor.
One option which I am using is to split final compiled css using grunt and placing them in different folders but then changing images and font path is turning out to be a big trouble. I am not sure how do I use imgmin or such utilities to solve my problem neither that I am using the most efficient way to achieve what I want. I also want to avoid much complications in workflow.
Looking for some advice or tip which may help me out.
I'm not sure why you would say that compiling multiple SASS files doesn't seem right. That's how I'd approach it.
If you have a lot of variables and mixins, put the shared ones into a single file.
_shared.scsc:
$blue: #3b97c6;
$grey: #e6e6e6;
#mixin my_mixin {
// ...
}
Then just have your multiple SASS files (without the underscore so that they get compiled individually).
sass1.scss
#import "_shared";
// stuff only for sass-1
sass2.scss
#import "_shared";
// stuff only for sass-2
sass3.scss
#import "_shared";
// stuff only for sass-3
Am I misunderstanding something?
after I save my changes in the less file, my original css file will also be updated.
The problem here: I use #import "bootstrap" in my less file for some mixins and the entire external bootstrap lines will be copied in my normal css.
How can I just use the mixins without that "Web Essentials 2013 for Update 2" copies the entire source code to my css file ?
You can import only the parts of Bootstrap that you need. This is a really good practice to get into, since as you have seen Bootstrap will include a lot of CSS that you probably don't need. For example, depending on your project's directory structure:
#import "bootstrap/mixins.less";
Even after reading https://github.com/cloudhead/less.js/issues/212, I don't understand the meaning of the #import-once statement.
When you work with LESS you can have few less files (I have like 12 including media-queries, resets, etc), and sometimes you don't have the control of how many #import you have done between files, and that's the reason behind #import-once, to avoid style duplication.
When should I use #import-once instead #import?
Suppose you have main.less which imports other less files. And those files all import utils.less that contains useful mixins or variables. When you do this, the mixins get duplicated in the compiled code (css file). Once for each time utils.less was imported, even your CSS file should be 1mb instead 20kb. In case like this one you should use #import-once.
EDIT:
As pointed by #TJ, since LESS 1.4.0, #import-once is removed and is now default behavior for #import.
#import-once simply means "If it was already imported before, don't import it again". It's done to prevent duplication of CSS styles.