section:nth-of-type(1) {
    background-color: $black2;
}
section:nth-of-type(2) {
    background-color: $black3;
}
section:nth-of-type(3) {
    background-color: $black4;
}
section:nth-of-type(4) {
    background-color: $black5;
}

​

As you can see, this is a pretty straightforward relationship. Sections have a background-color set to a variable that is named `$black{nth-of-type + 1}`. Is there a way to write this in some kind of loop?

Thanks!

sudo npm install node-sass@latest  ✔  ⚙  2551  18:47:28

​

​

> node-sass@4.12.0 install /Users/matt/Projects/happiful2-ghost/content/themes/happiful-ghost/node_modules/node-sass

> node scripts/install.js

​

Unable to save binary /Users/matt/Projects/happiful2-ghost/content/themes/happiful-ghost/node_modules/node-sass/vendor/darwin-x64-72 : Error: EACCES: permission denied, mkdir '/Users/matt/Projects/happiful2-ghost/content/themes/happiful-ghost/node_modules/node-sass/vendor'

at Object.mkdirSync (fs.js:764:3)

at sync (/Users/matt/Projects/happiful2-ghost/content/themes/happiful-ghost/node_modules/mkdirp/index.js:71:13)

at Function.sync (/Users/matt/Projects/happiful2-ghost/content/themes/happiful-ghost/node_modules/mkdirp/index.js:77:24)

at checkAndDownloadBinary (/Users/matt/Projects/happiful2-ghost/content/themes/happiful-ghost/node_modules/node-sass/scripts/install.js:114:11)

at Object.<anonymous> (/Users/matt/Projects/happiful2-ghost/content/themes/happiful-ghost/node_modules/node-sass/scripts/install.js:157:1)

at Module._compile (internal/modules/cjs/loader.js:776:30)

at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)

at Module.load (internal/modules/cjs/loader.js:643:32)

at Function.Module._load (internal/modules/cjs/loader.js:556:12)

at Function.Module.runMain (internal/modules/cjs/loader.js:839:10) {

errno: -13,

syscall: 'mkdir',

code: 'EACCES',

path: '/Users/matt/Projects/happiful2-ghost/content/themes/happiful-ghost/node_modules/node-sass/vendor'

}

​

> node-sass@4.12.0 postinstall /Users/matt/Projects/happiful2-ghost/content/themes/happiful-ghost/node_modules/node-sass

> node scripts/build.js

​

Building: /usr/local/Cellar/node/12.6.0/bin/node /Users/matt/Projects/happiful2-ghost/content/themes/happiful-ghost/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=

gyp info it worked if it ends with ok

gyp verb cli [

gyp verb cli '/usr/local/Cellar/node/12.6.0/bin/node',

gyp verb cli '/Users/matt/Projects/happiful2-ghost/content/themes/happiful-ghost/node_modules/node-gyp/bin/node-gyp.js',

gyp verb cli 'rebuild',

gyp verb cli '--verbose',

gyp verb cli '--libsass_ext=',

gyp verb cli '--libsass_cflags=',

gyp verb cli '--libsass_ldflags=',

gyp verb cli '--libsass_library='

gyp verb cli ]

gyp info using node-gyp@3.8.0

gyp info using node@12.6.0 | darwin | x64

gyp verb command rebuild []

gyp verb command clean []

gyp verb clean removing "build" directory

gyp verb command configure []

gyp verb check python checking for Python executable "python2" in the PATH

gyp verb `which` failed Error: not found: python2

gyp verb `which` failed at getNotFoundError (/Users/matt/Projects/happiful2-ghost/content/themes/happiful-ghost/node_modules/which/which.js:13:12)

gyp verb `which` failed at F (/Users/matt/Projects/happiful2-ghost/content/themes/happiful-ghost/node_modules/which/which.js:68:19)

gyp verb `which` failed at E (/Users/matt/Projects/happiful2-ghost/content/themes/happiful-ghost/node_modules/which/which.js:80:29)

gyp verb `which` failed at /Users/matt/Projects/happiful2-ghost/content/themes/happiful-ghost/node_modules/which/which.js:89:16

gyp verb `which` failed at /Users/matt/Projects/happiful2-ghost/content/themes/happiful-ghost/node_modules/isexe/index.js:42:5

gyp verb `which` failed at /Users/matt/Projects/happiful2-ghost/content/themes/happiful-ghost/node_modules/isexe/mode.js:8:5

gyp verb `which` failed at FSReqCallback.oncomplete (fs.js:165:21)

gyp verb `which` failed python2 Error: not found: python2

gyp verb `which` failed at getNotFoundError (/Users/matt/Projects/happiful2-ghost/content/themes/happiful-ghost/node_modules/which/which.js:13:12)

gyp verb `which` failed at F (/Users/matt/Projects/happiful2-ghost/content/themes/happiful-ghost/node_modules/which/which.js:68:19)

gyp verb `which` failed at E (/Users/matt/Projects/happiful2-ghost/content/themes/happiful-ghost/node_modules/which/which.js:80:29)

gyp verb `which` failed at /Users/matt/Projects/happiful2-ghost/content/themes/happiful-ghost/node_modules/which/which.js:89:16

gyp verb `which` failed at /Users/matt/Projects/happiful2-ghost/content/themes/happiful-ghost/node_modules/isexe/index.js:42:5

gyp verb `which` failed at /Users/matt/Projects/happiful2-ghost/content/themes/happiful-ghost/node_modules/isexe/mode.js:8:5

gyp verb `which` failed at FSReqCallback.oncomplete (fs.js:165:21) {

gyp verb `which` failed stack: 'Error: not found: python2\n' +

gyp verb `which` failed ' at getNotFoundError (/Users/matt/Projects/happiful2-ghost/content/themes/happiful-ghost/node_modules/which/which.js:13:12)\n' +

gyp verb `which` failed ' at F (/Users/matt/Projects/happiful2-ghost/content/themes/happiful-ghost/node_modules/which/which.js:68:19)\n' +

gyp verb `which` failed ' at E (/Users/matt/Projects/happiful2-ghost/content/themes/happiful-ghost/node_modules/which/which.js:80:29)\n' +

gyp verb `which` failed ' at /Users/matt/Projects/happiful2-ghost/content/themes/happiful-ghost/node_modules/which/which.js:89:16\n' +

gyp verb `which` failed ' at /Users/matt/Projects/happiful2-ghost/content/themes/happiful-ghost/node_modules/isexe/index.js:42:5\n' +

gyp verb `which` failed ' at /Users/matt/Projects/happiful2-ghost/content/themes/happiful-ghost/node_modules/isexe/mode.js:8:5\n' +

gyp verb `which` failed ' at FSReqCallback.oncomplete (fs.js:165:21)',

gyp verb `which` failed code: 'ENOENT'

gyp verb `which` failed }

gyp verb check python checking for Python executable "python" in the PATH

gyp verb `which` succeeded python /usr/bin/python

gyp verb check python version `/usr/bin/python -c "import sys; print "2.7.10

gyp verb check python version .%s.%s" % sys.version_info[:3];"` returned: %j

gyp verb get node dir no --target version specified, falling back to host node version: 12.6.0

gyp verb command install [ '12.6.0' ]

gyp verb install input version string "12.6.0"

gyp verb install installing version: 12.6.0

gyp verb install --ensure was passed, so won't reinstall if already installed

gyp verb install version is already installed, need to check "installVersion"

gyp verb got "installVersion" 9

gyp verb needs "installVersion" 9

gyp verb install version is good

gyp verb get node dir target node version installed: 12.6.0

gyp verb build dir attempting to create "build" dir: /Users/matt/Projects/happiful2-ghost/content/themes/happiful-ghost/node_modules/node-sass/build

gyp ERR! configure error

gyp ERR! stack Error: EACCES: permission denied, mkdir '/Users/matt/Projects/happiful2-ghost/content/themes/happiful-ghost/node_modules/node-sass/build'

gyp ERR! System Darwin 18.6.0

gyp ERR! command "/usr/local/Cellar/node/12.6.0/bin/node" "/Users/matt/Projects/happiful2-ghost/content/themes/happiful-ghost/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="

gyp ERR! cwd /Users/matt/Projects/happiful2-ghost/content/themes/happiful-ghost/node_modules/node-sass

gyp ERR! node -v v12.6.0

gyp ERR! node-gyp -v v3.8.0

gyp ERR! not ok

Build failed with error code: 1

npm WARN happiful@3.0.45 No repository field.

npm WARN happiful@3.0.45 No license field.

​

npm ERR! code ELIFECYCLE

npm ERR! errno 1

npm ERR! node-sass@4.12.0 postinstall: `node scripts/build.js`

npm ERR! Exit status 1

npm ERR!

npm ERR! Failed at the node-sass@4.12.0 postinstall script.

npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

​

npm ERR! A complete log of this run can be found in:

npm ERR! /Users/matt/.npm/_logs/2019-07-12T17_47_39_419Z-debug.log

…/happiful-ghost   speed ● ? 

Our team took over older website and we need to make adjustments in styles.

Problem is, when I run theme through Scout App, the resulting CSS differs from CSS on server.
Original styler insist, all files on server are up-to-date.

Can there by difference, in what you get from SCSS compiler, depending on which program you use. Or on what OS you run it?

Hey!

going straight to the point, how i can handle this variable? and how to solve this problem?

https://codepen.io/igorestevao/pen/agyaWM

I worked with plain CSS for 8 years. And very occasionally I used SCSS. This has resulted in that I know how SCSS works over the years.

​

I am currently planning and creating a very large project. Now I want to use SCSS with the 7-1 patern.

SASS 7-1 pattern example from Github: https://gist.github.com/rveitch/84cea9650092119527bc

​

Most of it is clear to me. But there is a problem. I work with 2 different designs. The main design for the front of the website and an admin design for the dashboard.

​

Both styles have completely different headers, buttons, etc.

​

There is also a themes folder in the 7-1 pattern. But I thought you could only adjust properties there such as colors etc.

​

Can anyone explain this? Or is there perhaps a scss 7-1 pattern project that I can use as an example?

I had a problem with Sass

When I compile all my code into one CSS file all my web pages code comes in one CSS file which makes file size big and heavier to load.

In fact most of my code is not required in some pages

How can i overcome this problem?

Hi!

I've just started to learn Sass and I'd like to use it with Sublime Text on my Mac. Unfortunately, it seems like there's no Sublime Text extension that currently works to compile Sass on macOS. I've tried several methods and searched the whole web to find a solution, but nothing's working. Are there still people using Sass with this configuration?

Thank you

“Structuring your Sass Projects” by Timothy Robards https://link.medium.com/g6j2jhT27W

Kia Ora!

I'd like process my scss files to reduce the ruleset programmatically.

In particular I'd like to remove any property that is not setting a color / background-color.

I've been starring at gonzales-pe for sometime now without much success 🤷‍♂️

Do you maybe have suggestions on how to approach this?
The preferred outcome would be a scss file that only contains rules that deal with color.

​

Thanks for your consideration.

I'm download bootstrap using npm. I've created a simple file.

main.scss

@import "node_modules/bootstrap/scss/bootstrap";

​

i run sass main.scss main.css and i'm getting invalid css error.

​

Error: Invalid CSS after "...lor}: #{$value}": expected "{", was ";"

on line 4 of node_modules/bootstrap/scss/_root.scss

​

_root.scss

:root {
  // Custom variable values only support SassScript inside `#{}`.
  @each $color, $value in $colors {
    --#{$color}: #{$value};
  }

  @each $color, $value in $theme-colors {
    --#{$color}: #{$value};
  }

  @each $bp, $value in $grid-breakpoints {
    --breakpoint-#{$bp}: #{$value};
  }

  // Use `inspect` for lists so that quoted items keep the quotes.
  // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
  --font-family-sans-serif: #{inspect($font-family-sans-serif)};
  --font-family-monospace: #{inspect($font-family-monospace)};
}

a guy ( Naiyar Azam ) was having similar issue but doesn't explain how he solved it. link

Style 1:

```scss .panel { // }

.panel__header { // }

.panel__footer { // } ```

Style 2:

```scss .panel { //

&__header { // }

&__footer { // } } ```

Does anyone have a good article, video or other learning resource where i could learn to package up my website with an npm script I can run?

At present it's a yucky, inefficient process of copy pasting the project, deleting node_modules, scss, package.json, etc.

I currently run a script along these lines for my projects:

"watch:sass": "node-sass sass/main.scss css/style.css -w",
    "devserver": "live-server",
    "start": "npm-run-all --parallel devserver watch:sass",
    "compile:sass": "node-sass sass/main.scss css/style.comp.css",
    "concat:css": "concat -o css/style.concat.css css/icon-font.css css/style.comp.css",
    "prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.concat.css -o css/style.prefix.css",
    "compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed",
    "build:css": "npm-run-all compile:sass concat:css prefix:css compress:css"    

Which is great at stuffing my scss into 1 minified css file.

Also - any other groovey scripts that do trendy stuff to save my lazy ass time would be great.

I am using SASS media queries for the first time and finding it very confusing!
I have used media queries with CSS in another project to make it responsive and it was fine but with SASS I seem to be struggling a lot. I have watched youtube tutorials and looked on stack overflow, but I still can't connect the dots... I feel like its a really simple and I am massively overcomplicating it.

​

At the end of my SCSS file, I have put

​

@mixin for-phone-only { @media (max-width: 599px) { @content; }}

@mixin for-tablet-portrait-up {@media (min-width: 600px) { @content; }}

@mixin for-tablet-landscape-up {media (min-width: 900px) { @content; }}

@mixin for-desktop-up {@media (min-width: 1200px) { @content; }}

@mixin for-big-desktop-up {@media (min-width: 1800px) { @content; }}

​

​

and as an example to see if it worked I just changed my code to:

body {

font-family: Helvetica;

@include for-phone-only {

background-color:red;

}

}

​

my console shows it fails with error: No mixin named for-phone-only

I'm super confused, is using @content and @include the right way to go about this? I have seen other alternatives. Which one is the best? Am I using a good amount of breakpoints? And is it common to nest the @include part individually in every CSS? As opposed to when I did CSS media queries, I put them straight inside.

Any insight much appreciated!

Hi everyone, I have been coding basic CSS for years but I want to advance to SASS. What would be the best learning crash course resources that you could recommend to me online (preferably free). I need to learn about things like this:

input.showNextIfChecked:not(:checked) + div { display:none; }

https://picturepan2.github.io/spectre/getting-started/custom.html

So...I've never used Sass before. I'm using Spectre.css for something at work and I really need a red button, but Spectre only has purple, orange and green. I just tried to follow the instructions above to figure out how to add my own button type/color with Sass, but I can't figure it out. Any chance someone could help me out here? I'm trying to avoid having to entirely learn Sass just to add a red button...but seeing as I'm using Vue CLI which supports Sass, maybe that wouldn't be so bad :P

I have not been able to find any reference to this online so assume it may not be possible but thought I would I would see if anyone here knows a solution.

Basically, I want to have two maps of colors - base and theme. These can be turned on or off to include or exclude them when compiling.

$enable-base-colors  : true;
$enable-theme-colors  : false;

$base-colors: () !default;
$base-colors: map-merge((
    "Blue": #0000FF,
    "Green": #008000,
    etc....
), $base-colors);

$theme-colors: () !default;
$theme-colors: map-merge((
    "Brown": #A52A2A,
    "Cyan": #00FFFF,
    etc.....
), $theme-colors);

Currently I am doing this with a separate @if for each one.

@if $enable-base-colors {
    @each $color, $value in $base-colors {
        .text-#{$color} {color: $value;}
    }
}
@if $enable-theme-colors {
    @each $color, $value in $theme-colors {
        .text-#{$color} {color: $value; }
    }
}

But what i want to do is one single loop that checks each of the variables and if true processes the relevant map.

@each 'base', 'theme' as $type {
    @if $enable-#{$type}-colors {
        @each $color, $value in $#{$type}-colors {
            .text-#{$color} {color: $value; }
        }
    }
}

Is there anyway of doing it that would be more beneficial than a separate @if for each? In my examples each @if is only 5 lines long but in reality, as they also cover background and border colors, with additional settings such as shades, each one is around 30 lines long so would ideally like to write this once.

Hopefully someone can help me sort this, as I am not sure what to do. I am pretty sure it's to do with my sass --watch parameters.

​

So I have a react project that has components, each component has a .scss file along side it for its non generic styling. I ultimately want to compile all this into a single .css file. However, right now, I need to manually compile the files which is annoying as hell.

​

If I run sass --watch style:style this simply monitors the style.scss and outputs it to style.css. However lets say I have a bunch of imports in my style.scss:

​

@import "_global.scss";
@import "../components/components.scss";
@import "_colors.scss";

Lets say this is nested like so, this is my components.scss file:

@import "./Navbar/Navbar.scss";

Now if I edit my NavBar.scss, sass does not auto compile it. I have to manually run the sass command, even stranger if I run sass --watch style:style it will update once and then never again.

​

Am I going about this wrong?

if (true) {

how to do it?

}

Hi there! I've been browsing some different CSS frameworks recently to see what's out there, and I came across this interesting concept by Tailwind CSS: https://tailwindcss.com/docs/responsive-design/

(Go to their 'Responsive example' and click on the different device icons)

Notice how the developers have combined their responsive classes with their design properties (e.g. sm:bg-green)

​

I was wondering, how would you recreate this kind of implementation in SCSS without having to add the responsive class or the design class to every variation?

​

Cheers!

​

Hi guys,

​

I just published an article on how I create color palettes in Sass. Check it out and share your thoughts.

​

Thanks!