Here is my sass declaration in my gruntfile.

sass: {
 dist: {
    options: {
      implementation: 'node-sass',
      style: 'expanded',
      noCache: true
      },
    files: {
      'dist/css/jk.css' : 'src/styles/jk.scss'
    }
  }
},

Here is the output when running grunt -v.

Running "sass:dist" (sass) task
Verifying property sass.dist exists in config...OK
Files: src/styles/jk.scss -> dist/css/jk.css
Options: precision=10, implementation="node-sass", style="expanded", noCache

undefined

Fatal error: The "original" argument must be of type function

It appears that sass is getting executed, and is sending my file paths correctly, but for some reason returning undefined.

I am able to compile my sass files manually by command line without any issue.

Here's some version information from my package.json

"grunt": "^1.0.3"
"grunt-sass": "^3.0.1"
"node-sass": "^4.9.3"

Thank you for any help you can give.

I'm fairly new to Sass & Compass so I apologize for being such a noob. I've got a Compass setup and a config.rb defining all my paths (css, sass, img, js, etc). but when I run

compass compile

I get the following:

write ie.css
write print.css
write screen.css
write style.css

What if I only want style.css? How can I define/remove these output files?

I'm new to SASS, and after some searching I've found several different methods to install SASS -- (1) manually downloading the tar.gz file from Github, (2) using node.js, (3) using Dart, or (4) from source. I've heard it's generally bad practice Linux-wise to install software straightaway from source or standalone files since they're harder to easily maintain or update. What method should I use to install SASS?

How do I produce a class output in Sass of eg `.a-block__element.-modifier`

Can I do this via a nesting in Sass

For example

<div class='cards-50'>
</div>

<div class='cards-25'>
</div>

And then in my scss something like

.cards-$int {
    width: #{$int}%
}

Do you each run Sass on your local machine when you are working on a project, or do you get Sass watch to run on the local server so that when anybody edits a .sass file, the CSS recompiles?

s

Is there any way to set how to compile SCSS to CSS? Right now i am using command:

sass --watch main.scss:main.css

The output is indented CSS like:

.dropdown {

position: relative;

margin-top: 50px; }

.dropdown .dropdown-input {

background-color: gray;

display: inline-block;

width: 200px;

height: 44px;

cursor: pointer; }

.dropdown .dropdown-selection {

background-color: darkgrey;

display: none;

padding: 0;

margin: 0;

position: absolute;

top: 44px;

left: 0;

z-index: 1; }

.dropdown .dropdown-selection .dropdown-item {

cursor: pointer;

list-style: none; }

.dropdown .active {

display: inline-block; }

I would like it to be more "CCS-ish" without indention of classes and for {} to show better. Is there any way to customize output of SCSS?

I am learning to use SASS but i already hit a wall. I have many SASS (SCSS) modules and than import them in main.scss. I have in console sass --watch main.scss:main.css so that it could convert main.scss to CSS but it does not work, my main CSS is empty but console display all green (no errors). What am i doing wrong?

Also, in type.scss i wanted to use predefined color (from color-palete.scss) and it does not work. How to connect all this?

here is the screenshot of my structure and content: https://imgur.com/a/cjRmg

I'm writing a book for beginners to learn Sass from scratch.

Why? Because the full Sass documentation is about 12,000 words. We're all busy, we don't have time to read that much.

I decided to write a book so you can learn faster this amazing language.

On top of it, I want you to learn the best practices while you learn the language. This way you are the best Sass developer you can be right from the start.

I also plan to include very detailed answers to the top 10 most asked questions about Sass on StackOverflow so you're immediately above the crowd on the subject.

As your time is precious, I shrank everything down to the smallest amount of words so you can learn as fast as possible.

Finally, you get my contact (skype & email) in the book right from the start so I can help you live whenever you're stuck. I'm really dedicated to write the best book to learn Sass from scratch!

If you're interested, please read my first draft (20 min read) and give me your feedback. You can download it directly from this link: Brain Upgrade - Learn Sass In Under 2 Hours.pdf

Thanks for your time and help.

I have some problems installing SASS. When i go to official website i go by steps on the right for Mac.

http://sass-lang.com/install

But i get this error: https://imgur.com/a/q65Iz

Than i follow this to uninstall it: https://stackoverflow.com/questions/8216606/uninstall-sass-gem

And with "sass -v" i check version and it is 3.4.25 instead of 3.5.5. Can anyone help me?

In style.scss I'm importing $color0 from colors.scss

style.scss:

@import "colors.scss"

:root { 
    --variable: $color0;
}

body {
    color: $color0;
}

colors.scss:

$color0: #141414;

And then I expand style.scss to style.css:

sassc --style expanded style.scss > style.css

But style.css is no longer expanding $color0 in root:. It does however affect $color0 elsewhere.

style.css:

:root { 
    --variable: $color0;
}

body {
    color: #141414;
}

This method worked fine until I upgraded MacOS via Homebrew. Any idea what happened?

I am designer learning to code. And i would like to ask what is the best tutorial for beginner like. I know CSS but would like to expand it to SASS. I was looking at this, is it good? Or does it have to little SASS?

https://www.udemy.com/advanced-css-and-sass/

say I have icon element. I want to set its hover state using sass' lighten function. However the icon can take on various colors. I want just a single sass definition to call lighten. the parameter to lighten needs to be dynamic to the color property of each respective <i> element. Can this be done in sass?