I just started using SASS however I can't seem to find a clear answer/example for this.
Say I have:
<img class="socialIcons" src="/images/facebook.png"/>
<img class="socialIcons" src="/images/google.png"/>
I now want to have some additional styles for Facebook and Google - is there some clever SASS syntax I can use for example so I get:
<img class="socialIcons-facebook" src="/images/facebook.png"/>
<img class="socialIcons-google" src="/images/google.png"/>
And in my SASS use:
.socialIcons {
max-height: 30px;
padding-right: 10px;
&.facebook {
background: blue;
}
}
So that it adopts the general socialIcons style as well as Facebook.
Can't seem to figure the syntax.
Thanks.
You mean this?
<img class="socialIcons facebook" src="/images/facebook.png"/>
<img class="socialIcons google" src="/images/google.png"/>
The '&' syntax will match an element that has both the outer class and the class with the & selector. You can overwrite the 'socialIcons' class with the more specific nested selector. No need to change the Sass.
Related
I have an Img component that consists of a figure with a nested image:
<figure>
<img #dragstart="stopDrag" :src="src" />
</figure>
This component is used in another component, where I'm trying to overwrite the inner figure/image's style from the parent. The figure does get new styling, but the inner image does not.
<template>
<List>
<li class="gridItem">
<Img :src="require('#/assets/images/girl.png')" />
</li>
</List>
<template>
...
<style scoped lang="scss">
.gridItem {
& figure {
width: 100%;
height: 100%;
//I did try & >>> img, and it didn't work.
& img {
width: auto;
}
}
}
</style>
The current version of this project is on my Github, so maybe it's easier to see the problem with a cloned repo? Github Repo
>>> seem to have no effect for the Sass implementations I've tried, including node-sass and sass. On the other hand, node-sass and sass still support /deep/.
The following SCSS works for scoped styles with node-sass 4.14.1 and sass 1.26.9:
.gridItem {
& figure {
width: 100%;
height: 100%;
& /deep/ img {
width: 500px;
}
}
}
According to Vue own documentation
"Some pre-processors, such as Sass, may not be able to parse >>> properly. In those cases you can use the /deep/ or ::v-deep combinator instead - both are aliases for >>> and work exactly the same."
So instead of & >>> img do &::v-deep img. I hope this fixes your issue.
Hey guys so im struggling to figure out how to add custom styles to elements for different pages
If i add the styles to the global css it works.
For example i use ui-carousel on three different pages and i need them to look different on each, so global wont work for me in this case
If i put a div class in my indiviudal css pages it works fine as i can name the class.
<h3 style="margin-left: 20px;">Fotos</h3>
<p-carousel numVisible="4"
[value]="_photos">
<ng-template let-p pTemplate="p">
<p>
<img style=" width: 100%;
padding: 4px;
/* margin: auto; */
border: 1px solid #ddd;"
[src]="p.photo">
</p>
</ng-template>
</p-carousel>
Any help appreciated
Let us understand your query first -
You want to change the css styling of element or component in different places.
For this you following options -
#Input inline css
If you have just few properties you want to update then you can opt for inline css.
#Input Style Class
If you have set of themes that you want to apply on the component, then you can go with the CSS Class option as #Input
There are some more advance option like Dynamic Template but I don't think you need that.
Overwrite CSS
To overwrite css you can use :host or :host ::ng-deep
Examples :
:host >>> .ui-dropdown-item {...}
or
:host ::ng-deep .ui-dropdown-item {...}
You can see the demo in action here - https://stackblitz.com/edit/angular-wz8iq4
You can have style-sheet corresponding to each component you create. Specify which stylesheet you want to use for a component while declaring the component:
e.g.
#Component({
selector: 'your-component-selector',
templateUrl: './your-component.html',
styleUrls: ['./your-component.css']
})
You can have multiple stylesheets for a component using the styleUrls array.
Hope it helps!
I think you might need to explain your question a little bit if #alokstar's answer is not what you need, because that is how I would do it as well.
If you have a CSS file for each component, plus the global one, and you specify which stylesheet you want to use in which component, there wouldn't be a problem.
p-carousel {
<some css styling>;
}
I think this article link explains it pretty well too.
Please see this link
Apply CSS Style to child elements
Possible solution would be to apply a custom class name to each instance on a div wrapper or the element itself. You may also need to apply ::ng-deep but ultimately you need some sort of identifier to make them a unique 1:1 to the css you want to apply.
<p-carousel class="classInstance1 " numVisible="4"
p-carousel.classInstance1 .ui-carousel {
position: relative !important;
padding: 0.683rem !important;
border: none !important;
background: white !important;
}
p-carousel.classInstance2 .ui-carousel {
position: relative !important;
padding: 0.683rem !important;
border: none !important;
background: green !important;
}
I have a angular project which use a library called smDateTimeRangePicker , it include the code below:
Link Here
.action {
height: 30px;
margin-bottom: 0;
position: absolute;
bottom: 0;
width: 100%; }
However, in my project, there is a code which also include action class
<div flex class="action cell">
And it is impacted by the CSS above, how to avoid it?
This question considered about these points below:
There is a way that can avoid the CSS impact between project and library.
The library uses a bad practice, it must avoid impacting project. It is a bug for the library and must be fixed.
This impact usually happens, so I need to change my project to avoid the conflict
Rename your project action class to something else is the cleanest way. Else you have to resort to fixes that are considered bad practice like !important, however these still get the job done.
this happens to me quite frequently, so to solved it I just add one parent class to my page or that particular section
<div class="my-unique-class">
---
<div class="action">
---
</div>
---
</div>
.my-unique-class .action {
height: 30px;
margin-bottom: 0;
position: absolute;
bottom: 0;
width: 100%;
}
You can avoid such kind of situation by increasing specificity of your css rules.
There are multiple ways to do so:
Include all third party CSS files before your custom file so that css rules with same priority (In Your Case) can override the rule in third party CSS file.
Above solution should work in most of the cases, but there are chances that Third party CSS might come with higher priority orders, so you can increase weight of your css by adding class at your parent tag as:
.parent > .action {
/ * Some CSS Code */
}
<section class="parent">
<div flex class="action cell"></div>
</section>
MDN has great article about CSS Specificity here
If you can't change your class name, you could make your styles unique to your element by doing:
.action.cell {
/*your styles here*/
}
By leaving out the space between action and cell you are saying that both classes are on the same element. Also, make sure you are loading your stylesheet after the 3rd party stylesheet so that your styles are being applied over theirs.
When you have a CSS rule, you can use !important before semicolon:
background: black !important ;
It marks your rule as "important" and it cannot be changed with any CSS file.
Only inline CSS can overwrite it:
style="background: blue !important"
With the BEM methadology, say I have two classes like this:
.staff__teacher
and .staff__teacher--professor
In the markup for the professor, is the idea to have both classes or just the modified class?
<div class='staff__teacher staff__teacher--professor'></div>
or
<div class='staff__teacher--professor'></div>
From my point of view, it seems to make much more sense to go for the latter as it is more streamlined and easier to read.
In Sass, the class would be created by simply extending the .staff__teacher class
.staff__teacher--professor{
#extends .staff__teacher;
//...extra professor styles here..
}
However, in the majority of tutorials I've seen on BEM, both classses are added to the markup. Can someone help me understand if one way is preferable to the other? Are there any problems that using my method might cause?
Firstly, this is a fairly opinion based answer. There is nothing stopping you using #extends instead of a base class. Here are some reasons why two classes may be used.
1. It's not just about SASS
Firstly, not everyone uses SASS. Even LESS didn't have extend until fairly recently. A methodology should not limit itself to a particular preprocessor or one at all. Plain old CSS is what we are looking at here. However to could do something like this:
CSS
.button,
.button--red,
.button--green {
// base styles
}
Personally I'd rather leave the base style alone once I've written it and in the case of buttons I might have quite a lot of modifiers. For me this is getting a bit messy, where as putting two classes on an element is keeping my CSS cleaner and more concise.
2. Descriptive
Part of BEM is that classes are now more descriptive, you can look at a stylesheet and have a greater understanding of the module/component and what is contained within it. For me base classes do the same. It gives me more information when I'm looking at my markup.
<input type="submit class="button button--green"/>
I can see it's a green button and that it derives from button, I know I can change this easily and there are probably other options available to me. All without looking at the stylesheet.
3. Flexibility and consistency
Don't think that you will only ever have a base class and one modifier. You can quite easily have many. For example, I could have button, button--large and button--green.
<input type="submit class="button button--large button--green"/>
So which modifier would extend button? If both did then you would have the same styles applied twice. How does another developer know? By keeping a simple consistent approach your component is much clearer to read, understand and use correctly.
Summary
These were a few reasons why extend is not used often in examples. I think the most important point is, what ever you do make sure is a consistent approach and all developers are aware of this.
use code this sample
//css
<style>
.firstClass{
color:red;
font-size:20px;
}
.secondClass{
border:1px solid red;
font-size:30px;
display:inline-block;
}
.thirdclass{
font-size:40px;
}
.fourthclass{
padding:50px;
}
</style>
//use code html
<div class="firstClass secondClass thirdclass fourthclass">khitsapanadilove#gmail.com</div>
<div class="secondClass thirdclass"> khitsapanadilove#gmail.com </div>
<div class="thirdclass firstClass"> khitsapanadilove#gmail.com </div>
<div class="secondClass fourthclass"> khitsapanadilove#gmail.com </div>
// another example use css code
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
#extend .message;
border-color: green;
}
.error {
#extend .message;
border-color: red;
}
.warning {
#extend .message;
border-color: yellow;
}
//write you html code
<div class="message">khitsapanadilove#gmail.com</div>
<div class="message success"> khitsapanadilove#gmail.com </div>
<div class="message error"> khitsapanadilove#gmail.com </div>
<div class="warning message"> khitsapanadilove#gmail.com </div>
So let's say I have the following in 'foo.css':
.border { border : solid 1px; }
#foo { color : #123; }
#bar { color : #a00; }
Now let's say that I have two divs I want borders for, so I do:
<div id="foo" class="border">Foo</div>
<div id="bar" class="border">Bar</div>
This works fine, but I find that when defining #foo and #bar in my css file, I would rather give them the characteristics of .border than give the div's the class, like so:
.border { border : solid 1px; }
#foo {
<incantation to inherit from .border>
color : #123;
}
#bar {
<incantation to inherit from .border>
color : #a00;
}
and then my html would just be:
<div id="foo">Foo</div>
<div id="bar">Bar</div>
Anybody know what that magic incantation is?
That is not supported by css. The best you can do is something like:
#foo, #bar, .border { border : solid 1px; }
#foo { color : #123; }
#bar { color : #a00; }
You might be interested in mixins with Sass. Sass lets you write css style sheets in a more efficient way, using tricks like this. Mixins let you define a group of attributes (say, to do with borders), and then include those attributes within certain css classes.
As Wsanville said, you can't use the class.
But normal CSS inheritance does work - say if your html was
<div class="border">
<div id="foo">
hello
</div>
<div id="bar">
world
</div>
</div>
You could say
.border {border: 1px solid #f00;}
#foo {border:inherit;}
Which in some cases might be good enough
If you're looking to push your CSS further instead of using some of the tricks outlined in earlier posts, you should look into CSS Compilers. They take CSS-like code you've writen, usually CSS with a few tricks added in, and turn them into normal CSS for the web.
David Ziegler wrote about some of the cool featured CSS compilers offer:
Variables - Good programmers don’t like to hardcode. In many cases you can avoid this in CSS by using good inheritence, but sometimes it’s unavoidable. With variables, changing your color scheme means updating one variable instead of 13 attributes.
Math - This goes hand in hand with variables. Say your left column is 100px, your right column is 500px, and your wrapper div is 600px. Well, maybe you decide to change it to 960px. Wouldn’t it be awesome if the width of your columns adjusted automatically? The answer is yes.
Nested Styles - This is probably the most important. CSS is flat, which means complex sites end up with CSS that is a pain to go through.
You can read about popular compilers in his blog post on the subject, or do some searching and find one that works best for you.