I have main all.less file, where I'm including all other less files
e.g.
#import "scaffolding.less";
#import "type.less";
#import "code.less";
#import "grid.less";
#import "homepage.less";
So my question is.
Is it possible to get"homepage.less" only in homepage (importing it in all.less).
Please Note that I don't want to attach it directly in the html file.
Thanks
On your homepage use:
<body class="homepage">
And then in your Less files:
.homepage {
#import "homepage.less";
}
The above still compiles all your code in a single file. Your compiled CSS code will have a larger number of bytes, but you can cache the same file for all your pages.
If your homepage is seperate html file, then you should include separate css file to it.
I would suggest you to rethink your design. Because it seems that your css code is not so reusable. Here is a very good and free book that will teach you the concepts.
That does not seem to be possible directly as all the less will eventually be compiled to css before being given to a page. Probably you need to create a separate file with a name like all_homepage.less for that purpose?
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/
I'm starting to work on a large application styling files. As Bootstrap 4 offers SASS files, I decided to follow that path.
I have built the following files structure:
theme.scss: general definitios for the theme like colors and fonts. Today there is just one but there could be more in the future.
global.scss: includes Bootstrap, some Bootstrap overrides and application componentes -i.e. a field with its label as part of the top border.
site.scss: general application styles.
additional page-specific SCSS files. I.e.: login.scss.
The problem I'm having is that global.scss -the one that imports Bootstrap- is then imported by site.scss as well as other files like page-specific SCSS files. So, Bootstrap styles end up in more than one compiled CSS. Compiled CSS files are what the application actually references.
I've previously used LESS and I could solve this using #import (reference) "bootstrap" instead of just plain #import "bootstrap". With SASS I haven't been able to find any solution to this problem without modifying Bootstrap core files.
Is there any other recommended way to organize the files and avoid this problem? Am I missing something or doing anything wrong?
Here are the files contents (they are large files but I'm posting only enough contents to show the problem I'm having):
theme.scss
$my-primary-color: #04459a;
global.scss
#import "../theme.scss";
$primary: $my-primary-color;
#import "../../third-party/bootstrap/scss/bootstrap.scss";
%field{
// [...]
}
site.scss
#import "global.scss";
div.field {
#extend %field;
}
// [...]
login.scss (or many other)
#import "global.scss";
// [...]
In the application I'm referencing site.css and login.css (in the loign page, of course) and both of them include Bootstrap styles.
I've built something that works for me, not sure if it's the best solution or which drawbacks it has, though.
I took some ideas from this article: My favored SCSS setup with Bootstrap 4. Here's what I've built:
First I created two SASS files for importing Bootstrap (similar to what the article does with bootstrap/_config.scss but splitted):
bootstrap/_sass-componentes.scss
#import "../../terceros/bootstrap/scss/_functions.scss";
#import "../../terceros/bootstrap/scss/_variables";
#import "../../terceros/bootstrap/scss/_mixins";
bootstrap/_config.scss
#import "_sass-componentes.scss";
// Every other bootstrap file I want to include:
#import "../../terceros/bootstrap/scss/_root";
#import "../../terceros/bootstrap/scss/_reboot";
#import "../../terceros/bootstrap/scss/_type";
// [...]
#import "../../terceros/bootstrap/scss/_utilities";
#import "../../terceros/bootstrap/scss/_print";
Then in global.scss I changed the bootstrap.scss import line to import only bootstrap/_sass-componentes.scss
Finally, in site.scss I included global.scss (such as it was before) and then full Bootstrap files trough bootstrap/_config.scss. **
** After importing _config.scss I also import my Bootstrap customizations. For doing them I followed the recomendation of the linked article although they do not apply directly to my own question.
What is the best way to integrate many CSS files to one integrated CSS file as global CSS?
We can supposed that every page has own CSS selectors with attributes.
If we simply copy and paste all css files into one file, the problem is that a.html will call b.html, c.html, d.html, ...., z.html css selectors and attributes even the page doesn't need call other CSS styles.
Is there any solution??
Caution when use #import, it increases the load time. New researches show that it's better to have ONE big css file than SIX small.
Problem with #import is, the download of the second file may start only when the first has been downloaded, which may cause glitches.
You can create a big file and use a compressor, like http://gpbmike.github.io/refresh-sf/
Of course, save it as style.min.css, let's say, and keep a backup of your style.css ;)
Take a look here too: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
use #import https://developer.mozilla.org/en-US/docs/Web/CSS/#import
master.css
#import 'a.css';
#import 'c.css';
a.css
el { style : lalala; }
b.css
el2 { style : lalala; }
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";
I'm currently creating a new WordPress theme based on the foundation them '_s'.
Could somebody explain to me how I can split up my style.css file into several to make them easier to manage? For instance, I'd like to have a layout.css, typography.css and other.css file stored within a /css folder.
How do I set this up. Presumably I need to add something to the header.php file?
Just include them via <link /> elements in the header.php template file.
Failing that, you can always use the CSS #import function:
theme.css:
#import url("layout.css");
#import url("typography.css");
/* Other styles here: */
body {
margin: 0;
}
"Just include them via elements in the header.php template file (under or before the the main stylesheet, depending on hierarchy)."
As the first answerer said.
"Avoid the #import directive"
As Google Webmasters say ;)
[ https://developers.google.com/speed/docs/best-practices/rtt#AvoidCssImport ]
EDIT ↓
However, I don't recommend using more than one stylesheet, since more stylesheets, mean more HTTP Requests and mean lower page speed performance.