Sass / SCSS Mixin для Clearfix - лучший подход? - PullRequest
Новая
       39

Sass / SCSS Mixin для Clearfix - лучший подход?

10 голосов
/ 23 августа 2011

Я хочу удалить класс clearfix из моего HTML и включить миксин clearfix в мой SCSS (приложение Rails 3.1).Каков наилучший подход к этому?

Я подумываю о том, чтобы просто взять пробный код HTML 5 Boilerplate и превратить его в миксин, а затем @ включить его в CSS для элементов, которые необходимо исправить.* 

/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements. http://j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }

/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin padding-bottom-of-page */
.clearfix { zoom: 1; }

Есть ли у этого недостаток?Есть ли способ лучше?Можно ли безопасно удалить clearfix из моей HTML-разметки таким образом?

Ответы [ 4 ]

31 голосов
/ 23 августа 2011

Я, наверное, должен был добавить - это решение, которое я придумал. Я все еще довольно новичок во всем этом, поэтому я не знаю, будет ли это фактически выполнять ту же работу, что и установка класса элемента в clearfix и использование приведенного выше кода HTML5. 

@mixin clearfix {
    zoom:1;
    &:before, &:after {
        content: "\0020"; 
        display: block; 
        height: 0; 
        overflow: hidden; 
    }
    &:after {
        clear: both;
    }
}

Edit: Лучше использовать @extend вместо миксина, так как он будет производить намного меньше кода CSS. Также полезно использовать класс без вывода сообщений (обозначаемый %) при использовании @extend. Это предотвращает неожиданные правила CSS и устраняет правило, которое вы расширяете, если оно не используется напрямую. 

%clearfix {
    zoom:1;
    &:before, &:after {
        content: "\0020";
        display: block;
        height: 0;
        overflow: hidden;
    }
    &:after {
        clear: both;
    }
}

#head {
    @extend %clearfix;
    padding: 45px 0 14px; margin: 0 35px 0;
    border-bottom: 1px solid $border;
}
12 голосов
/ 23 мая 2013

Чтобы добиться меньшего количества вывода кода с помощью @extend, определите clearfix как заполнитель (здесь только для современных браузеров без IE 6 + 7):

Sass код: 

%clearfix {
    &:after {
        content: " ";
        display: block;
        clear: both;
    }
}

/* Use above defined placeholder in the selector(s) of your needs via @extend: */
#container {
    position: relative;
    min-width: 42.5em;
    @extend %clearfix;
}

Вывод CSS будет: 

#container:after {
    content: " ";
    display: block;
    clear: both;
}
#container {
    position: relative;
    min-width: 42.5em;
}
4 голосов
/ 03 августа 2012 
// source http://www.alistapart.com/articles/getting-started-with-sass/
// http://nicolasgallagher.com/micro-clearfix-hack/

    @mixin clearfix {
     // For modern browsers
      &:before,
      &:after {
        content:" ";
        display:table;
      }

      &:after {
        clear:both;
      }

      // For IE 6/7 (trigger hasLayout)
      & {
        *zoom:1;
      }
    }
2 голосов
/ 24 августа 2011

Почему бы не использовать Compass framework? Он уже предоставляет миксины для clearfix среди множества других полезных миксинов и утилит. Всегда лучше искать существующие инструменты, чем самостоятельно поддерживать дополнительный код.

...