I have mi en place in my application an angular theme with scss variables that are in a separate file. Here are some variables :
font-family: map-get-value($map, primary-font-family);
font-style: var(--font-style-normal);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-40);
line-height: var(--line-spacing-33);
letter-spacing: var(--character-spacing-0);
color: var(--text-color) !important;
I call my variable file in my scss style file :
#import "assets/scss/cerba/variables";
And I use my variables as that :
font-size: var(--font-size-10);
color: var(--text-color-medium);
I try to create a second variable file to put different colors on it for the same keys as my existing one and according to a variable in my angular code put in place this or that variable file. Is it possible
Related
I've been turning all the #import rules in my Sass stylesheets to the new #use rules as I understand they're a bit cleaner once compiled and don't end up loading the same CSS multiple times.
However, I'm having a bit of trouble working out how to, for lack of a better word, chain these #use rules so I can access variables and stuff through multiple files.
So, for example, I have the following setup:
_variables.scss:
$primary: #1d1d1d;
$secondary: #0f0f0f;
$light-grey: #a0a0a0;
$accent: #5DFDCB;
$white: #ffffff;
$blurple: #7289da;
which is #used in _defaults.scss:
#use "bootstrap/grid.scss";
#use "typography";
#use "variables";
which I then want to #use in card.scss:
#use "../../styles/defaults";
.committee-role {
color: $accent;
font-weight: lighter;
text-transform: uppercase;
}
Is what I'm looking to do actually possible in the first place? If so, what's the syntax to set it up?
I was thinking it might be color: defaults.variables.$accent; but that hasn't seemed to work (I'm not sure if I'm writing it wrong or if the extension I'm using to compile it to CSS doesn't support the syntax yet...)
Is it then the same sort of syntax for using mixins from other files, too?
Thanks in advance!
I encountered the same issue today using dart-sass and found this question when searching for a solution.
Reading through the documentation, I found that the #forward rule should be used instead of #use in the intermediate file.
The rule loads the module at the given URL just like #use, but it makes the public members of the loaded module available to users of your module as though they were defined directly in your module.
So in the example files used in the original question, _defaults.scss would be updated to
#forward "variables";
and then the accent would be used as follows:
#use "../../styles/defaults";
.committee-role {
color: defaults.$accent;
font-weight: lighter;
text-transform: uppercase;
}
I suspect this is more of a LESS question and may not be specific to Ant Design other than the way they implemented some of their components is preventing me from overriding or extending the styles.
Specifically, I want to change the font size and weight for the title area of the PageHeader component. Unfortunately, the component's style does not use the LESS variables defined in the default.less theme for these two settings. The source code can be found here: https://github.com/ant-design/ant-design/blob/master/components/page-header/style/index.less
I have no issues changing the color, for instance, or any other variables defined in the theme but I am new to LESS and not sure how to go about overriding the styles defined for an individual component like this. Oh, and I don't want to use inline styles. We use this component in many places in our application, so I want to define the overrides in one place, once and have them be global for the application (like I can do with the theme variables).
So, how do I override the font-weight and font-size styles defined on lines 45 and 46 of the referenced file?
Here an example of how I have done it in my project:
Using .css file
Override the CSS class by .css/.scss and so on:
// Main layout where all antd componets used.
import './MyLayout.css';
/* MyLayout.css */
.ant-tooltip-inner {
background-color: white;
color: black;
}
Here I reversed all tooltips (default are black).
Using Styled-Components
Same like above just as CSS-JS:
const LayoutStyled = styled(Layout)`
height: 100vh;
* {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.ant-layout-sider-light .ant-layout-sider-trigger {
border-right: 1px solid ${HCOLOR.border};
}
`;
Here I overrode all fonts and added the right border to antd sider trigger (default no border).
Conclusion
Find the css-class / css-property with dev-tools (Ctrl+Shift+C in Chrome) and override it as you like.
Use less files to apply the styling as mentioned in the antd docs here.
I am getting crisscross information and wanted to raise the issue here. I have read in some places the font size should be changed from the html element for example:
html { font-size: 14px }
And the bootstrap 4 rem values will update the text accordingly.
Interestingly if I keep the html element's font-size to its default and change the bootstrap variables to change the font size, am I doing something wrong?
For example:
html { font-size: 16px }
// Changing bootstrap variable to
$font-size-base: 0.875rem //instead of 1rem
With all the confusion and so many different answers. I approached the authors of bootstrap with the question to clear it up once and for all.
It is now crystal that we will need to change $font-size-base which will directly change the root font-size.
I was also advised by their contributor to not control the font-size with html element rather change the bootstrap's variable instead.
REF: https://github.com/twbs/bootstrap/pull/24060
Caution about using just CSS override
using the supplied css example will not work for all aspects of bootstrap sizing.
The compiled result of scss uses the $font-size-base variable to size many things and may be used in more areas in the future.
List of sized elements
dropdown font
button font
popover font
input-group font
forms font
reboot font
-------------- Example SCSS --------------
This is an example for your scss files, note that you need to define the $font-size-base BEFORE including bootstrap in your main scss file. In this case, the app.scss file is the one being compiled.
app.scss
// Fonts
#import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");
// Variables -- this is where you defined the variables
// BEFORE importing bootstrap which will use it's
// defaults if the variable is not predefined.
#import "variables";
// Bootstrap
#import '~bootstrap/scss/bootstrap';
// DataTables https://datatables.net/download/npm#DataTables-core
// #import "datatables";
#import "datatables.min";
_variables.scss
// Body
$body-bg: #ffffff;
// Typography
$font-size-base: 12px; // this changes the font-size throughout bootstrap
$font-family-sans-serif: "Raleway", sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;
Bootstrap defines base font-size in it's _reboot.scss as
body {
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #292b2c;
background-color: #fff;
}
NOTE:- Never change default values into frameworks files always modify values using custom css/js files.
so in order to change your font-size to 14px use this in your own style.css(custom css file)
body {
font-size: 0.875rem;
}
Here is the working fiddle
use !important you are not able to see your changes to override your change on default.
In your custom.scss file do like this:
$custom-variable:0.875rem;
Then use it like this:
#import "./src/scss/_modules/custom";
#import "./bower_components/bootstrap/scss/bootstrap";
body {
font-size:$custom-variable;
}
I'd suggest you to update directly the html {font-size: 16px} property instead of changing Bootstrap's $font-size-base, for several reasons:
html's font size will be directly used in calculating final font size. There's no benefit to use an "intermediary", that is, body that is being adjusted by Bootstrap's $font-size-base.
Bootstrap's SCSS system calculate heading size etc using $font-size-base, so all Bootstrap affected CSS rule will be affected, which includes body (set into $font-size-base$).
However, browser calculate any CSS font size rule in rem relative to html {font-size}, not from $font-size-base affected elements (like body).
Setting html {font-size} using px will affect any rem value, both inside and outside Bootstrap affected elements, if this is what you want to achieve.
Conversely, if you only want to set sizes for Bootstrap-affected-elements, do set the $font-size-base relative to html {font-size}, so CSS elements outside of Bootstrap will not be affected. But I'd say this is more of an edge case, instead of the norm.
Note:
If you're setting $font-size-base or any other Bootstrap variables, you don't have to modify variables.scss file. You should define variables before importing node_modules/bootstrap/scss/variables and other Bootstrap files, so your values got used instead of !default values set in Bootstrap. The advantages: no need to edit the whole variables.scss file.
I'm building an Angular 2 app and wondering how best to do styling in a parent-child fashion. Similar to the Angular 2's 'Tour of Heroes' tutorial, I have a top level styles.css file. Each of my components also have an associated styleUrl pointing to a component specific css file.
I figured I could specify global options in the styles.css file, and overwrite them as needed through component.css files.Then I discovered Angular 2 components are 'view encapsulated', meaning that properties from styles.css cannot be overwritten by the component at all. You apparently can set 'view encapsulation' to none for certain components, but then that component's css properties contaminate other components. That's not what I want.
What exactly is the use of a styles.css file if it can't be overwritten anymore? Is there a way to still set css options globally and overwrite them in certain components?
Example: Plunker example of Angular 2 'Tour of Heroes':
https://angular.io/resources/live-examples/toh-6/ts/plnkr.htmlIn
Inside styles.css one finds the 'master styles', including the h2 properties
h2, h3 {
color: #444;
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
}
The component 'heroes.component.html' includes a h2 title 'My Heroes'. Suppose I want to style this particular h2 title with a different color than the other h2's in my app. I could go into 'heroes.component.css' and specify:
h2 {
color: #999;
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
}
However the color property is NOT overwritten this way because of 'view encapsulation'. Is there a way to still locally overwrite a master style, without changing the color for any other h2 header?
Hello I am trying to use SASS in a project, but have come across a problem and I was wondering if anyone could help?
I have created two style sheets. One called defaults.scss and one called styles.scss. In the defaults.scss I have declared the following:
$mainColor: #848484;
I then try to call the $mainColor in my styles.scss using the following:
nav ul {
list-style: none outside none;
margin: 0; font-size: 1.2em;
color: $mainColor;
padding: 50px 0 0 0;
font-weight: bold;
text-align: center;
}
But I get the following error message: Syntax error: Undefined variable: "$mainColor".
Can anyone see what I am doing wrong? I have compass running.
Thanks.
If understand correctly, you have two .scss files. What I normally do is have a styles.scss and in that file you import all of the other .scss style sheets. I think they call them partials or something. So that your main style.scss compiles all of the .scss files together into the .css file. Right now I don't think your two files are aware of each other. your main styles.scss should simply look like this:
#import "reset.scss";
#import "global.scss";
#import "structure.scss";
#import "colors.scss";
#import "etc.scss";
Make sure they are in your intended cascading order - because that is how they will be smushed together. In your case, default first and then main.
It gets tricky when you start adding media queries too - but this should fix you up I think.
In your html you just need to call your .css file that the whole operation outputs.
<link rel="stylesheet" href="css/style.css"> or wherever you have it going to. Just one.