Nice write up. I've uses SASS only once before, during an experience with
writing an ipad-based front end app in the Sencha Framework. I don't think
I fully experienced its features, as it was just a part of the workflow. I
will have to try it out with Qt development.
Here has been my experience using CSS + Qt4:
- I've done static application themes using either a style.css that I
read into the QApplication, or as a string literal in a module. This sets
the overall theme.
- For custom composed widgets, I have done local stylesheets that
overload the application theme
- For dynamic style behavior, I have used small template string snippets
that I can swap in and out of specific components of a widget:
style1 = "{someProperty: 1; someProperty2: 1; color: $(stateColor)s}"
style2 = "{someProperty: 2; someProperty2: 2; color: $(stateColor)s}"
...if condition: widget.setStyleSheet(style2 % context)
- I still have plenty of need to use custom paint/paintEvent approaches
when I need very custom designed elements. CSS only provides the predefined
states that can be defined for a given widget and doesn't really have much
in the way of logic.
- I do use gradients in my stylesheets and my paint methods
- A downside of stylesheets is that you can't really query their
properties programmatically in any easy way (as opposed to the less
flexible palette system). Like, you can't really know the color of a given
parent when making a color decision dynamically on a child (Example
<http://www.qtcentre.org/threads/44709-How-to-get-a-stylesheet-property>)
- They supposedly can be slower to use and QPalette since they have to
be parsed and rendered. I have hit this before in certain situations, but
it isn't always a problem. Just something to be aware of. Depends on how
many things in your view are being rendered via css
One thing I would love if it existed is a Qt Style Factory application. It
would have a kitchen-sink style interface where mostly all combinations of
widgets are laid out, and you would have an interface for setting
application styles and per-widget styles that update dynamically, so that
you can see and build styling quickly. I know you could kinda do something
using Qt Designer but it would be really clunky and not really feature
rich. My idea of an ideal interface would also help you easily construct a
color palette for the app. Just brainstorming, but I think it could
probably be made easier to develop CSS-based styling for Qt apps, being
that it does have Qt-only CSS concepts that have to be accounted for.
-- justin
On Sun, Jun 8, 2014 at 8:10 AM, Marcus Ottosson <[email protected]>
wrote:
> Hi all,
>
> Thought I’d share some habits I’ve grown to take for granted over the
> years, and encourage you to share yours, with the goal to make us all
> better developers. :)
> 1. Syntactically Awesome Stylesheets
>
> - http://sass-lang.com/
>
> For starters, let me just say that if you aren’t styling via CSS, you’re
> missing out. Python is amazing at many things but styling is not of them,
> and compared to CSS it’s a nightmare. I still remember the day when I
> styled via overriding paintEvent, taming QStyledItemDelegate to my will,
> abstracting away, trying to make things simpler because clearly, there had
> to be a better way. This is that better way.
>
> I should also mention that though CSS will blow the minds of those who
> haven’t given it a shot, CSS is applicable outside of Python too, which
> means that the usergroup you’ll get when googling go beyond Python into
> Web; which is a huge resource when it comes to creating pretty UIs.
>
> Taken further, the next incarnation of Qt GUI creation, QML, is also
> heavily based on the same paradigm (i.e. “declarative” as opposed to
> “imperative”. Google it) which means you’ll future proof your knowledge by
> wrapping your head around the differences.
>
> In short, styling and declarative languages make a much better couple than
> styling and imperative languages.
>
> Now, onwards!
> The problem
>
> Assuming you’re already convinced CSS is for you and your software, here
> is a problem you might encounter along the way - *CSS often contain lots
> of duplicate code.*
>
> As CSS is a much less intelligent “language” with much less syntactic
> sugar, you’ll inevitably end up with lots of duplicated keywords and whole
> stacks of boiler-plate copy/paste material.
>
> Sass is a superset of CSS, a code-generator, essentially filling in for
> what CSS is missing; nesting, variable definitions and encapsulation, and
> most importantly, a nicer syntax, one that actually cares about the visual
> layout of your code; just like Python. Behold:
>
> /*Regular CSS*/QScrollBar:vertical {
> background-color: transparent;
> border-top: none;
> margin: 0px; }
> QScrollBar:horizontal {
> background-color: transparent;
> border-left: none;
> border-right: none;
> margin: 0px; }
> QScrollBar:horizontal::handle {
> margin: 3px;
> border-radius: 4px;
> background: hsva(0, 0, 100%, 10%);
> min-height: 20px;
> min-width: 20px; }
> QScrollBar:horizontal::add-line {
> background: white;
> width: 0px;
> height: 0px;
> subcontrol-position: bottom;
> subcontrol-origin: margin; }
> QScrollBar:horizontal::sub-line {
> background: white;
> height: 0px;
> width: 0px;
> subcontrol-position: top;
> subcontrol-origin: margin; }
> QScrollBar:horizontal::add-page, QScrollBar:horizontal::sub-page {
> background: none; }
>
> // Sass
> QScrollBar
> &:vertical
> background-color: transparent
> border-top: none
> margin: 0px
>
> &:horizontal
> background-color: transparent
> border-left: none
> border-right: none
> margin: 0px
>
> &::handle
> margin: 3px
> border-radius: 4px
> background: hsva(0, 0, 100%, 10%)
> min-height: 20px
> min-width: 20px
>
> @mixin line-mixin
> background: white
> width: 0px
> height: 0px
> subcontrol-position: bottom
> subcontrol-origin: margin
>
> &::add-line
> @include line-mixin
>
> &::sub-line
> @include line-mixin
>
> &::add-page, &::sub-page
> background: none
>
> That warm feeling in your stomach right now is called “love”. But that’s
> nothing.
>
>
> // General colors
> $dark-color: rgb(25, 25, 25)
> $mid-color: rgb(50, 50, 50)
> $bright-color: rgb(75, 75, 75)
> $dimmed-color: rgb(210, 210, 210)
> $lowkey-color: rgb(190, 190, 190)
>
> // Special purpuse colors
> $red-color: hsl(0, 50%, 50%)
> $highlight-color: hsl(35%, 50%, 80%)
>
> // Encapsulation of re-usable sets of properties
>
> @mixin outset
> // Apply an overall soft outwards border
> border-style: solid
> border-width: 1px
> border-left-color: lighten($bright-color, 5%)
> border-right-color: darken($bright-color, 5%)
> border-top-color: lighten($bright-color, 5%)
> border-bottom-color: darken($bright-color, 5%)
>
> @mixin inset
> // Apply an overall soft inwards border
> border-style: solid
> border-width: 1px
> border-left-color: darken($mid-color, 5%)
> border-right-color: lighten($mid-color, 20%)
> border-top-color: darken($mid-color, 5%)
> border-bottom-color: lighten($mid-color, 20%)
>
> // Class assignments
>
> Body
> @include outset
> background-color: $dimmed-color
>
> Footer
> @include outset
> background-color: $lowkey-color
>
> Header
> @include inset
> &:hover
> color: hsva(0, 0, 100%, 80%)
> padding: -2px
> border: 2px dashed hsva(0, 0, 100%, 10%)
>
> Process in Sublime Text
>
> There are a number of ways you can get this hooked up with your sublime,
> here’s my process:
>
> stylesheet.scss --> stylesheet.css
>
>
> 1. Edit .sass
> 2. F7 compiles into .css
> 3. Good to go.
>
> Initially, you might be tempted to
>
> 1. Edit your .sass
> 2. Head over to a terminal
> 3. Run the sass compiler
> 4. Manually specify an output file
> 5. Good to go
>
> For my purposes, their names remain identical apart from their extension
> and in this way I’m never reminded of the fact that I’m generating code.
>
> Finally, since we’re talking Sublime specifically, here’s a potential
> build script you might want to hack away with:
>
> *SASS.sublime-build*
>
> {
> "cmd": ["sass", "$file:${file_path}/${file_base_name}.css",
> "--stop-on-error", "--no-cache"],
> "selector": "source.sass, source.scss, source.css",
> "line_regex": "Line ([0-9]+):",
> "shell": true}
>
> All roses
>
> It isn’t all roses of course.
>
> *No gradients*
>
> Some operators are unique to Qt, like qlineargradient, and these won’t
> work. I have yet to find a need for them, but this is the case.
>
> *Querying properties set in CSS via Python*
>
> This applies to working with CSS in general throughout Qt. The question
> you’ll be faced with is “When is my CSS applied, and when can I count on
> values returned from querying its properties?” If this is you, let me know
> and I’ll show you the way.
>
> *Animation*
>
> CSS has animation capabilities, but these are unfortunately not supported
> by Qt. Hint: This is where QML comes in.
>
> Oki, your turn.
>
> Best,
> Marcus
>
> --
> *Marcus Ottosson*
> [email protected]
>
> --
> You received this message because you are subscribed to the Google Groups
> "Python Programming for Autodesk Maya" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [email protected].
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/python_inside_maya/CAFRtmOAqCYvwEeBS7516cX5QeknGhvPtwZbTuR1uoL7CHAwZaw%40mail.gmail.com
> <https://groups.google.com/d/msgid/python_inside_maya/CAFRtmOAqCYvwEeBS7516cX5QeknGhvPtwZbTuR1uoL7CHAwZaw%40mail.gmail.com?utm_medium=email&utm_source=footer>
> .
> For more options, visit https://groups.google.com/d/optout.
>
--
You received this message because you are subscribed to the Google Groups
"Python Programming for Autodesk Maya" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/python_inside_maya/CAPGFgA00CsHzPGfokGT%2Bv%2B56XAvp4JUEyQMXoWSROWomnWaOzw%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
