My main.scss file is as:
#import "components/variables.scss"; // This file contains all font variables etc
#import "components/global.scss"; // This file contains global styles to be applied
#import "components/header.scss"; // All header and top menu navigation
#import "components/bslider.scss"; // The main middle slider that have whole content of webside as slides.
I have added newlines after each #import statement but when the output is generated there is no space in between css of individual files. The output is like this:
* {
font-size: 14px;
}
/*global css finishes*/
/*header css starts*/
header {
position: absolute;
}
But I want newlines like this:
* {
font-size: 14px;
}
/*global css finishes*/
/*header css starts*/
header {
position: absolute;
}
I am using yeoman webapp generator to convert sass into css. Any help will be appreciated, thanks.
I haven't used yeoman , but you can change the style of the css that is output
sass --watch yourfile.scss:style.css --style expanded
You can read more on SASS styles here:
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#output_style
Related
I am working on custom styles for my Spartacus application and struggling with the order of the CSS rendered. Despite the order of imports in my styles.scss, my custom CSS rules are rendered in the middle of Spartacus default styling, forcing me to bump up the specificity of my rules to achieve desired results.
This is my styles.scss:
$styleVersion: 4.3;
#import '~#spartacus/styles';
#import './styles/custom/_index';
/* custom/_index.scss contains further imports of the actual styling */
and this is the snippet of the rendered CSS:
/* Spartacus defaults
...
*/
cx-wish-list-item .cx-return-button .btn-link:hover {
text-decoration: underline;
}
/* My custom code */
header .SiteLogo {
width: auto;
max-width: 150px;
}
/* Spartacus defaults continued */
cx-bulk-pricing-table table {
text-align: center;
}
/*
...
*/
Working with Spartacus 4.3 and Angular 12. My objective is to:
keep my custom code as simple and low-specificity as possible
be able to leverage Bootstrap and Spartacus variables and mixins in my SCSS
Is there a way to ensure my custom styles are rendered last, according to the imports order?
In the documentation they mention wrapping custom styles in the body tag in style.scss.
link here
Try wrapping your scss in the body tag. This worked for me.
body {
cx-wish-list-item .cx-return-button .btn-link:hover {
text-decoration: underline;
}
/* My custom code */
header .SiteLogo {
// width: auto;
width: 150px;
}
/* Spartacus defaults continued */
cx-bulk-pricing-table table {
text-align: center;
}
}
In order to control the order of styles, it is better to import the styles by yourself.
First, check the angular.json file (as there might be other Spartacus related style files) and keep only one styles file there:
"styles": [
"src/styles.scss"
],
Then, in styles file import all other styles in required order, e.g.:
#import '~#spartacus/styles/index';
#import './styles/custom/_index';
I have an Angular CLI app and I'm using #import '~#angular/material/theming'; in the global styles.scss. I also have a component where I would like to define a css class in that component's .scss file that uses some of the Angular Material typography:
#import '~#angular/material/theming';
$config: mat-typography-config();
.myClass {
font-size: mat-font-size($config, title);
font-weight: bold;
}
By importing ~#angular/material/theming more than once in my application, will it include that css more than once and bloat my payload? Or is the Angular CLI compiler smart enough to handle this?
If you're importing the same CSS into multiple components, then yes the CSS will be duplicated, but each time it will be scoped to that component.
For example if you have the following...
product-list.component.css:
#import '../../foo.css';
...
top-bar.component.css:
#import '../../foo.css';
...
../../foo.css:
a { color: red; }
Your css output in the tag will look something like this:
<style>
a[_ngcontent-gna-c48] { color: red; }
...
</style>
<style>
a[_ngcontent-gna-c50] { color: red; }
...
</style>
Here's a full StackBlitz based on Angular's Getting Started example project.
I'm having trouble understanding how exactly I should build sites with CSS. I get that each component has it's own CSS, but should I do this with every component? What if the components are huge with a lot of CSS?
I've looked at some sites that were built with vue.js and they have external CSS files such as a app.css file with a ton of internal style blocks.
I'm use to building sites with Sass in it's own /styles directory and having compass.app compile those .scss files into .css files.
Here's an example of a component css block:
<style lang="scss">
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
a {
color: red;
}
}
</style>
What if that was a thousand+ lines? Would I move that into an external scss file and if so, how? How does this all work?
Thanks.
If you concern is about code separation you can have custom CSS code in a component and add a scoped attribute so the styles you are writing there would only apply to that component:
<style lang="scss" scoped>
/* your scoped css rules here will only apply to this component */
</style>
Now if you also want to compile the CSS from all of your components and merge them into a single final CSS file that you would link from your main HTML file then you need to add a bundler/compiler such as webpack
You can also take a look at vue css-loader to understand how to modularize and compose your CSS rules.
I am using Gulp and Boostrap to put together a theme. I have main.scss file which has the following code:
#import 'base/_base.scss';
#import 'base/_mixins.scss';
#import 'base/_variables.scss';
#import 'layouts/_footer.scss';
#import 'layouts/_header.scss';
#import 'layouts/_nav.scss';
#import 'modules/_typography.scss';
#import 'modules/_blocks.scss';
#import 'modules/_buttons.scss';
#import 'modules/_sections.scss';
#import 'modules/_components.scss';
#import "bootstrap";
#import "bootstrap/theme";
Bootstrap is being loaded ok as I can see it in a index page I have. The issue comes is when I add code to e.g. _base.scss. I added the following:
body {
font-size: 16px;
line-height: 1.5em;
color: #666666;
}
and then ran gulp and I can see that it generated a css main.css file for me, which the index page is using. I can see the body override at the top of the main.css file, but when I load the page it isnt being applied. I can see in inspect element that it is being overridden by bootstrap definition of body further down.
I did another test and set $font-size-base: 16px; and ran gulp and it applied that change fine.
If anyone can point me in the right direction, it would be very much appreciated.
As I see it you have 2 choices.
body
{
font-size: 16px !important;
line-height: 1.5em !important;
color: #666666 !important;
}
You load your css file after bootstrap.
In your css file you add !important to the end of anything you want to override like above.
Can you try this
html body {
font-size: 16px;
line-height: 1.5em;
color: #666666;
}
tl:dr version: is there a way to #extend a css class and not have the original class appear in my compiled css without changing all my css classes to %placeholder classes?
Short answer based on the below answers: it appears there is no way to do this unless you go through and convert the css to silent/placeholder classes e.g. convert .one{} to %one{} and even then that will cause problems with media queries.
I have a css file (lets call it "style.css") which contains 200+ CSS classes to style various elements like forms and buttons etc. What I want is to include some of those classes in a project and other classes from that file in other random projects/websites. With each new project I also want to give the classes random semantic class names of my choosing.
My preprocessor of choice when working with CSS is SCSS and I really need an answer that uses the power of SCSS.
Here is a quick example of what I'm talking about - loading css into a SCSS file and then extending that css with my own class names:
//style.css
.one {
color: red;
padding-top: 1px;
}
//style2.scss
#import "style.css";
.two {
#extend .one;
}
The problem here is that my SCSS file will compile to CSS and look like this:
//style2.css
.one {
color: red;
padding-top: 1px;
}
.two {
color: red;
padding-top: 1px;
}
But what I want to do is only include the second class, which I gave a special name.
I've tried a few ways of doing this but here's one example that does not work but is along the lines of what I was thinking I should be able to do:
A.) First, I grab the style.css file and chuck copy/paste it into a style.scss file.
B.) Second I wrap all the whole thing in a placeholder/silent class, like so:
//style.scss
%placeholder {
.one {
color: red;
padding-top: 1px;
}
}
C.) Then I import that SCSS file and try and extend a class of my choosing that is within the placeholder, like this:
//style2.scss
#import "style";
.two {
#extend .one;
}
When I try and compile this I get a blank css file (and rightly so for trying to be too tricky). The other thing I know is that you can't extend nested selectors so "#extend %placeholder .one;" is also out of the question.
My question is this: does anyone know of a way to import and then extend a css class so that the compiled result does not include the imported css?
The only other solution I can think of is to just delete the imported css from the top of my file before I let it out into the wild. But this is honestly less than ideal solution.
Thank you in advance to any answers :)
You're using placeholders incorrectly, the placeholder should simply be one, no need to wrap it. Try this:
// style.scss
%one {
color: red;
padding-top: 1px;
}
// style2.scss
#import "style";
.two {
#extend %one;
}
Note that there is an issue with this approach. While the outputted CSS is leaner than using a mixin (#include), you will not be able to use %one inside of any #media queries. Ie. this will not work:
// style2.scss
#import "style";
#media screen and (max-width:1024px) {
.two {
// This won't produce CSS as it's inside the media query
#extend %one;
}
}
The only way I'm aware to get around this is to use a mixin instead of a placeholder which will result in more CSS (if you use one more than once).
// style.scss
#mixin one() {
color: red;
padding-top: 1px;
}
// style2.scss
#import "style";
#media screen and (max-width:1024px) {
.two {
#include one();
}
}
I've detailed the difference in output between mixins and placeholder selectors on my blog if you're not aware.