Take the 2-minute tour ×
Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

I started to use vim on Ubuntu for web development. Now, I have a visual issue when I use media query CSS when I put resolutions

vim

As you can see the first media screen is working properly but not the second one.

Is there any way I can fix this so it looks like the first CSS media query?

share|improve this question
add comment

1 Answer

up vote 10 down vote accepted

Here's what I use for my HTML5 and CSS3 Media Queries:

First create the folder: mkdir -p ~/.vim/after/syntax/css

Then edit: vi .vim/after/syntax/html.vim and put:

" Vim syntax file
" Language: HTML (version 5)
" Maintainer: Rodrigo Machado <rcmachado@gmail.com>
" URL: http://rm.blog.br/vim/syntax/html.vim
" Last Change: 2009 Aug 19
" License: Public domain
" (but let me know if you liked it :) )
"
" Note: This file just adds the new tags from HTML 5
" and don't replace default html.vim syntax file

" HTML 5 tags
syn keyword htmlTagName contained article aside audio bb canvas command datagrid
syn keyword htmlTagName contained datalist details dialog embed figure footer
syn keyword htmlTagName contained header hgroup keygen mark meter nav output
syn keyword htmlTagName contained progress time ruby rt rp section time video

" HTML 5 arguments
syn keyword htmlArg contained autofocus placeholder min max step
syn keyword htmlArg contained contenteditable contextmenu draggable hidden item
syn keyword htmlArg contained itemprop list subject spellcheck
" this doesn't work because default syntax file alredy define a 'data' attribute
syn match htmlArg "\<\(data-[\-a-zA-Z0-9_]\+\)=" contained

syn include @htmlCss syntax/css/css3-mediaqueries.vim

and then vi .vim/after/syntax/css/css3-mediaqueries.vim and put:

syn region cssMediaType start='(' end=')' contains=css.*Attr,css.*Prop,cssComment,cssValue.*,cssColor,cssURL,cssImportant,cssError,cssStringQ,cssStringQQ,cssFunction,cssUnicodeEscape nextgroup=cssMediaComma,cssMediaAnd,cssMediaBlock skipwhite skipnl
syn match cssMediaAnd "and" nextgroup=cssMediaType skipwhite skipnl
syn clear cssMediaBlock
syn region cssMediaBlock contained transparent matchgroup=cssBraces start='{' end='}' contains=cssTagName,cssSelectorOp,cssAttributeSelector,cssIdentifier,cssError,cssDefinition,cssPseudoClass,cssComment,cssUnicodeEscape,cssClassName,cssURL

If you need more CSS you can go here: https://github.com/disusered/vim-config/blob/master/bundle/syntax-css3/

share|improve this answer
    
+bookofzeus the github link at the bottom is broken. –  Meitham Oct 20 '12 at 14:12
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.