#stylesheets — Public Fediverse posts

Hmm, is there a way to use sass combinators with attribute string concatenation for the value?

Here are my outputs:

data-class="Form-status--complete"
data-class="Form-status--in-progress"
data-class="Form-status--expired"

I want to do something like this:

    [data-class='Form'] {
        &-status {
            &--complete {
                color: $c-state-orange;
            }

            &--in-progress {
                color: $notice-icon-pending;
            }

            &--expired {
                color: $c-state-gray;
            }
        }
    }

Of course that doesn't work. But I am not sure if I can avoid repeating myself

I am assuming you can't just open the square brackets and wrap them around your logic like:

[data-class='Form {
   &-status {
   ...
}']

#css #sass #scss #stylesheets #html #FrontEnd #FrontEndHelp #WebDev

#Development #Templates
My opinionated CSS reset · Modern base styles for consistent web design https://ilo.im/16a17y

_____
#CssReset #StyleSheets #Consistency #Browsers #WebDesign #WebDev #Frontend #CSS

#Development #Templates
My opinionated CSS reset · Modern base styles for consistent web design https://ilo.im/16a17y

_____
#CssReset #StyleSheets #Consistency #Browsers #WebDesign #WebDev #Frontend #CSS

#Development #Templates
My opinionated CSS reset · Modern base styles for consistent web design https://ilo.im/16a17y

_____
#CssReset #StyleSheets #Consistency #Browsers #WebDesign #WebDev #Frontend #CSS

#Development #Templates
My opinionated CSS reset · Modern base styles for consistent web design https://ilo.im/16a17y

_____
#CssReset #StyleSheets #Consistency #Browsers #WebDesign #WebDev #Frontend #CSS

#Development #Approaches
My CSS selector strategy · Think of it as a “progressive narrowing of scope.” https://ilo.im/168bgo

_____
#Stylesheets #CssSelectors #WebDev #Frontend #CSS

#Development #Proposals
Zombie styles · Do your CSS files also contain any zombies? https://ilo.im/1687os

_____
#Terminology #Stylesheets #CssDeclarations #CssSpecificity #UiComponents #Frameworks #WebDev #Frontend #HTML #CSS

#Development #Approaches
CSS @import is cool, actually · It delivers some useful features a ‘link’ doesn’t offer https://ilo.im/161egj

_____
#Stylesheets #Browser #WebPerf #WebDev #Frontend #CSS #FeatureQuery #MediaQuery

#Development #Templates
A (more) modern CSS reset · Up-to-date CSS rules for consistent cross-browser styling https://ilo.im/158zs3

_____
#WebDev #Browsers #Compatibility #Frontend #CSS #StyleSheets #CssReset

#Development #Templates
A (more) modern CSS reset · Up-to-date CSS rules for consistent cross-browser styling https://ilo.im/158zs3

_____
#WebDev #Browsers #Compatibility #Frontend #CSS #StyleSheets #CssReset

#Development #Templates
A (more) modern CSS reset · Up-to-date CSS rules for consistent cross-browser styling https://ilo.im/158zs3

_____
#WebDev #Browsers #Compatibility #Frontend #CSS #StyleSheets #CssReset

#Development #Templates
A (more) modern CSS reset · Up-to-date CSS rules for consistent cross-browser styling https://ilo.im/158zs3

_____
#WebDev #Browsers #Compatibility #Frontend #CSS #StyleSheets #CssReset

Updated my Mastodon (glitch-soc) tweaks user-script (which is currently just CSS tweaks) a bit to have a different fallback font as Verdana was causing issues with combining glyph composition. (See this thread for some debugging of that.)

Tweaks included:

• Increase the width of the first and last column so there's more space for the text and media of your home timeline, and the expanded posts
• Increase size of emoji / emotes when you hover over them, making it easier to see what they are supposed to represent
• Change the font to Optima Nova LT Pro, Atkinson Hyperlegible, Roboto, Arial, or a sans-serif font.
• Add a small purple bar above images that come without status content text, so you have some easy-to-click-on area to expand the post.

#Mastodon #GlitchSoc #MastoDev #userStyles #userScripts #FiXatoCodes #coding #CSS #stylesheets #Unicode #FontComposition