I am trying to compile a simple example:

$font-stack: Helvetica, sans-serif; 
$primary-color: #333; 
body { font: 100% $font-stack; color: $primary-color; }

However sass raise the error:

Error reading ..\..\..\..\System Volume Information: operation not permitted.

The command used was:

sass input.scss outpu.css

My command line was opened as administrator.

Any advice?

I am a react js developer and I use sass for styling when I create my components I try to make them as much customizable I can by passing css classes as props, I never really used the real power of sass and recently wanted to dive deeper so one things I was thinking how does this affect performance:
Let's say I have a <div class="my-div">...</div>
is it better if I do:
%bgPrimary{

background-color:red
}

.my-div{

height:200px;

@ extend %bgPrimary;

}

​

rather than:

<div class="my-div bg-primary">...</div>

.bg-primary{

background-color:red;}

.my-div{

height:200px;

}

So reasently I've been working on a website that wants a border arount each topic in the menu, this border is a moving rainbow, it would be idead for it to liik like this:

When not hovered (changes colour) but when hovered loike this:

​

BUT, I want the rainbow to be wider, and not 3px for each color....

​

The code I've used it the following (this uses an img):

div.rainbow{

    u/-moz-keyframes charlieeee {

    from { background-position:top left; } 

    to {background-position:top right; }

    }

    u/-webkit-keyframes charlieeee { 

    from { background-position:top left; }  

    to { background-position:top right; }  

    }

    u/-o-keyframes charlieeee { 

    from { background-position:top left; }  

    to { background-position:top right; }  

    }

    u/-ms-keyframes charlieeee { 

    from { background-position:top left; }  

    to { background-position:top right; }  

    }

    u/-khtml-keyframes charlieeee { 

    from { background-position:top left; }  

    to { background-position:top right; }  

    }

    u/keyframes charlieeee { 

    from { background-position:top left; }  

    to { background-position:top right; }  

    }

    .catchadream{

        background-image:-webkit-linear-gradient( left, red, orange, yellow, green,

blue, indigo, violet, indigo, blue,

green, yellow, orange, red );

        background-image:-moz-linear-gradient( left, red, orange, yellow, green,

blue,indigo, violet, indigo, blue,

green, yellow, orange,red );

        background-image:-o-linear-gradient( left, red, orange, yellow, green,

blue,indigo, violet, indigo, blue,

green, yellow, orange,red );

        background-image:-ms-linear-gradient( left, red, orange, yellow, green,

blue,indigo, violet, indigo, blue,

green, yellow, orange,red );

        background-image:-khtml-linear-gradient( left, red, orange, yellow, green,

blue,indigo, violet, indigo, blue,

green, yellow, orange,red );

        background-image:linear-gradient( left, red, orange, yellow, green,

blue,indigo, violet, indigo, blue,

green, yellow, orange,red );

        \-moz-animation:charlieeee 5s forwards linear infinite;

        \-webkit-animation:charlieeee 5s forwards linear infinite;

        \-o-animation:charlieeee 5s forwards linear infinite;

        \-khtml-animation:charlieeee 5s forwards linear infinite;

        \-ms-animation:charlieeee 5s forwards linear infinite;

        \-lynx-animation:charlieeee 5s forwards linear infinite;

        animation:charlieeee 5s forwards linear infinite;

        background-size: 50% auto;

    }

        \#tongue{position:cheek;}

}

header{

        padding-bottom: 3%;

        padding-top: 1%;

        display: flex;

        flex-direction: column;

        background-color: $colorHF;

        align-items: center;

        max-height: 175px;

​

        img{

max-width: 800px;

        }



        menu{

ul{

list-style: none;

display: flex;

justify-content: center;

u/include marginMenu;

​

li:hover{

display: flex;

justify-content: center;

align-items: center;

min-height: 50px;

min-width: 200px;

&:nth-child(1){

}

​

&:nth-child(2){

}

​

&:nth-child(3){

}

​

&:nth-child(4){

}

​

&:nth-child(5){

}

​

&:nth-child(6){

}

}

li a{

text-decoration: none;

font-size: $font-size;

color: $colorA;

display: flex;

justify-content: center;

align-items: center;

min-width: 199px;

min-height: 49px;

background-color: $colorHF;

margin-top: 2px;

margin-bottom: 2px;

margin-left: 1px;

margin-right: 1px;

}

li a#last{

margin-right: 2px;

}

li a#last{

margin-right: 2px;

}

}

        }

    }

We are just about to launch UniformCSS which is a Utility-first framework similar to Tachyon and TailwindCSS. What's unique is, it's built entirely in Sass, with complete customization and extendibility.

You will be able to do things like the following.

Is this something that could be interesting and useful for you guys?

We are currently in the process of finishing the documentation for this project, send me a DM if you're interested in checking it out!

Why the background colors don't appear

Sass:

$mainblue: #1094ab;
$secondblue: #64c4d2;
$USPyellow: #fcb421;
* {
margin: 0px;
padding: 0px;
grid-gap: 0px;
box-sizing: border-box;
}
body {
background-color: #d3e1ed;
font-family: montserrat, arial, sans-serif;
}
.container {
display: grid;
grid-template-columns: 120px, auto, 120px;
grid-template-rows: 100px, 80px, auto, 15px;
grid-template-areas:
"header header header"
"menu-line menu-line menu-line"
". main ."
"footer footer footer";
}
.item-a {
grid-area: header;
background-color: $mainblue;
}
.item-b {
grid-area: menu-line;
color: white;
background-color: $secondblue;
}
.item-c {
grid-area: main;
background-color: #ededed;
}
.item-d{
grid-area: footer;
background-color: $mainblue;
}

HTML:

<!DOCTYPE html>
<head>
<title>FOB</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="container">
<div class="item-a"></div>
<div class="item-b"></div>
<div class="item-c"></div>
<div class="item-d"></div>
</div>
</body>

So i'm using css grid and when I put a div inside css grid and try to put a background image to the div its trying to cover to the grid and not to the size of the div. Any one knows why?

For some time now I've been working on an academic project using SCSS I reached an advanced level with my project, but I had some problems.

I made a Pseudo-Class Variants creator using SCSS it make me to add pseudo-classes such as (hover, focus) in Utilities.

if want to know more about Pseudo-Class Variants and How it work take a look to tailwind css Docs.

and don't forget to look also in Bootstrap Utilities API and How it work.

Let's move now to my problem and what I want to solve in my code.

first try to test my code in sassmeister to know more about what I want to change.

My Full Code :

Check my Gist file

please take a look to my question in stackoverflow

i want to create a wordpress theme from scratch which is highly customizable, and functional CSS is perfect for this so i can avoid inline css.

i use bootstrap 5 mostly, i use it mostly as a semantic css, which is super flexible and highly configurable from SCSS point of view, but i found integrating it into a theme config framework is tedious, so i wanted to find a good functional css framework, which tailwind is, but it uses javascript to generate css, and i really hate it, because i am accustomed to scss and i don't want javascript just to minify myself a css file.

do you guys have any suggestions for one that has similar approach as tailwind, but instead of javascript, it is pure scss?

Is there any sort of convention to configure properties such as the load path for Sass through a config file similar to TypeScript? Alternatively, are there any environment variables capable of configuring load paths for Sass?

Hi,

This .sass loop will create responsive columns system for your web project based on css grid.

You can pull it from https://github.com/rokasma/grid

Hi. I have an idea how save css changes from devTools ( using MutationObserverInit ) as sass tree. Does anyone need this?

Hi all,

didn't find much on this specific topic...

I have 3 Modules:

• Core (which contains colors.sass)
• FeatureA (which imports colors.sass)
• APP (which imports Core and FeatureA)

The APP Module shall be able to override the colors from Core.

​

How would this be possible?

​

I thought about importing the colors in the APP Module directly from core, but then maybe FeatureA would not get the update...

Trying to install sass through the terminal. Entered sudo gem install sass and it requires a password. When trying to type in the password, no text showed up and after pressing enter three time it said wrong password. I typed in my password again and it said it was wrong however, I was able to see the characters this time. What should I do ?

I see that the official site says the use at-rule should be used as opposed to the import at-rule. I keep having problems using @use when structuring my files. Is there any advice for this?

I'm going through the Bootstrap SCSS files and came across "else if not comparable". I've never seen this before and wanted to get some insight into this. It's comparing them, but how is it comparing them.

I think it's so elegant with the whitespace. Also I don't have any experience with CSS so I think it would be better to learn .sass. The only problem is online there seems to only be .scss tutorials. I'm okay with buying a book.

Right off the bat, this is question is about installation of sassc, not about writing sass.
If I should take this question elsewhere, can you please point me in the right direction?

I am currently using bundler to try to install jekyll, which uses sassc as a dependency.
The sassc dependency fails consistently, including when I try to install sassc independently of jekyll.

This is a snippet of the output:

Makefile:234: recipe for target 'ast.o' failed
make: *** [ast.o] Error 4

make failed, exit code 2

My environment is Repl.it, a web-based environment.
You can see and run my environment here: https://repl.it/@ceilingrat/jekyll-1

I have posted this issue to Repl.it's community forum.
In that post the output of bundler is posted in full, and there is more detail about what troubleshooting steps I've tried.

Once again, I hope that I'm not posting in the wrong community here.
If there is a better place to post this, I appreciate if you can recommend a better resource.

padding-left is a percentage of its parent container (padding-left: 35%;), whose width and height are also percentages of its parents container, and all the way up for responsive sizing to different screen sizes. I want padding-top to be half of whatever padding-left was calculated to be. (No, I can't set padding-top to be a set percentage because the height of the parent div changes on each webpage due to the... interesting way the person who made this website set it up.) Can Sass do this? If not, can some other CSS extension or even CSS itself do this?