[LibSass非推奨化] node-sassとのお別れ ~ Dart Sassへ移行する

            
            $ npm install -g sass
        

            
            $ sass --version
1.26.10 compiled with dart2js 2.8.4
        

            
            $ tree
.
├── style.scss
└── foundation
     ├── _code.scss
     └── _lists.scss
        

            
            @use 'foundation/code';
@use 'foundation/lists';
        

            
            code {
    padding: .25em;
    line-height: 0;
}
        

            
            ul, ol {
    text-align: left;

    & & {
        padding: {
        bottom: 0;
        left: 0;
        }
    }
}
        

            
            code {
    padding: .25em;
    line-height: 0;
}
ul, ol {
    text-align: left;
}
ul ul, ol ol {
    padding-bottom: 0;
    padding-left: 0;
}
        

            
            $ tree
.
├── style.scss
└── src
     └── _corners.scss
        

            
            $radius: 3px;

@mixin rounded {
    border-radius: $radius;
}
        

            
            @use "src/corners";

.button {
    @include corners.rounded;
    padding: 5px + corners.$radius;
}
        

            
            @use "src/corners" as c;

.button {
    @include c.rounded;
    padding: 5px + c.$radius;
}
        

            
            @use "src/corners" as *;

.button {
    @include rounded;
    padding: 5px + $radius;
}
        

            
            $-radius: 3px;

@mixin rounded {
    border-radius: $-radius;
}
        

            
            @use "src/corners";

.button {
    @include corners.rounded;
    //👇$-radiusは外部から呼び出し禁止でコンパイルエラー
    padding: 5px + corners.$-radius;
}