Как условно загрузить CSS и расширить его с помощью SASS / SCSS

tl: dr version: есть ли способ @ расширить класс css и не отображать исходный класс в моем скомпилированном css без изменения всех моих классов css на классы-заполнители ?

Краткий ответ, основанный на приведенных ниже ответах: похоже, это невозможно сделать, если вы не пройдете и не преобразуете CSS в классы без звука / заполнителя, например. конвертировать .one {} в% one {}, и даже тогда это вызовет проблемы с медиа-запросами.

У меня есть файл css (назовем его "style.css"), который содержит 200+ классов CSS для стилизации различных элементов, таких как формы, кнопки и т. Д. Я хочу включить некоторые из этих классов в проект, а другие классы из этого файла. в других случайных проектах / сайтах. В каждом новом проекте я также хочу давать классам случайные семантические имена классов по моему выбору.

При работе с CSS я предпочитаю препроцессор SCSS, и мне действительно нужен ответ, который использует возможности SCSS.

Вот краткий пример того, о чем я говорю - загрузка css в файл SCSS, а затем расширение этого css моими собственными именами классов:

//style.css
.one {
  color: red;
  padding-top: 1px;
}

//style2.scss
@import "style.css";

.two {
  @extend .one;
}

Проблема здесь в том, что мой файл SCSS будет компилироваться в CSS и будет выглядеть так:

//style2.css
.one {
  color: red;
  padding-top: 1px;
}
.two {
  color: red;
  padding-top: 1px;
}

Но я хочу включить только второй класс, которому я дал особое имя.

Я пробовал несколько способов сделать это, но вот один пример, который не работает, но соответствует тому, что я думал, что должен уметь:

A.) Сначала я беру файл style.css и копирую / вставляю его в файл style.scss.

Б.) Во-вторых, я оборачиваю все это в класс-заполнитель / безмолвный класс, вот так:

//style.scss
%placeholder {
  .one {
    color: red;
    padding-top: 1px;
  }
}

C.) Затем я импортирую этот файл SCSS и пытаюсь расширить класс по моему выбору, который находится внутри заполнителя, например:

//style2.scss
@import "style";

.two {
  @extend .one;
}

Когда я пытаюсь скомпилировать это, я получаю пустой файл css (и это правильно, если я пытаюсь быть слишком сложным). Еще я знаю, что вы не можете расширять вложенные селекторы так: "@extend% placeholder .one;" тоже не может быть и речи.

У меня такой вопрос: знает ли кто-нибудь способ импортировать, а затем расширить класс css, чтобы в скомпилированный результат не входил импортированный css?

Единственное другое решение, которое я могу придумать, - это просто удалить импортированный css из верхней части моего файла, прежде чем я выпущу его в дикую природу. Но это, честно говоря, далеко не идеальное решение.

Заранее спасибо за любые ответы :)


css sass
person Josh    schedule 10.10.2013    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы неправильно используете заполнители, заполнитель должен быть просто one, не нужно его переносить. Попробуй это:

// style.scss
%one {
  color: red;
  padding-top: 1px;
}

// style2.scss
@import "style";

.two {
  @extend %one;
}

Обратите внимание, что с этим подходом есть проблема. Хотя выводимый CSS более компактный, чем использование миксина (@include), вы не сможете использовать %one внутри каких-либо @media запросов. Т.е. так не пойдет:

// style2.scss
@import "style";

@media screen and (max-width:1024px) {
  .two {
    // This won't produce CSS as it's inside the media query
    @extend %one;
  }
}

Я знаю, что единственный способ обойти это - использовать миксин вместо заполнителя, что приведет к большему количеству CSS (если вы используете one более одного раза).

// style.scss
@mixin one() {
  color: red;
  padding-top: 1px;
}

// style2.scss
@import "style";

@media screen and (max-width:1024px) {
  .two {
    @include one();
  }
}

Я подробно описал разницу в выводе между миксинами и селекторами заполнителей на мой блог, если вы не в курсе.

person Daniel Imms    schedule 10.10.2013
comment
На самом деле @extend может довольно часто в конечном итоге генерировать CSS-файл большего размера, чем если бы вы использовали миксины (см. codereview.stackexchange.com/a / 27910/26722), в зависимости от того, как часто стили расширяются, и длины рассматриваемых селекторов. - person cimmanon; 10.10.2013
comment
Ах, да - я надеялся, что есть способ @extend мои классы css и не отображать старые в моем скомпилированном css без изменения их всех на классы-заполнители%. Это действительно то, что я должен был спросить :) - person Josh; 10.10.2013
comment
@cimmanon да, я уже упоминал об этом. Я бросил ссылку на статью, которую я написал, в которой также подробно описывается разница. - person Daniel Imms; 10.10.2013
comment
@Josh ну да, именно по этой причине существуют селекторы заполнителей: P разрешает расширение и не выводит оригинал. - person Daniel Imms; 10.10.2013
comment
Я надеялся найти способ включить несколько фреймворков css в свой проект, а затем просто расширить классы, которые я хотел использовать, из каждой из этих фреймворков. Странно хотеть, но, тем не менее, я хочу этого! Я думаю, это сложнее, чем это: P - person Josh; 10.10.2013
comment
Что ж, вы можете использовать селекторы заполнителей, как указано выше, просто помните о проблеме @media. - person Daniel Imms; 10.10.2013