☰

使用 css 的颜色和 vim

tag-icon • tag-icon vim css
使用 css 的颜色和 vim

我开始在 Ubuntu 上使用 vim 进行 Web 开发。现在，当我使用媒体查询 CSS 放置分辨率时，我遇到了视觉问题

vim

如您所见，第一个媒体屏幕工作正常，但第二个媒体屏幕工作不正常。

有什么方法可以修复这个问题，使它看起来像第一个 CSS 媒体查询？

答案1

以下是我用于 HTML5 和 CSS3 媒体查询的内容：

首先创建文件夹： mkdir -p ~/.vim/after/syntax/css

然后编辑： vi .vim/after/syntax/html.vim并输入：

" Vim syntax file
" Language: HTML (version 5)
" Maintainer: Rodrigo Machado <[email protected]>
" 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

然后输入 vi.vim/after/syntax/css/css3-mediaqueries.vim并输入：

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

相关内容