-
Notifications
You must be signed in to change notification settings - Fork 233
How to use SASS with components? #154
Comments
Sure! Here is an example of the type of theming we do internally today: Assume @mixin button-color($selector, $color, $hover-color: $color) {
polyfill-unscoped-rule {
color: $color;
content: '#{$selector} > .content';
}
polyfill-unscoped-rule {
color: $hover-color;
content: '#{$selector}:hover > .content';
}
polyfill-unscoped-rule {
color: rgba($color, .26);
content: '#{$selector}.is-disabled > .content ';
}
} Then for usage, you would put in your @import 'path/to/material_button.scss';
@include button-color($selector: '*', $color: red, $hover-color: blue); We should have something published on this in the next release of the Angular components. /cc @filiph |
Hello Matan! OK, I can see that this could work! Thanks for providing me with this Only for proving, that I got that right:
Matan Lurey notifications@github.com schrieb am Fr., 28. Okt. 2016, 00:58:
|
Hello. What is the best way to compile styles for angular dart? With custom transformer, or use something like build, bazel package, that will place files right in front of dart modules which use styles? |
@Aetet You can use the sass Transformer package for now. It works quiete well for me. And it should also compile the sass files inside the dependency packages. But I have to check that. |
With the most recent Dart version you need |
@bjesuiter Transformers API at dart is not good enough for this. On large project with large amount less files it compiles too slow. Pub serve starts only after 2 minutes. That's too slow for me. |
@Aetet it seems they are moving away from transformers anyway. You can also already use other tools that build SCSS to CSS (like watchers running in background and compiling on file changes) and don't use transformers for SASS at all. |
We're going to try and address this in the next release of Angular components. Thanks! |
I'm still confused on how I can use sass in my components. I have been able to use it for regular HTML pages, but cannot get it to work for my components. Is there a working example I can use in order to get this to work correctly? |
|
Ok, so I thought, I understood it, but as I tried it now, I'm not able to get it working properly. Is there now a more detailed explanation of this somewhere? Im confused by these things:
/cc @zoechi |
Update (5.2.2017 CET):I figured out how this works. I'm not entirely sure, how it works, though. I think, styling of angular2 components written by someone else and imported as dart library, deserves way more attention. I wonder why there's so little material on this, given that such a mechanism is needed very frequently, when you want to re-use angular2 components from someone else. |
@kwalrath Do we have this documented now? |
This hasn't been addressed yet in the docs, but dart-lang/site-webdev/issues/348 has been open to track the request, so you can probably close this issue. |
Hi @matanlurey, is this issue for the case where I'd have to use an App Layout in some component of the Router example? If yes, on which component would you define App Layout? Thanks. |
Hey Guys,
I would like to now how to use SASS to "inject" styles from outside the shadow Dom view into the component. @matanlurey - you wanted to provide some little examples how to do this with mixins when I asked you at dart dev summit ;)
The text was updated successfully, but these errors were encountered: