After having create a Sass file, I would like to create a copy of this file with only the structure (only the class and the id, but not the css properties).
Is it possible ? And how ?
Google doesn't help me ...
Thanks a lot
If you want to keep your selectors, you can put CSS comment inside your differents blocks.
They will be present in your compiled stylesheet.
this-selector {
// will not be present
}
but-this-one {
/* will */
}
For an automatic parsing, you should try with postcss and, for exemple, a node.js script.
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 was looking for an easy way to prefix a style sheet and sass works just great. I don't need any building tool, just vs code sass extension, and press watch.
What I did was, renamed the css to scss and then imported it inside the main style nesting in the selector I want, like:
#wrapper {
#import 'style1';
#import 'style2';
}
The issue comes when one of the files has #font-face, they also get prefixed and that is a problem. I checked the issue tracker and apparently this is the correct behavior.
https://github.com/sass/sass/issues/2442
Given that. I am looking for a way to import only the #font-face rules to the root instead of the #wrapper selector.
Is this possible without having to change the content of 'style1' or 'style2' ?
I was able to get around this problem with node sass magic importer.
But again you need node scripting and terminal, but can be mitigated with a bundler which kinda is not what I want but at least I can sort of prebuilt it and still use a watcher.
But given the hasle to set this up for such a simple thing I would just go to the style sheet and copy the font-faces to the root of the main file anyways.
If anyone knows a solution with sass only please reply.
I'm creating a HTML/CSS page which is using Bootstrap. In fact I have to customize some parts. Because of several reasons some class names do not match the original from Bootstrap.
So, I have two files. bootstrap.min.css and main.less (=>main.min.css).
I'm wondering if it is possible to match classes in main.less to bootstrap.min.css.
So, I have a class .orderby (in main) which should have the same settings then .form-control (bootstrap).
Something like this:
.orderby { #.form-control }
But I have no clue how to refer to another css file.
Would appreciate if somebody can point me to the right feature.
Thank you!
You can do this with LESS's extend "all". The generic form is :extend(<indentifier> all) {}. In your case, you'd do
.orderby {
&:extend(.form-control all) {}
<your additional styles>
}
Additionally, if you don't need to use all of Bootstrap, you can import just the bits you need with LESS's reference:
#import (reference) path/to/bootstrap
Combine that with the above extend code, and you'll pull in just Bootstrap's .form-control.
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; }
I have just started using sass and still learning. I am using this command to generate css from sass:
sass --watch custom.scss:custom.css
It seems to remove empty classes and IDs. Is it possible to include them on the resulted css?
SASS never compiles empty classes, as a workaround you can add a CSS comment inside the class with no rules, so it will be compiled.
.empty {
/*I'm still empty*/
}