Можно ли использовать миксин для специфичного для браузера CSS

Я ищу решение для использования миксина для взлома CSS для конкретного браузера. Я использую JavaScript для добавления тега браузера в класс HTML. Нравится .ie .ie7 .ie8 .ie9

Я хотел бы использовать миксин, например:

.box-test {
margin: 10px;
@include browser(ie7) {
    margin: 20px;
    }
}

ЖЕЛАЕМЫЙ РЕЗУЛЬТАТ:

.box-test {
margin: 10px;
}
.ie7 .box-test {
    margin: 20px;
    }

миксин, который я пытался сделать:

@mixin browser($browserVar) {
    @if $browserVar == ie7 {
    .ie7 { @content }
    }
    @else if $browserVar == ie8 {
    .ie8 { @content; }
         }
    @else if $browserVar == ie9 {
    .ie9 { @content; }
    }
}

проблема в том, что вывод:

.box-test {
    margin: 10px; }
.box-test .ie7 {
      margin: 20px; }

browser sass mixins vendor-prefix
person woutvdd    schedule 12.04.2013    source источник

Ответы (3)


arrow_upward
8
arrow_downward

Самый простой миксин будет выглядеть так:

@mixin legacy-ie($ver: 7) {
    .ie#{$ver} & {
        @content;
    }
}

Выход:

.baz {
    background: #CCC;

    @include legacy-ie {
        background: black;
    }
}

Если вы хотите создавать стили, которые работают для нескольких версий IE сразу без дублирования, то это будет одним из способов сделать это:

$default-legacy-ie: 7 8 9 !default;

@mixin legacy-ie($versions: $default-legacy-ie) {
    $sel: ();
    @each $v in $versions {
        $sel: append($sel, unquote('.ie#{$v} &'), comma);
    }

    #{$sel} {
        @content;
    }
}

.foo {
    background: red;

    @include legacy-ie {
        background: green;
    }
}

.bar {
    background: yellow;

    @include legacy-ie(7 8) {
        background: orange;
    }
}

Выход:

.foo {
  background: red;
}
.ie7 .foo, .ie8 .foo, .ie9 .foo {
  background: green;
}

.bar {
  background: yellow;
}
.ie7 .bar, .ie8 .bar {
  background: orange;
}

Если вы хотите иметь возможность подавить все кладжи IE, все, что вам нужно добавить, это одна переменная и блок @if:

$enable-legacy-ie: true !default;

@mixin legacy-ie($ver: 7) {
    @if $enable-legacy-ie {
        .ie#{$ver} & {
            @content;
        }
    }
}

Установите $enable-legacy-ie на false в верхней части файла, если вы не хотите иметь специальные стили IE, установите его на true, если вы хотите, чтобы стили были включены. Вы можете легко написать обратный миксин, чтобы скрыть стили, которые старый IE не может использовать, чтобы файл, специфичный для IE, оставался красивым и маленьким.

person cimmanon    schedule 12.04.2013
comment
Вау, это действительно хорошее решение! Спасибо! Может быть, вы также можете найти решение моей проблемы с rtl. stackoverflow.com/questions/14199323/ - person woutvdd; 12.04.2013

arrow_upward
1
arrow_downward

Вы слишком все усложняете. :) Это может быть так просто:

.box-test {
  margin: 10px;

  .ie-7 & {
    margin: 20px; } }

Результат:

.box-test {
  margin: 10px;
}
.ie-7 .box-test {
  margin: 20px;
}
person Andrey Mikhaylov - lolmaus    schedule 12.04.2013
comment
Лично я предпочитаю использовать миксин, а не просто писать селектор, потому что я хотел бы иметь возможность генерировать отдельные файлы CSS: один без всех уродливых заморочек IE, а другой с. Миксин позволит вам сделать это легко, а написание селектора вручную — нет. - person cimmanon; 12.04.2013

arrow_upward
-1
arrow_downward

Я попытался добавить миксин для взлома "@-moz-document url-prefix()" FF, но он не был распознан SASS, и SASS выдавал ошибку. поэтому я думаю, что лучшим решением будет создать файл _hack.sass и добавить хаки css, которые не будут скомпилированы SASS. Я включаю этот файл всякий раз, когда это необходимо.

@import "взломать";

Я добавляю ответ на этот вопрос, так как считаю, что он будет полезен для тех, кто изо всех сил пытается заставить Mozilla/Safari взломать работу.

person Kashyap    schedule 18.05.2015