i have a simple but for me rather an important question. I will start a clean Project with Less and wanna include bootstrap. So my basic style.less file would look like this:
// Bootstrap Corefile
#import "bootstrap.less";
// My own Styles
header {
.make-row();
}
is this logical correct because now the bootstrap and my own styles are compressed in one file. In addition I would have a pretty big css file... And what if I want to use another css file from external plugins.
I would like to know if someone has already experience with it?
Yeah that will work. If you want to add another file you can just import that as well.
One thing that you do have to be careful of is that in the earlier version of IE it has a max number of classes it process. I can't remember off the top of my head but I think it is somewhere near 1000. So if the css at the end of the file isnt working in IE thats why.
Here is a line to the documentation to see what you can do with it. Check out the import section.
Related
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 am on a react project I have a lot of SCSS files I want to make one SCSS for medias and it should overwrite any other SCSS how to do that because in react it is a bit different from simple HTML CSS and I can't import one file the last so that it could be the most important
create like this.
make a scss file somewhere. e.g overWriteKiller.scss
in overWriteKiller.scss white your codes
Implementation. example component
import otherScss from 'otherScss.scss';
import overWriteKiller from 'overWriteKiller/overWriteKiller.scss';
// here is your component's code going
point is that file has to be import at the very last.
I know what you mean, you can clear that mess easily, just replace all media-s to one seperate file like media.scss
And order them from highest (widest) screen to lowest if something will blow in your site just add !important to all of the medias and you can add anything there and it will be the most important
P.S. you don't need to manually add !important just search all ; -s and replace with !important; then replace !important!important with !important that would clear everything
I'm a full stack developer that uses sass (.scss) for styling. However, my backend crew, when they have to make front end changes, use css because they are comfortable with it.
I have to convert the css to scss every time manually or else I will overwrite their changes. Is there a way to update my scss file to pull in css changes automatically?
My IDE is PhpStorm (if that helps anybody)
SASS version 3.4.24
I don't see a plugin for PHPStorm to do that; you might have to make one yourself. But even if you do, the SCSS it'd produce probably wouldn't be much better than the CSS you already have. It's silly to convert to SCSS only to compile back to CSS. The whole point of SCSS is so that you don't have to write CSS.
You could convert the CSS to SCSS with sites like this one. Again, results will probably not be much better than if you just kept it CSS.
My solution would be to split the CSS file. One part would be for the stubborn devs, while the other one is the CSS compiled from the SCSS you like to use. So, they can work in CSS, and you can work in SCSS.
You probably need a workplace solution before a technical one.
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 am just taking my first steps into the SASS-world. I set up everything, created a new project and downloaded the SASS port of normalize.css.
Inside the folder that holds all my SASS files, I have a folder called "normalize". That holds a file called normalize.scss, that holds a mixin that again imports some other mixins that contain the actual CSS-code.
On top of my screen.scss I simply have #import "normalize/normalize";.
screen.scss is compiled into screen.css, which is used by my index.html. Taking a look at that page in the browser, the normalize has taken effect. But when I look at screen.css, I don't see the normalize code.
To make sure I am importing/loading the correct files, I pasted this on top of normalize.scss: /*! normalize.css v2.1.1 | MIT License | git.io/normalize */.
As this comment does show up in screen.css, I know that I am using the right files, but still: Is it normal that the actual normalize CSS-code does not show up in screen.css but still takes effect in the browser? How is this supposed to work?
Ok, this was really stupid from me. I've written #import "normalize/normalize";, but after that I of course need to include it like #include normalize where 'normalize' is the mixin's name. oh well!