SASS / SCSS с использованием @extend для отдельных файлов (адаптивный дизайн) - PullRequest
Новая
       10

SASS / SCSS с использованием @extend для отдельных файлов (адаптивный дизайн)

5 голосов
/ 14 марта 2012

Я использую «мобильный сначала» подход на моем сайте, и я использую SCSS.

У меня есть 3 таблицы стилей SCSS:

  • base.scss (обслуживается всем)
  • medium.scss (> = 768 пикселей в окне)
  • large.scss (> = окно 1024 пикселей)

Они подаются так: 

<link rel="stylesheet" href="/css/base.css" type="text/css" />
<link rel="stylesheet" href="/css/medium.css" type="text/css" media="only screen and (min-width: 767px)" />
<link rel="stylesheet" href="/css/large.css" type="text/css" media="only screen and (min-width: 1023px)" />

Другими словами, large.scss не знает о css в base.scss, но мне нужно расширить класс, который находится в base.css, когда в large.scss.

Как я могу это сделать?

Я попытался разделить элементы, которые мне нужно расширить, например кнопки, в отдельную таблицу стилей, а затем использовать @import 'buttons.scss'; в medium.scss, но тогда все CSS в buttons.scss будут отображаться на этом листе как хорошо.

Есть ли способ заставить классы expose в base.scss "движку" рендеринга SASS при компиляции CSS, чтобы их можно было использовать в medium.scss?

Ответы [ 3 ]

6 голосов
/ 15 марта 2012

У меня недавно была похожая проблема. Мое решение: mixins.

_mixins.scss 

@mixin someSpacing($base: 5px;){
    padding: $base;
    margin: $base;
}

Не забудьте использовать подчеркивание в качестве префикса, sass не будет компилировать эти файлы. Теперь вы можете просто импортировать _mixins.scss в ваши файлы. Кроме того, вы можете расширить свой миксин с параметрами, чтобы дать вам больше гибкости.

например. base.scss 

    @import '_mixins.scss';

    .classA {
        @include someSpacing(3px);
    }

large.scss 

    @import '_mixins.scss';

    .anotherClass {
        @include someSpacing(10px);
    }

подробнее в справочнике sass: http://sass -lang.com / Docs / yardoc / file.SASS_REFERENCE.html # Примеси

2 голосов
/ 17 июля 2012

Мне это тоже нужно было один раз. Я спросил Криса Эппштейна сегодня, и он сказал:

расширение для каждого выходного файла

Так что да. @include - твоя единственная надежда.

0 голосов
/ 12 сентября 2014

Правильный подход к вашей задаче - сохранить все расширяемые селекторы в партиалах и импортировать эти партиалы в ваши выходные файлы.

project / partials / _extendables.sass 

.foo
  color: red

%bar
  width: 50px

проект / base.sass 

@import partials/extendables

.baz
  @extend .foo

проект / medium.sass 

@import partials/extendables

.quux
  @extend %bar

Также подход вамИспользую для организации отзывчивости я сильно устарел.Если вы не обязаны поддерживать какую-то старую ржавую версию IE, вам следует использовать современный подход:

  • Один выходной файл.
  • Код, организованный во множество небольших частичных файлов, сгруппированных покомпоненты страницы (меню, список новостей, новость и т. д.) и по функциям (техника закрепления нижнего колонтитула, типография), а не группировка по медиазапросам или по тому, где элементы появляются на странице (например, весь код заголовка, весь код боковой панели).

  • Медиа-запросы должны применяться поэтапно, на месте, с помощью функции пузырькового медиа-запроса Sass:

    project / partials / components / _menu.sass 

    .menu

   @media (max-width: 600px)
     // Mobile styles for menu container

   @media (min-width: 601px)
     // Desktop styles for menu container


.menu-item

   @media (max-width: 600px)
     // Mobile styles for menu items

   @media (min-width: 601px)
     // Desktop styles for menu items
...