<?php foreach ($array as $i): ?>
    <font color="black">
<?php endforeach ?>

@each $i in $array {
    color: black;
}

gulp.task('css', () => {
    let postcss = require('gulp-postcss');
 
    return gulp.src('src/*.css')
        .pipe( postcss([ plugin1, plugin2 ]) )
        .pipe( gulp.desc('build/') );
});

.block {
    &_title {
        font-size: 200%;
    }
}

.block_title {
    font-size: 200%;
}

:fullscreen a {
    transition: transform 1s;
}

:-webkit-full-screen a {
    -webkit-transition: -webkit-transform 1s;
    transition: -webkit-transform 1s;
    transition: transform 1s;
    transition: transform 1s, -webkit-transform 1s;
}
:-moz-full-screen a {
    -webkit-transition: -webkit-transform 1s;
    transition: -webkit-transform 1s;
    transition: transform 1s;
    transition: transform 1s, -webkit-transform 1s;
}
:-ms-fullscreen a {
    -webkit-transition: -webkit-transform 1s;
    transition: -webkit-transform 1s;
    transition: transform 1s;
    transition: transform 1s, -webkit-transform 1s;
}
:fullscreen a {
    -webkit-transition: -webkit-transform 1s;
    transition: -webkit-transform 1s;
    transition: transform 1s;
    transition: transform 1s, -webkit-transform 1s;
}

return gulp.src('src/*.scss')
    .pipe( sass )
    .pipe( postcss(plugins) )
    .pipe( gulp.desc('build/') );

.foo {
    -webkit-border-radius: 5px;
    -mox-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

.foo {
    border-radius: 5px;
}

@media (width <= 600px) {
    …
}

@media (max-width: 600px) {
    …
}

.block {
    position: absolute;
    $width: 10px;
    top: 0;
    $height: 20px;
    height: $height;
    width: $width;
}

.block {
    $width: 10px;
    $height: 20px;

    position: absolute;
    top: 0;
    width: $width;
    height: $height;
}

.bad {
    margin-top: 10px;
    margin: 0 auto;
}

.a {
    background: #ff0205;
}
.b {
    background: #fe0305;
    /* Warning: #fe0305 collides with #ff0205 */
}

.icon {
    background: url(a.svg);
    background-size: 5px 5px;
}

.icon {
    background: url(a.svg);
    background-size: 20px 20px;
}

.no-svg .icon {
    background-image: url(a-20x20.png);
}

gulp.task('css:old', () => {
    return gulp.src('old/*.scss')
        .pipe( sass() )
        .pipe( postcss(plugins) )
        .pipe( gulp.desc('build/') );
});

gulp.task('css:new', () => {
    return gulp.src('old/*.css')
        .pipe( postcss(plugins.concat(extra)) )
        .pipe( gulp.desc('build/') );
});

.icon {
    width: width('logo.png');
    height: height('logo.png');
    background: inline('logo.png');
}

.icon {
    background: svg-load(icon.svg, fill: red);
}

@define-mixin icon $name, $color {
    background: $color url($name.svg);
    &:hover {
        background-color: color($color b(+10%));
    }
}

.icon.is-twitter {
    @mixin icon twitter, blue;
}
.icon.is-youtube {
    @mixin icon youtube, red;
}

.title {
    font-size: 10rem;
    color: red;
}

.visits {
    color: gray;
}

.Page_title_jhv43,
.Page_visits_ugu34 {
    /* Reset */
    all: initial;
    box-sizing: border-box;
    font: inherit;
}

.Page_title_jhv43 {
    font-size: 10rem;
    color: red;
}

.Page_visits_ugu34 {
    color: gray;
}

.title {
    font-size: 10rem;
    color: red;
}

.visits {
    color: gray;
}

.element:container(width >= 100px) {
    …
}