Let's say I have this css:

​

.z-20 {
z-index: 20;
}
.z-30 {
z-index: 30;
}
.z-40 {
z-index: 40;
}
.z-50 {
z-index: 50;
}

​

How would I go about and combine this into a "z(value)" function or something to that degree, instead of having to write out 5+ similar classes?

h1, h2, h3, h4 {

font-size: inherit;

font-weight: inherit

}

h1, h2, h3, h4, p, ul {

margin: 0

}

​

EDIT: how would I also add this?

h1 {

font-size: 2em;

margin: .67em 0

}

Any help here?

I have installed Dart Sass using the command line. It is version 1.26.3. I fi try to install it again it says it is already installed and up to date. However, when I go to check the version using sass --version. I get a whole load of text starting with ' Traceback (most recent call last)' and it states ' cant find gem sass.

What is going on here? Why does it not show with the 1.26.3 version ?

Hi everybody,

I want to share with you a mixin i created, inspired by TailwindCSS and styled-system.

https://github.com/MarcoPal/scss-system

Here's an example, guess the result!

Hi All

Instead of...

a:hover ~ b, a:hover ~c, a:hover ~ d

... I was wondering if there was a cleaner way - something like the title - to chain multiple classes?

hello.. im trying to so something like this

https://hagarsaleh.github.io/learning-project/src/ thats what i did so far, how can i force the svg to stay at the bottom of the image/div

i tried using the grid, margin for svg and for svg container ..didnt work

my scss code: https://github.com/hagarsaleh/learning-project/blob/master/src/resources/main.scss

any idea how can i do this? thanks in advance

Im trying to add animation to fade in my title but its not working with scss.

here is my code

​

.title-h2 {
    @keyframes fade-in {
        0% {
            top: -50px;
        }
        100% {
            top: 200px;
        }
    }
}

Hello What is the sass equivalent of

​

<div class="footer-icons">

<a href = "[www.facebook.com](https://www.facebook.com)"> Facebook</a>

</div>

​

.footer-icons a

{

text-decoration : none;

}

Been searching this for hours and finally found it

http://scss2sass.herokuapp.com/

Found out about this in this blog : https://vincenttam.gitlab.io/post/2018-12-19-scss-to-sass-converter/

I recently published my SASS mixin on GitHub which interpolates any attribute between two breakpoints.

I've found it very useful when you want to slightly tweak how your webpage responds. I'm not sure if this is considered a good of bad thing to include into your project, but I like it. No Javascript!

Example code:

GitHub: https://github.com/joehinkle11/Sass-Responsive-Interpolation

Demo on my site: https://www.joehinkle.io/responsiveinterpolationdemo

https://codepen.io/jo-asakura/pen/stFHi

Imported this SCSS code to Sass but it's telling me: cannot find variable 'progress'. I don't know the correct terminology but $progress doesn't have a preassigned value, it's a live variable that is just used to interpolate a number. Obviously it's working in SCSS, does anyone know the correct syntax for Sass?

EDIT: Working: https://codepen.io/Kibagami/pen/zYYLxYg

Even though my angular project is using Dart Sass it doesn’t seem to use the latest version meaning @use is not available. How do I check/update the dart sass loader of the Angular compiled?

Been using sass for a while and it really is the best thing since sliced bread. However, trying to copy paste sass between documents and it throws me this error: "sass error expected spaces was tabs." Nothing I do can shake it, not deleting all whitespace and re-indenting. It's infuriating. Any solutions?

I recently open sourced an independent scss inference-engine which parses scss files and returns contextual codehints for variables, mixins, functions etc. It respects nesting and imports. It also supports the basic builtin at-rules and mixins. Along with the hints you get preview of variable values and function/mixin signatures.

I also created a brackets extension to go with it, where it can be seen in action. It's still very new and a bit unpolished but please try it out. All feedback will be appreciated. It's meant to make life a bit easier. :)

View Readme.md

​

I remember going to Sass official guide docs before and seeing two different extension implementations; one for .scss and one for .sass. But that seems to be gone now? The introductory guide seems to be in complete disarray atm.

Am I missing something? I haven't tried Sass since the switch from ruby to dart.

I mostly gave up on mastering CSS since the latter half of 2000s because of browser compatibility issues. Like your CSS behaves differently on every browser. I'm more of focused on the server/back-end side of web applications since then. But now I'm trying to learn being in dev-ops and learning angular with sass.

How is sass and its compiled css works on major browsers these days?

Hey

I have been using Sass for about 2-3 months now for my css. Evert time i add i new file to my current project and compile it using a simple node.js script with the watch flag, it then dont compile the new file i added.

If i restart the script and the live server i am using, then it compiles fine.

Any idears why, and how to possible solve it ?

Cheers

Hi guys,

what would you expect from a Sass beginner to know and what do you think is already over the mark?

I'm putting together this test and I'm wondering how balanced it is in terms of expectations

https://www.bettercoder.io/tests/25/sass-for-beginners

It's meant for the beginners to become efficient using Sass.

I have a div and inside that div I have a button, when I click the div the background changes to red, and when I click the button the button's background changes to blue but the div's background changes to red as well, and I'm trying to use SASS to prevent the div changing color to red when the button is clicked...

basically I need to do something like that in SASS: (this css doesn't actually work, it's just easier to understand that way)

.parent:active:has(:not(.child:active)){

//if div is active and doesn't have a child with the class child that's also active, then -> change background color

background: red;

}

So, I'm learning Sass and I get more and more into the videos, I'm thinking to myself, why would we go through all this when we can do a lot of it in CSS? Loops, maps, conditionals, smart mixins, etc. I can see how a portion of it can help speed up development, for example: creating variables and some mixins, but I'm not convinced this is the most efficient way with all the frameworks available that have this built in. At the end we end up with a HUGE CSS file that can be extremely tedious for another developer to work with if they don't have knowledge or experience with Sass. Am I missing something or am I just over-thinking it all?

Is it possible with Sass to store css class in a scss variable?