☰

顏色和 vim 與 css

tag-icon • tag-icon vim css
顏色和 vim 與 css

我開始在 Ubuntu 上使用 vim 進行 Web 開發。現在，當我在放置解析度時使用媒體查詢 CSS 時，我遇到了視覺問題

維姆

正如您所看到的，第一個媒體螢幕工作正常，但第二個媒體螢幕無法正常工作。

有什麼辦法可以解決這個問題，讓它看起來像第一個 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

相關內容