How to Add Local and Global Shared Styles
Description
Shared styles are an easy way to create a cohesive look and feel across multiple applications.
Discussion
Shared styles are an easy way to include common design elements in multiple applications or components in Alpha Anywhere. A shared style sheet can include both CSS and Sass. For example, if you have created a set of Sass functions that can be used to dynamically generate gradient colors, you may want to define the Sass in a shared style allowing you to easily access the function in Sass defined in a component or local style.
Shared styles automatically included in and published with a project. They can be added at the project or global scope. Project level shared styles are included in every component for a project. Global styles are included in every Alpha Anywhere Project.
To add a shared style, create a file called "style.sass". Place the desired style definitions in the style.sass file and save it in either the global or project level shared style folder. The location of the directory is listed below for project and global shared styles:
- Type
- Location
- global
[Executable Folder]\css\_sharedStyles\style.sass
- project
[Project Folder]\css\_sharedStyles\style.sass
If you don't know where the executable folder is, you can run the following Xbasic command in the interactive window to find out where the Alpha Anywhere executable is located:
? A5.GET_EXE_PATH()
The next time you publish your application, any project and global shared styles will be published with your project. You can reference class definitions in the shared style directly in controls, HTML, and client-side templates without needing to manually include the files in the component properties.