5 Replies Latest reply: Feb 23, 2011 8:41 AM by sprwlds RSS

    Use css variables in css stylesheet file

    fisad Community Member

      Anybody know if is posibble use variables inside the ccs file for Flex application.


      Example: I have a declaration like:

      global{baseColor = "#999999"}


      I need use this color in many other declaration. I know this is posibble in css for html, example:


      @server variable myColor = #3333333



      color = myColor



      I have a css file with a lot of declaration and it grow time by time, is very hard write the same color many times.


      Any help???

        • 1. Re: Use css variables in css stylesheet file

          There is no way to define variables inside a css file. This seems to be a top request by web developers, and there is also an article here about why css should NOT support variables. I am including links that talk about the issue.
          The links also talk about how to define the same color for multiple selectors.
          http://stackoverflow.com/questions/47487/create-a-variable-in-css-file-for-use-within-that -css-file


          Hope that helps!

          • 2. Re: Use css variables in css stylesheet file
            fisad Community Member

            Thanks for the information but, my problem is for Flex Skining (that is a css file) not for HTML tags. I make many skins for load at runtime.


            If you work with few components or simple structure, you can repeat you selector in some places, but if you work with complex skin structure or with many custom components that works is very hard. When you have a css file of 500 lines of code and one color is used in 150 different lines (same type of file for many different skins) will be very hard change each color dependency.


            I think, the better way is make my own Flex Application Styler, not Flex Styler than work with one component at time.


            I am trying make a skin library styler for Flex 4, the new style is better but if you make a custom skin for a component and a exclusion is include for background or labelDisplay, override procedures are neccesary and the skin change are make at runtime only.


            Thanks a lot

            • 3. Re: Use css variables in css stylesheet file
              RituKnowsFlex Community Member

              The link below has an example of how to create a custom skin property and pass a value to a custom skin property. It might help with some of the exclusions that you are trying to define.



              • 4. Re: Use css variables in css stylesheet file
                fisad Community Member

                Yes, I use that technique for a simple component but, if you want use the same component with differents skin, to make a same component for each skin is necessary. The problem remains!.


                I like get to my customers the possibility of change the main skin for the whole website, I don´t like remake skin colors or skin layout each time my customers request a layout change, for that a make many skins for each site and each customer take a chance to set default skin for the site.


                Lite example: I make a custom Panel with buttons in the title bar, rollOver and down color are skin dependent, if I set thats colors inside the skin, I need a copy of my custom panel for each skin I will be maked. If I want use default skin colors for the custom panel (get colors from basic setting of css skin in global selector), a exclusion is necessary for that but the custom panel colors should be inside the css file. Again, the problem remains, for each skin created the definition of custom panel colors is mandatory. Finally, if I was maked to much custom components, I need make skin colors definition for each one, not problem, to much time, but is possible with time.


                My idea is make a interface like old Flex Style Explorer but for the whole application, with that I can set a color for the label text, background, roolOver etc, for example, and I can see how is work with all components, if I will make a new one, I need add this one to the sample application a see the result, when all is ok I can create the css file definition easy.


                The main problem with Flex 4 and Flash Builder, you can´t see css definitions result visually like old Flex Builder 3. In Flex 3 I make a lot of skins using Fireworks and Flash facilities, in both, I make script for change basic color of components and all color and borders definitions was set automatically. Now, I want change the technique to use css settiing only.


                Thank for your time.


                Best regards.

                • 5. Re: Use css variables in css stylesheet file

                  I know this thread is old but this might help others:


                      private var myColour:int = 0x000000;

                      @namespace s "library://ns.adobe.com/flex/spark";
                      s|Button {
                          color: PropertyReference("myColour");