Angular: How to use SASS with components?

[bjesuiter]

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 ;)

[matanlurey]

Sure! Here is an example of the type of theming we do internally today:

Assume material_button.scss:

@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 style.scss (global styles):

@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

[bjesuiter]

Hello Matan!

OK, I can see that this could work! Thanks for providing me with this
example!

Only for proving, that I got that right:

• I have to provide a mixin for every style property / group of style
  properties, which should be changeable inside a component.
• There is no way to expose some inner component to the outside, to apply
  more or less arbitrary Css on it? I have a menu component / menu-item
  components which should be stylable. But I don't want to duplicate the css
  interface of the internal components to give that much flexibility.
  But I also see the benefits of having explicit methods for guarding access
  a bit.
• what does this polyfill-unscoped-rule block means?
• how is this selector intended to work? I think, this is there to provide
  some level of control over which material buttons on the page should be
  adjusted by the new rule. But how does it match somewhere inside the
  material button? What selector should be used to target only part of the
  buttons?

Matan Lurey [email protected] schrieb am Fr., 28. Okt. 2016, 00:58:

Sure! Here is an example of the type of theming we do internally today:

Assume material_button.scss:

@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 style.scss (global styles):

@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 https://github.com/filiph

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/dart-lang/angular2/issues/154#issuecomment-256793324,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACQY7KrfKsRcJhtZjBXk_CnGqvbiH6pnks5q4SyEgaJpZM4KhmKn
.

[Aetet]

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?

[bjesuiter]

@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.

[zoechi]

With the most recent Dart version you need pub get --packages-dir. AFAIK there is currently no transformer that supports package paths without the packages dir.
Hopefully sass/dart-sass#19 will land soon.

[Aetet]

@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.

[zoechi]

@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.

[matanlurey]

We're going to try and address this in the next release of Angular components. Thanks!

[thatbrothacodes]

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?

[asaarnak]

@thatbrothacodes

1. Try using WebStorm IDE for scss compile support. https://www.jetbrains.com/help/webstorm/2016.3/transpiling-sass-less-and-scss-to-css.html

1. Or here is a really custom angular2 project that compiles components scss to css with custom script and is using bootstrap-4 also.
   https://gitlab.com/hyperion-gray/ng2_modular_admin/tree/master
   Styles build script is in "/tool" folder.

[bjesuiter]

@matanlurey

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?
I looked at this page, but this does only include normal css includes, which is not what i want to do.
https://webdev.dartlang.org/angular/guide/component-styles

Im confused by these things:

1. How does the mixin knows, where to apply this colorattribute?
2. The contentattribute contains this interpolation of $selector. But from my understanding, this does only print the selector to the content attribute of something, where something is the Answer from question 1. Am I missing something there?

/cc @zoechi

[bjesuiter]

Update (5.2.2017 CET):

I figured out how this works. I'm not entirely sure, how it works, though.
I made up this Q&A Post on Stack Overflow, so that this solution can be found easier on the web.
Maybe you're interested @thatbrothacodes ?

http://stackoverflow.com/questions/42057159/dartlang-how-to-allow-3rd-parties-to-style-your-angular2-component-with-emulate/42057160#42057160

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.

[matanlurey]

@kwalrath Do we have this documented now?

[matanlurey]

Ping @chalin and @nshahan

[chalin]

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.

[andesappal]

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.