создавать разные файлы css из одинаковых файлов меньшего размера

Мне было интересно, нашел ли кто-нибудь способ создавать разные файлы CSS из одних и тех же файлов less.

В моем контексте я создал другой файл без клиента. Этот файл состоит из ряда переменных с их настройками для темы определенного цвета и других инструкций CSS.

У меня также есть файл меньшего размера для настроек по умолчанию.

Здесь представление меньшей папки

  • Less Folder
    • My less folder
      • All the style specific to my context
  • клиент.по умолчанию.лесс

  • кутомер.лесс

    Я хотел бы скомпилировать два разных css из «Моей папки less», первый из которых будет использовать файл customer.default.less в переменных. Второй будет использовать файл customer.less. Создание customer.default.css и customer.css. Для того, чтобы файлы customer.css и customer.default.css были полностью синхронизированы.

В настоящее время я использую плагин компилятора в webstorm. Использую ли я правильный инструмент?

Спасибо


css less webstorm
person David Laberge    schedule 03.06.2014    source источник
comment
Когда вы спрашиваете о разных файлах CSS, созданных из одних и тех же файлов .less, что будет отличать их друг от друга? Это просто имя (например, customer.css, customer.default.css). Или вы пытаетесь взять части файла .less и применить только к определенным файлам .css?   -  person Matt Smith    schedule 06.06.2014
comment
@MattSmith, я отредактировал вопрос   -  person David Laberge    schedule 06.06.2014
comment
чтобы получить любой из используемых файлов, вам нужно импортировать их в другие файлы .less, используя @import, верно? Должен ли компилятор игнорировать один импорт и использовать другой, или? Я упускаю суть?   -  person lena    schedule 06.06.2014

Ответы (2)


arrow_upward
5
arrow_downward

Вы действительно можете создать несколько выходных данных CSS из файла Less, если вы используете «контрольные» файлы Less.

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

/* main-stylesheet.less */
@maincolor: #ff0000;
@secondarycolor: #00ff00;

body {
  color: @maincolor;
  background-color: @secondarycolor;
}

Теперь мы хотим создать вторичную таблицу стилей (для вывода «customer.default.css» или «customer.css», как вам больше нравится) — мы импортируем основной Less и переопределяем его переменные:

/* secondary-stylesheet.less */
@import "main-stylesheet";

// Override variables from the 'main' stylesheet.
@maincolor: #0000ff;

Обратите внимание, что здесь мы не определяем какие-либо правила или стили, а только переопределяем переменные.

Вот выходные файлы CSS:

/* main */
body {
  color: #ff0000;
  background-color: #00ff00;
}

/* secondary */
body {
  color: #0000ff;
  background-color: #00ff00;
}

Это возможно, потому что Less использует отложенную загрузку.

Убедитесь, что параметр средства просмотра файлов «Отслеживать только корневые файлы» отключен; в противном случае основная таблица стилей в нашем примере не производила бы никаких выходных css.

(Кроме того, я бы разделил два блока объявлений переменных на отдельные Less-файлы — возможно, как theme-variables-default.less и theme-variables-override-a.less)

person Robert K. Bell    schedule 09.06.2014
comment
Это потрясающе, я никогда не думал об импорте другой таблицы стилей Less для чего-либо, кроме импорта переменных. - person Curt; 25.09.2015

arrow_upward
0
arrow_downward

Я думаю, вы можете сделать это, используя grunt-contrib-less задачу GruntJS с чем-то подобным в вашем Gruntfile.

less: {
  development: {
    files: {
      "path/to/customer.css": "path/to/customer.less"
      "path/to/customer.default.css": "path/to/customer.default.less"
    }
  },
  production: {
    files: {
      "path/to/customer.css": "path/to/customer.less"
      "path/to/customer.default.css": "path/to/customer.default.less"
    }
  }
}

LESS не является моим хлебом насущным, но, используя достаточно Sass и задачу grunt-contrib-sass, я предполагаю, что будет существовать тот же набор функций.

person Matt Smith    schedule 06.06.2014