File "interpolation.scss"

Full path: /home/cakedeco/retaildirectonline.co.uk/system/storage/vendor/leafo/scssphp/tests/inputs/interpolation.scss
File size: 1.14 B
MIME-type: text/plain
Charset: utf-8

Download   Open   Edit   Advanced Editor &nnbsp; Back

div {
    color: red#{white} blue;
    color: red #{white} blue;
    color: red #{white}blue;
    color: red#{white}blue;
    color: #{umm}#{yeah}#{what};
    color: #{stacked};

    font-size: 10px/#{something};
    font-size: 10px / #{something};

    test: "what#{"world"}wrong";
    test: "what#{'world'}wrong";
    test: "what#{world}wrong";
    test: "what"#{world}"wrong";

    hi: "what is #{4 + 12} end"
}


// interpolation in selectors

pre {
    $var: cool;

    #{var} {
        color: red;
    }

    #{var} dad {
        color: red;
    }

    bed#{var}dad {
        color: red;
    }
}

cool {
    @for $x from 1 through 5 {
        .thing-#{$x} {
            color: red;
        }
    }
}

a#{b}c#{d}e {
    color: red;
}

##{hello}, .#{world}{
    color: red;
}

#abc#{hello}yeah, .cool#{world}yes{
    color: red;
}

$scope: 2;

div.element:nth-child(#{$scope}n)
{
    display: none;
}

// property interpolation

div {
    $var: hello;
    #{$var}: world;
    cool#{$var}:world;
    #{$var}one:world;
    two#{$var}one:world;

    one#{a + b}two: cool;

    #{hello}: {
        #{world}: red;
        #{mold}: white;
        #{$var}: blue;
    }

}