1. Installing Required Dependencies

npm install sass sass-loader --save-dev

2. Webpack Loader Configuration

{
    test: /\.scss$/,
    use: ['style-loader', 'css-loader', 'sass-loader']
}

3. Implementation in Vue Components

<style lang="scss">
@import '*.scss';
</style>

4. Key Sass Featurse
5. Variables

$primaryFontSize: 18px;
$navigationWidth: 220px;

.main-content {
  font-size: $primaryFontSize;
  width: calc(100% - #{$navigationWidth});
}

2. Nesting Rules

.navigation {
    background-color: #333;
    .menu-item {
        color: white;
        .link {
            text-decoration: none;
            &:hover {
                color: #ddd;
            }
        }
    }
}

3. Mixins

@mixin typography($font-family, $font-size, $line-height) {
    font-family: $font-family;
    font-size: $font-size;
    line-height: $line-height;
}

.heading {
    @include typography('Helvetica Neue', 24px, 1.4);
}

@mixin responsive-property($property, $value, $breakpoint) {
    @media (min-width: $breakpoint) {
        #{$property}: $value;
    }
}

.container {
    width: 100%;
    @include responsive-property(max-width, 1200px, 1024px);
}

4. Inheritance

.base-button {
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: bold;
    text-align: center;
}

.primary-button {
    @extend .base-button;
    background-color: #4CAF50;
    color: white;
}

.secondary-button {
    @extend .base-button;
    background-color: transparent;
    border: 1px solid #ddd;
}

5. Custom Functions

$baseFontSize: 16;
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;

@function rem($pixels) {
    @return ($pixels / $baseFontSize) * 1rem;
}

.hero-section {
    padding: rem(20px) rem(40px);
    font-size: rem(18px);
    
    @media (min-width: $breakpoint-md) {
        padding: rem(40px) rem(60px);
        font-size: rem(20px);
    }
}

6. Control Directives

$theme: 'dark';

@if $theme == 'dark' {
    body {
        background-color: #222;
        color: #fff;
    }
} @else {
    body {
        background-color: #fff;
        color: #222;
    }
}

@for $i from 1 through 3 {
    .column-#{$i} {
        width: (100% / $i);
    }
}

$colors: (red, blue, green);

@each $color in $colors {
    .text-#{$color} {
        color: $color;
    }
}

5. Resolving Node-sass Installation Issues

Option 1: Using a Precompiled Binary
    1. Download the appropriate node-sass binary from: https://github.com/sass/node-sass/releases
    2. Install with a specific path:
        npm install -D node-sass@4.14.1 --sass_binary_path=C:\path\to\your\binding.node

Option 2: Handling Python Dependency Issues
    1. If you encounter compilation errors due to missing Python:
        npm install -g node-gyp
        npm install --global --production windows-build-tools
    Note: Run these commands in an administrator command prompt