Используя vi, как я могу сделать CSS-правила в один лайнер? - PullRequest
9 голосов
/ 14 сентября 2009

Пример плохой:

#main {
      padding:0;
      margin: 10px auto;
}

Пример хорошего:

#main {padding:0;margin:10px auto;}

У меня есть тонна CSS-правил, которые занимают слишком много строк. И я не могу понять, какие команды :%s/ использовать.

Ответы [ 7 ]

16 голосов
/ 14 сентября 2009

Вот одна строка:

:%s/{\_.\{-}}/\=substitute(submatch(0), '\n', '', 'g')/

\_. соответствует любому символу, включая символ новой строки, а \{-} - не жадная версия *, поэтому {\_.\{-}} соответствует всему между соответствующей парой фигурных скобок включительно.

\= позволяет вам заменить результат выражения vim, которое мы здесь используем, чтобы вырезать все новые строки '\n' из сопоставленного текста (в submatch(0)), используя функцию substitute().

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

:%s/{\_.\{-}}/\=substitute(submatch(0), '[{;]', '\0\r', 'g')/
11 голосов
/ 14 сентября 2009

Если вы находитесь в начале или в конце правила, V%J объединит его в одну строку:

  • Перейти к открывающей (или закрывающей) скобе
  • Нажмите V, чтобы войти в визуальный режим
  • Нажмите %, чтобы сопоставить другую скобку, выбрав целое правило
  • Нажмите J, чтобы присоединиться к линии
4 голосов
/ 14 сентября 2009

Я не буду отвечать на вопрос напрямую, но вместо этого я предлагаю вам пересмотреть свои потребности. Я думаю, что ваш "плохой" пример на самом деле лучше. Это более читабельно, легче рассуждать и изменять. Хорошие отступы очень важны не только для языков программирования, но также для CSS и HTML.

Вы упоминаете, что правила CSS "занимают слишком много строк". Если вас беспокоит размер файла, вам следует рассмотреть возможность использования минификатора CSS / JS, например YUI Compressor вместо того, чтобы сделать код менее читабельным.

4 голосов
/ 14 сентября 2009

Если вы хотите изменить файл, перейдите к решению rampion .

Если вы не хотите (или не можете) изменить файл, вы можете поиграть с пользовательским свертыванием, так как оно позволяет выбрать, что и как отображать сложенный текст. Например:

" {rtp}/fold/css-fold.vim
" [-- local settings --]               {{{1
setlocal foldexpr=CssFold(v:lnum)
setlocal foldtext=CssFoldText()

let b:width1 = 20
let b:width2 = 15

nnoremap <buffer> + :let b:width2+=1<cr><c-l>
nnoremap <buffer> - :let b:width2-=1<cr><c-l>

" [-- global definitions --]           {{{1
if exists('*CssFold')
  setlocal foldmethod=expr
  " finish
endif

function! CssFold(lnum)
  let cline = getline(a:lnum)
  if     cline =~ '{\s*$'
      return 'a1'
  elseif cline =~ '}\s*$'
      return 's1'
  else
      return '='
  endif
endfunction

function! s:Complete(txt, width)
  let length = strlen(a:txt)
  if length > a:width
      return a:txt
  endif
  return a:txt . repeat(' ', a:width - length)
endfunction

function! CssFoldText()
  let lnum = v:foldstart
  let txt = s:Complete(getline(lnum), b:width1)
  let lnum += 1
  while lnum < v:foldend
      let add = s:Complete(substitute(getline(lnum), '^\s*\(\S\+\)\s*:\s*\(.\{-}\)\s*;\s*$', '\1: \2;', ''), b:width2)
      if add !~ '^\s*$'
          let txt .= ' ' . add
      endif

      let lnum += 1
  endwhile
  return txt. '}'
endfunction

Я оставляю сортировку полей в качестве упражнения. Подсказка: получите все строки между v: foldstart + 1 и v: voldend в списке, отсортируйте список, создайте строку и все.

4 голосов
/ 14 сентября 2009

Попробуйте что-то вроде этого:

:%s/{\n/{/g
:%s/;\n/;/g
:%s/{\s+/{/g
:%s/;\s+/;/g

При этом удаляются символы новой строки после открывающих скобок и точек с запятой ('{' и ';'), а затем удаляются лишние пробелы между объединенными строками.

1 голос
/ 29 мая 2012

Удобный способ выполнить это преобразование - запустить следующую короткую команду.

:g/{/,/}/j
0 голосов
/ 14 сентября 2009

Перейдите к первой строке файла и используйте команду gqG, чтобы запустить весь файл через средство форматирования. Предполагая, что серии непустых строк должны быть свернуты во всем файле.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...