Блог

Главная - Вопросы по программированию - Как использовать css этого стиля в LESS?

Как использовать css этого стиля в LESS?

#css #blueprint-css #less

#css #blueprint-css #Меньше

Вопрос:

Я хочу использовать какой-нибудь css фреймворк, но ненавижу его несерьезность. Итак, я хочу использовать LESS. Основная идея заключается в смешивании css фреймворка с моими собственными классами. Но я чувствую, что LESS не справляется с некоторыми сценариями. Например, некоторые классы определены в фреймворке как:

div.prepand = {…} или * html .span-1 = {…}

Похоже, что LESS mixin не поддерживает вышеупомянутые ситуации. Есть идеи?

Ответ №1:

Я не уверен, какой фреймворк вы имели в виду, говоря, что «некоторые классы определены в фреймворке как:».

В Less вы не объявляете микшины так, как вы это показали. Вы делаете это вот так:

 .my_mixin { ... }

И затем ниже в файле вы можете (повторно) использовать его следующим образом:

 div.content {
   .my_mixin;
}

Кроме этого, я не понимаю вашего вопроса. Вы хотите использовать CSS фреймворка в своих собственных классах? Что это значит? Вы пишете CSS в Less или нет…

Комментарии:

1. Моя проблема заключается в смешивании существующего фреймворка, такого как blueprint css. Для стилей в blueprint css, таких как span-x, это поиск, поскольку они совместимы с миксинами. Но в файле для взлома ie от blueprint есть несколько определений стиля, таких как: html body span-x {…} . Такие определения нельзя использовать в качестве миксинов.

2. я думаю, вам пришлось бы взять файл Blueprint’s hack и записать его в Less, добавляя миксины по мере необходимости.. это не должно быть слишком сложно. а затем просто включите его в свой проект и используйте mixins… я давно не работал с Blueprint, я не помню, насколько это сложно, но я уверен, что его можно было бы переписать в Less.

3. Я согласен. Переписать — единственное решение. На самом деле только файл ie hack — это небольшая заноза в заднице. Итак, ie отстой, а не blueprint или less.

Ответ №2:

Здесь я только что собрал сеточную часть blueprint.css в LESS. Вы можете задать ширину столбца и желоба, а затем использовать микшины, подобные этому:

 #header {
  .span(20);
  .prepend(2);
}

Я также добавил пару примеров запросов @media, позволяющих создавать адаптивные макеты.

Я надеюсь, что это может быть кому-то полезно.