It seems that the generated project already has lots of colour variables like --bs-body-bg. Dev.tools say it is in _root.scss, but that file does not seem to exist, and I suspect it is inside of bootstrap.in.css. Can I customise those existing colour variables?
It's coming from scss.
You should have other _XXX.scss. SCSS compiler will make a global CSS file for the whole project. Dev tools present you the origin _root.scss not the compiled CSS.
Find the big CSS file of your project, you will find your variables.
If you know scss and have access to the whole tree of scss and all the files, you can rebuild the global CSS in house.
Other way, you make another CSS file, you put it after the global CSS, and you override definition you need... Not the smartest, but if only some changes to do lot quicker.
Related
I am using sass mixed with sass modules to scope styles for each component
I found myself importing the variables file at every sass module
I import by the new "#use"
would that make my final compiled css bundle bigger or sass handles it under the hood ?
also is there a better practice than adding the two lines importing the variables and mixins at every sass module it gets repetitive.
To answer first question:
Compiled bundle size won't be bigger. SASS resolve variable references under the hood to map the values.(per my understanding with SASS ways of working)
To answer your second question:
Try to have a look at the SMACSS on how to structure your presentation code. You can apply that structure to scss as well.
For e.g. essentials variables/mixins/extends can be clubbed in a utility file like _dependencies.scss and then include this one file rather including n number of imports.
i have a folder filled with svg's (path: src/assets/icons).
The css function url() is implemented like this:
url("/assets/icons/CheckSmall.svg");
It finds the svg data, when I run ng serve.
But when I build my Project, it cant find the svg data. Although it exists in the folder dist/myApp/assets/icons/CheckSmall.svg
I have read through many forums and discussions and tested a few things (One of many discussions).
For example i used different pathing "strategies":
1. url("^assets/icons/CheckSmall.svg")
2. url("~/assets/icons/CheckSmall.svg")
For number (1) it seems like it is not a supported feature in Angular, thats why i dont want to use it. And for (2) it copies my Assets and puts them into the folder dist/myApp.
Is there a viable(supported or documented) alternative? Or can I somehow adjust the angular.json.
Try using the following syntax:
background-image: url('../../assets/icons/<file-name>')
Where the route is relative to the css file
If you're setting non-default baseHref or deployUrl flags as part of the build that can also affect it
Try using that approach in styles.scss or in the relevant component, without the scss variable. The relative path won't be correct when the scss variable is used in different folders
What I have is a large CSS file which was compiled from Sass. I have some of the original Sass files, but looking at the source map not all of them.
I'm able to compile the Sass that I do have into CSS, but of course some of the style rules are missing.
How can I reduce these two files into only the rules that are unique to the original? I would like to be able to do that so that I can include that CSS with the source Sass I have on hand to speed up future development.
I would do it like this:
take original CSS and convert it to Sass by changing extension to .scss
if original CSS is minifed use something like CSS Formatter to get readable code
name it something like legacy and import first in your master Sass file
use nanocss in your build process to dedupe duplicate styles (make sure discard-duplicates plugin is enabled)
optional: enable dedupe only for production build since it slows down CSS generation
drawbacks:
if changing properties on existing classes in Sass dedupe will not match against legacy and you end up with almost-duplicates - to prevent that, I would manually go into legacy to delete old classes when changing them in sass partials
Based on your input you should do following "backwards-engineering":
1) Compare you CSS files in a diff-program, e.g. diffchecker.com (let us call your files: file1.css and file2.css).
2) The diff-program will mark duplicate areas with color.
3) Decide which file to update and remove the duplicates, in that file.
Note!. This method will only solve if you have duplicated text blocks in your CSS files. It will not solve to "clean & improve" e.g. if you have spreadout "duplicate" information.
I've got the below setup:
Brackets IDE
CodeKit for compiling SASS/SCSS into CSS
CloudMounter to mount a live copy of a Wordpress site via FTP (it also auto updates the server's files with any changes I make to the mounted version).
Here's how it works:
Add SCSS styling into .SCSS file
Save SCSS file
CodeKit auto compiles into CSS file, and stores on Local/mounted drive.
CloudMounter picks up the change and auto uploads it to server where Wordpress site is hosted.
Probably not the most efficient workflow but I'm quite impressed with what I've managed to pull off.
My question is: What happens if one of the other people in my office directly FTPs onto the server and makes an edit to the .CSS file instead of using the above method to add SCSS instead?
Will this break the compiler? When I update the SCSS file in the future, will this overwrite/ignore the new custom CSS?
I'd rather like to keep myself as the only developer who uses SCSS instead of having to train the other people in the office.
DON'T! It will be very hard to maintain what you edited and when you reload the Wordpress site you will lose the edits to the compiled CSS file (pure assumption). If you ABSOLUTELY have to just put the extra CSS you want to add or want your coworkers to add in separate CSS files that AREN'T SCSS/SASS.
SCSS compiles to CSS, that would be like writing software in C++ and then editing the compiled object files or writing software in Java and then editing the byte code. It is just very backwards and not ideal.
By doing what you said you wanted to do you are doing something that is not not advised. SCSS is neat because it allows you to short hand a bunch of stuff and saves you typing and annoying syntax and lets you use variables which plain CSS doesn't allow. Adding plain CSS to a mainly SCSS styled app isn't bad, but I suggest you put all your additional CSS in a separate file so that it is clear what the compiled CSS from SCSS is and what the new CSS you used is.
For the most part SCSS can almost be used Exactly like CSS as far as I know and its worth learning.
So I'm using the Bootstrap Customize and Download page to generate a version of the Bootstrap files with custom colors. I got the idea that I wanted to add some other colors (e.g. #purpleLight) to make upkeep of the site design easier, so I look through the downloaded contents the site generates, and my customizations don't appear to be anywhere, let alone somewhere for me to add others.
Here's what comes in the bootstrap.zip the site spits out:
css
bootstrap.css
bootstrap.min.css
img
glyphicons-halflings.png
glyphicons-halflings-white.png
js
bootstrap.js
bootstrap.min.js
...and that's it.
So, no colors anywhere in these files as far as I can tell. No LESS files included in the download. Am I doing something wrong? Is the site doing something wrong? Am I just not seeing something that is in fact there? To the best of my diffing abilities, the downloads seem identical regardless of the customization options I choose...
And, pending whose messing up here, what would be the alternative best way for me to customize a color palette for my Bootstrap site?
You can't add more LESS variables with the custom download tool. You can only redefine the values of the existing variables. Upon download, the tool compiles with those set variables but since you don't get the LESS files, you won't be able to add more variables afterwards, like #purpleLight you mentioned.
If you want to extend Bootstrap with more LESS variables, you have to download the full source and compile your css from the included LESS files. There's a file variables.less in the less/ folder where can add your #purpleLight.