Skip to content

Commit eb58257

Browse files
committed
add SCSS documentation
1 parent 49a61a7 commit eb58257

File tree

1 file changed

+33
-0
lines changed

1 file changed

+33
-0
lines changed

ReadMe.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -242,6 +242,39 @@ It can sometimes be confusing as to where you generated App Package is after you
242242
| BuildToolsArtifactOutputPath | `{Solution Dir}/Artifacts` |
243243
| DisableBuildToolsArtifactCopy | `false` |
244244

245+
### SCSS For Xamarin.Forms 3.0
246+
247+
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.
248+
249+
**NOTE** The Xamarin.Forms CSS spec does not generate valid CSS and as a result SCSS will not support the use of ^.
250+
251+
Valid Xamarin.Forms CSS
252+
253+
```css
254+
^button {
255+
background-color: transparent;
256+
}
257+
258+
.primary ^button {
259+
background-color: #78909c;
260+
}
261+
```
262+
The Mobile.BuildTools will post process your SCSS to generate valid CSS for Xamarin.Forms when using the selectors `any` or `all`.
263+
264+
Valid SCSS used by the Mobile.BuildTools
265+
266+
```css
267+
button:any {
268+
background-color: transparent;
269+
}
270+
271+
.primary button:all {
272+
background-color: #78909c;
273+
}
274+
```
275+
276+
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.
277+
245278
[PrismNuGetShield]: https://img.shields.io/nuget/vpre/Prism.MFractor.Config.svg
246279
[QuickStartNuGetShield]: https://img.shields.io/nuget/vpre/Prism.QuickStart.MFractor.Config.svg
247280
[PrismNuGet]: https://www.nuget.org/packages/Prism.MFractor.Config/

0 commit comments

Comments
 (0)