Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I am actually trying to make a web app using ASP MVC to support some dynamic color setting. For example, admin can set theme colors for specific user groups. When admin saves the new color codes, those new color codes need to be saved in CSS. So users login they will see different colors based on their group.
For this, I am thinking of using SASS or LESS. It would be easier if I can easily set variables in SASS or LESS to new color codes in Save action.
So my questions is...
How can I retrieve variables from SASS or LESS file and set new value to the variables? Is there a library for this? I have checked BundleTransformer and dotless. But I still don't know if these library support handling variables.
If I can update variables in SASS or LESS, will it be compiled on any change?
And what can I do for the cached CSS on client side?
I would really appreciate it if you guys can give me any better or other approaches.
Thanks,
If you're targeting only users with modern browsers, CSS has experimental variable support (see Can I use.. data). Here's an example of from MDN:
:root {
--main-bg-color: pink;
}
body {
background-color: var(--main-bg-color);
}
If you took this approach, you would only have to insert the colour variable into a simple stylesheet, and CSS would do the rest:
<style>
:root {
--group-colour: {{ groupColour }}
}
</style>
<link rel="stylesheet" href="/path/to/stylesheet/with/variables.css">
For more information on CSS variables, see MDN's CSS var() documentation.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 years ago.
Improve this question
What's the benefit of overriding Bootstrap SCSS variables vs just overriding Bootstrap's CSS class rules?
For example,
Overriding variables:
$custom-font-size: $input-font-size;
Overriding class:
.someClass {
font-size: $input-font-size;
}
For one, duplication of output. If you override classes then that will mean that in your CSS you'll be including both the Bootstrap definition and the overriding definition. Not ideal, so on a smaller scale this works fine.
But on the bigger scale though, overriding potentially hundreds of classes (if not more) will be both a waste of resources for any end users (since there will be more data to download) but also a waste of time because you have to go and find every single instance where you want to override the use of that variable. Changing just the variable once will change every instance of where that variable is used, and you don't get the extra output. A win-win.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 years ago.
Improve this question
There are so many ways to use style inside react js that it confuses me.
for example :
Normal CSS
CSS in JS
Styled Components
Sass & SCSS
Are the above methods influencing website load speed?
What is the difference between these methods?
Try using SCSS when ever you can. It helps to organize your stylings and will be processed to css any way. So there is literally no mentionable downside.
For simple styling i would recommend normal css classes (in .scss files).
For complex animation or styling logic use javascript in conjuction with existing animation libraries like framer-motion. That way you have more control over what is happening and also more possibilities to make your site outstanding and unique.
Performance is all the same, all of them are translated into plain CSS when you run : npm run build.
CSS has its benefits, because of designer-friendly but you may get some problems by accidentally making 2 classes with the same name(this is when you have CSS split into many files) if this happens it will make debugging a nightmare (been there myself).
Sass has the same problem as css, but it's a way more cooler css :)
Styled-component, CSS in js, may fit a little better on react component-based world, because for every "class" that you style a UNIQE className is generated + it gives you more power by having props/state modifying the styles of classes, not like others where for a backgroundColor change you will need 2 classes.
There are a lot of ways to do this, best-comparing article that it served me well in my beginning is in here: https://www.sitepoint.com/react-components-styling-options/
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I am working on a Vue.js project that uses Vuetify and vue-flash-message. I am trying to set warning message background to 'blueviolet' by editing its style:
.flash__message.warning {
color: #ffffff;
background-color: blueviolet;
border-color: #ef9e3b;
}
but there is '.warning' class in Vuetify that overrides it, see the screenshot .
I wonder if anyone can explain what technique is used here. And what is the right way to make the message background 'blueviolet' in this situation?
The issue here is your second class which is telling the browser to set the background to yellow as the !important tag on the end of each property. !important tells the browser to override any other styles that overlap classes. You need to:
A) Remove the important from the yellow styles and apply them to the purple
B) Remove the yellow styles all together.
Option A will seem more 'logical' but it depends what environment your working in and how your code etiquette applies to your project. I prefer to keep everything simple and just remove the intrusive css and try and use less !importants in web projects.
For more information on the !important utility visit this helpful blog post: !Important Utility information
Hope this helps.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I have a question to web designers - do you think that it's fine to make CSS classes with one rule in them?
For example, I usually write classes like .float-right, .center or margin-top-40 to apply them to divs or some other elements. But I must say that I'm not writing all CSS this way, just applying these classes in some places when it's necessary to remain flexibility, like when I have to move one link to the right or something like that.
Do you think that it's the correct way of using CSS?
My suggestion is to create a base file which will include a lot of classes with one rule.
And in a different css file, you will use Sass with #extend to build your component css classes.
For example:
.foo {
color: red;
}
.bar {
#extend .foo;
}
For the examples you have mentioned, it is not necessary to write additional class for the particular style. You can write them where necessary.
Adding additional style rule adds extra class in the html markup.
You can use #mixin in SCSS which will be more efficient.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I'm using Bootstrap 3. Ok no problem so far, but, there's a but...I don't know what is the right approach when it comes to alter bootstraps's core css code. So for instance I want to design a new theme, let's say for my own site, and I want to do that using Bootstrap 3, but when it comes to prettiness bootstrap it's like a 3-4 out of 10.
Should I tweak bootstrap files with my own css styling OR Should I build on top of bootstrap and, well, having unused css properties in bootstrap file that I overwrite in my own "style.css".
And I'm not talking about Bootstrap Customize option on site. There are not so many things I could change.
Definitely build on top of Bootstrap, create a new css file. It is better not to touch bootstrap at all, and have it act as it is intended when you need it to.
You can use Customize to add/remove components desired and customize Less variables to define colors, sizes and more inside your custom CSS stylesheets. Bootstrap's customizer finally will generate your csutom javascript & style files with desired components.
If you use css preprocessors like LESS or Sass you can do it by changing variables' values in your editor. Bootstrap's default preprocessor is LESS, but there is also available Sass version.