Skip to content

Commit

Permalink
add SCSS documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
dansiegel committed Apr 28, 2018
1 parent 49a61a7 commit eb58257
Showing 1 changed file with 33 additions and 0 deletions.
33 changes: 33 additions & 0 deletions ReadMe.md
Original file line number Diff line number Diff line change
Expand Up @@ -242,6 +242,39 @@ It can sometimes be confusing as to where you generated App Package is after you
| BuildToolsArtifactOutputPath | `{Solution Dir}/Artifacts` |
| DisableBuildToolsArtifactCopy | `false` |

### SCSS For Xamarin.Forms 3.0

CSS support in Xamarin.Forms is the most revolutionary change to Styling XAML. CSS though is traditionally problematic on larger projects as it can quickly become hard to maintain, and error prone as it lacks reusability of common values which could include setting various properties or reusing the same color from one element to the next. With SCSS you gain the ability to break your stylesheets into logical reusable chunks and you gain the ability to define variables and functions for creating your styles. The Mobile.BuildTools now supports Xamarin.Forms CSS generation as part of the build process.

**NOTE** The Xamarin.Forms CSS spec does not generate valid CSS and as a result SCSS will not support the use of ^.

Valid Xamarin.Forms CSS

```css
^button {
background-color: transparent;
}

.primary ^button {
background-color: #78909c;
}
```
The Mobile.BuildTools will post process your SCSS to generate valid CSS for Xamarin.Forms when using the selectors `any` or `all`.

Valid SCSS used by the Mobile.BuildTools

```css
button:any {
background-color: transparent;
}

.primary button:all {
background-color: #78909c;
}
```

To get started, simply add any scss format stylesheets you want to your project and make sure that the build action is set to `None`. The Mobile.BuildTools will automatically detect them and generate a CSS file for each non-partial (anything not starting with an underscore). For more information on how to get started with SCSS see the [Getting Started Guide](https://sass-lang.com/guide) from LibSass.

[PrismNuGetShield]: https://img.shields.io/nuget/vpre/Prism.MFractor.Config.svg
[QuickStartNuGetShield]: https://img.shields.io/nuget/vpre/Prism.QuickStart.MFractor.Config.svg
[PrismNuGet]: https://www.nuget.org/packages/Prism.MFractor.Config/
Expand Down

0 comments on commit eb58257

Please sign in to comment.