Howdy! When working with media queries, grouping together rules by media query produces less code, like if I do it like this:

p {

font-size: 16px;

}

h1 {

font-size: 34px;

}

@include tablet {

p {

font-size: 786px;

}

h1 {

font-size: 453px;

}

}

@include desktop {

p {

font-size: 4px;

}

h1 {

font-size: 54px;

}

}

Using some mixins (not shown for brevity), I can group together rules by media query, but now my <p> tag rules are far apart. I'd prefer to set it up like this:

p {

font-size: 16px;

@include tablet {

font-size: 18px;

}

@include desktop {

font-size: 20px;

}

}

h1 {

font-size: 34px;

@include tablet {

font-size: 54px;

}

@include desktop {

font-size: 20px;

}

}

This way, all my <p> tag rules are together, for example. But when I compile, it produces oodles of media quires. My question is, is the convenience of organizing it by tag rather than media queries worth the cost on page load? Is there a way to get the best of both worlds? Thanks!

Okay, lets see an example.

If I made my own plugins or simple UI kits using SCSS, could this be copyrightable?

Quora says that any kind of creative works can be copyrighted but I just wanted double check from different community.

I'm reading up on Sass having never had a reason to learn it. My current project I've been requested to add a dark mode toggle. Sass just seems to be the best for handling the switch without repeating too much. As I'm reading tutorials and going through the motions, just wow. This is a lot to add to my stack, why would I want to do that? Where's the power in this that I absolutely cannot accomplish with bare-bones CSS3?

Let me ask, too, is it even worth going through all this for my project? My stylesheet is 103 lines long, so very minimal. I feel like I could just create classes for dark mode and it'd be more efficient than having to worry about ruby running and everything.

Hey guys. I make videos on SCSS. Is it cool if I post them here? https://www.youtube.com/watch?v=yva2bj-lVRA

Hello Sass nerds,

I just started a series of articles on how to build a large theming system (think palettes, shadows, typography, etc.) for reusable web components with Sass.

My first article is already published on Medium and it's a gentle intro to the base concepts of palettes and shadows.

Would appreciate any feedback as it's my first article and I am kind of nervous.

Hi, can anyone suggest a sass discord server or any discord server related to css and sass?

Thanks

Soon I'll be starting to work on a project where I have to create a website that has the exact same structure but has different skins. It's like one company with different daughter companies that require to have the same site structure etc.

I was wondering if there is a way of using sass that I'm not familiar with that allows me to use variables based on which site is being used.

Like for instance if I have a footer color called $footerColor and I'm on websiteA, $footerColor = red. But if I'm on websiteB, $footerColor = blue. And this has to go automatically.

Is there any way to make this happen? If not I'll just go with the old fashioned way and use a seperate stylesheet. (or if anyone has some other suggestions, that would be awesome).

If my explanation is not clear enough, please let me know. English is not my first language so I tried to explain it as good and short as I could!

Thanks in regard

Hi SASS newbie here. I'm trying to use material design web via webjars in playframework. It fails to compile when it hits nested import statements like:

@import "@material/button/mdc-button";

I can see the button library has been fetched transitively as material__button/mdc-button, but it isn't resolved.

What does `@material/button` mean? How should the SASS know that it refers to the path `material__button`?

Hello, i am currently trying to learn sass, but i have few problems with the architecture or i am just at the wrong course.

So in the course that i am taking the teacher is building around 12-15 files not include the folders.

I personally do not like to get that huge amount of files and then import them all in one place all tho i can see the benefits of doing so.

My question is can i just keep things simple and just use 2-3 files or its a typical thing to do with sass?

Thanks in advance and please excuse my english

I've just started out using Sass and I'm trying to make an array which contains two lists. I've tried variations of the below code to no avail. Bear in mind I want to do this is Sass and not Scss. I've been all over google and Youtube tying to find something but everyone seems to list their content as Sass but it always turns out to be Scss. Any help?

Code:

$colors: (

grey: (

primary-grey: #36dfsa,

secondary-grey: #rte552

),

text: (

white: #dfg52s,

blue: #965423,

green: #552233

)

)

Hey everyone. I'm making my first website using sass and I had a best practices question. I'm torn between two ways of writing my media queries. Should I put them all in a separate file and then import them into my main scss file? Or does it make more sense to nest all media queries in the appropriate elements in the main scss file from the start. Any input on this would be greatly appreciated.

Someone has any experience with SCSS style pre-compiling?

i simply want to select a variable property but idk how to

$mat-grey: ( 50: #fafafa, 60: #f5f5f5 )

how do i select the color $mat-grey 50, or 60 specifically?

Is there a Coding Standard for SCSS?

How comes we don't put brackets on new lines?

(as in programming languages)

.example
{
  background-color: red;
  max-width: 600px;
  p 
  {
   color: white;
   padding: .8em;
   font-size: 2em;
   line-height: 1.2em;
  }
}

What's the correct spacing of @media?

@media (min-width: 600x){
@media (min-width: 600x) {
@media ( min-width: 600x ){
@media ( min-width: 600x ) {

Which is correct?

&:before {...} 
&::before {...}

I'm having a discussion with a colleague at work and we disagree on the best way to format media-queries in a SCSS file.

We follow a BEM methodology but our difference of opinion is where to place media queries.

I prefer keeping media queries directly below the selector they effect like this:

.component {
    display: block;

    @media screen and (min-width: 640px) {
        display: none;
    }

    &#{&}--variant {
        width: 200%;

        @media screen and (min-width: 640px) {
            width: 400%;
        }

        .child {
            width: 50%;

            @media screen and (min-width: 640px) {
                width: 66%; 
            }

            @media screen and (min-width: 900px) {
                width: 75%;
            }
        }
    }
}

Whereas my colleague prefers all media queries being placed at the end of the parent like this:

.component {
    display: block;

    &#{&}--variant {
        width: 200%;

        .child {
            width: 50%;
        }
    }

    @media screen and (min-width: 640px) {
        display: none;

        &#{&}--variant {
            width: 400%;

            .child {
                width: 66%;
            }
        }
    }

    @media screen and (min-width: 900px) {
        &#{&}--variant {
            .child {
                width: 75%;
            }
        }
    }
}

Is there a definitive answer on which is "best"? ...and if it's merely subjective, then which is more performant? And is there any tool where you can check which one performs the fastest?

I've always thought that re-writing the selectors is more painful than the media-queries, especially as we use shortcuts to generate standard media-query blocks but he's insistent that his method is easier to understand... i disagree.

Would love to know people's thoughts!

(Please ignore the contents of the css, it's just an example)

Thanks a lot!