ctrl+shift+p filters: :st2 :st3 :win :osx :linux
浏览

CSS 代码片段

由 joshnh ALL 前100

一套适用于Sublime Text的自定义CSS代码片段

标签 snippets

详细信息

  • 2022.03.31.01.03.40
  • github．com
  • github．com
  • 2年前
  • 10分钟前
  • 12年前

安装

  • 总数 263K
  • Win 172K
  • Mac 63K
  • Linux 28K
8月6日 8月5日 8月4日 8月3日 8月2日 8月1日 7月31日 7月30日 7月29日 7月28日 7月27日 7月26日 7月25日 7月24日 7月23日 7月22日 7月21日 7月20日 7月19日 7月18日 7月17日 7月16日 7月15日 7月14日 7月13日 7月12日 7月11日 7月10日 7月9日 7月8日 7月7日 7月6日 7月5日 7月4日 7月3日 7月2日 7月1日 6月30日 6月29日 6月28日 6月27日 6月26日 6月25日 6月24日 6月23日 6月22日
Windows 5 5 8 5 6 11 6 1 3 2 4 1 4 4 3 6 1 1 6 5 8 3 10 3 1 4 3 5 12 2 3 5 4 7 5 2 4 4 3 6 2 6 6 9 7 4
Mac 2 1 0 0 3 1 3 3 0 0 0 1 1 0 1 1 0 0 2 2 0 1 1 0 0 0 0 2 3 0 0 0 1 1 2 1 1 0 1 0 1 0 0 0 0 0
Linux 0 1 0 1 1 1 1 1 1 1 0 0 1 1 0 0 0 0 3 0 3 1 1 1 2 0 1 0 1 2 1 1 1 3 1 1 0 0 1 0 2 1 2 1 4 0

说明文件

源码
raw．githubusercontent．com

Sublime Text CSS 代码片段

更新：范围已扩展到包括LESS、Sass和Stylus文件。

输入代码片段简码，然后按 Tab 键完成代码片段。

以下是按字母顺序排列的代码片段。'$1' 表示光标/插入符的初始位置。一些代码片段已被设置为按Tab键将光标/插入符跳转到下一个预定义的位置。这有点难以解释，但任何具有$1/$2/$3等格式的代码片段都使用这种技术。

您可以根据自己的意愿随意尝试、修改、扩展或破坏这些代码片段。我只希望如果您想出一个非常实用的代码片段或仅仅是我遗漏的代码片段，请告诉我，以便我可以为每个人改进这些代码片段。谢谢！

这是您想知道的背单引号（在Tab键的同一键上，直接在Tab键的上方）。

/* $1 **************************************************/

abs

position: absolute;

act

$1:active {
    $2
}

aft

$1:after {
    content: '';
    $2
}

amp

用 包装和号（&）使其看起来更性感。

.amp {
    font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
    font-style: italic;
    font-weight: normal;
}

ani

动画简写：animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction。

-webkit-animation: ${1:name} ${2:duration} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)} ${4:delay} ${5:infinite|<number>} ${6:normal|alternate};
   -moz-animation: ${1:name} ${2:duration} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)} ${4:delay} ${5:infinite|<number>} ${6:normal|alternate};
    -ms-animation: ${1:name} ${2:duration} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)} ${4:delay} ${5:infinite|<number>} ${6:normal|alternate};
     -o-animation: ${1:name} ${2:duration} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)} ${4:delay} ${5:infinite|<number>} ${6:normal|alternate};
        animation: ${1:name} ${2:duration} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)} ${4:delay} ${5:infinite|<number>} ${6:normal|alternate};

aut

margin: ${1:0} auto;

bac

background: ${1:#fff} url('$2') ${3:0} ${4:0} ${5:repeat|repeat-x|repeat-y|no-repeat|inherit|round|space};

bef

$1:before {
    content: '';
    $2
}

blo

display: block;

bol

font-weight: bold;

bor

border-radius: $1;

bot

bottom: ${1:0};

box

-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;

cen

text-align: center;

cf

您应该考虑使用inline-block布局而不是float。

.cf:after,
.cf:before {
    content: '';
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    zoom: 1;
}

con

content: '$1';

cur

cursor: ${1:auto|crosshair|default|pointer|move|e-resize|ne-resize|-resize|n-resize|se-resize|sw-resize|s-resize|w-resize|text|wait|help|progress};

fil

-webkit-animation-fill-mode: ${1:none|forwards|backwards|both};
   -moz-animation-fill-mode: ${1:none|forwards|backwards|both};
    -ms-animation-fill-mode: ${1:none|forwards|backwards|both};
     -o-animation-fill-mode: ${1:none|forwards|backwards|both};
        animation-fill-mode: ${1:none|forwards|backwards|both};

fix

position: fixed;

fon

除非您正在使用像素值，否则无需声明line-height的值（1.5与1.5em或150%相同）。

font: ${1:normal|italic|oblique} ${2:normal|small-caps} ${3:normal|bold|bolder|lighter} ${4:1em}/${5:1.5} ${6:sans-serif};

背景色 定义一个背景色，使用渐变时添加透明度（alpha），这样你只需要修改一个值就可以更改背景颜色。

background-image: -webkit-linear-gradient($1);
background-image:    -moz-linear-gradient($1);
background-image:     -ms-linear-gradient($1);
background-image:      -o-linear-gradient($1);
background-image:         linear-gradient($1);

隐藏

overflow: hidden;

悬停

为了提高可访问性，当定义锚点样式时，建议使用焦点伪类（:focus）和悬停伪类（:hover）一起使用，而在其他情况下通常不需要 :focus。

$1:hover,
$1:focus {
    $2
}

水平

我比较喜欢使用 rgba()，我已经写了一篇文章解释为什么。

hsla(${1:0},${2:0}%,${3:0}%,${4:1})

子元素

-webkit-hyphens: auto;
   -moz-hyphens: auto;
    -ms-hyphens: auto;
        hyphens: auto;

内联

如果你需要像素级对齐，请在你的标记中取消注释元素间的空白（尽管像素级完美对齐并不现实）。

display: inline-block;
vertical-align: top;
${1:zoom: 1;${2: /* Fix for IE7 */}
*display: inline;${2: /* Fix for IE7 */}}

斜体

font-style: italic;

键

这个片段很好地使用了Sublime Text 2的多选功能。如果你丢失了多选功能，一个快速恢复的方法是选择 'keyframes'，然后按CMD+D（Windows上的CTRL+D）四次，然后使用箭头键进行导航。继续按Tab键可以将插入符还原为单选，也可以使用ESC强制这样做。

@-webkit-keyframes $1 {
    0% { $2 }
    100% { $3 }
}
@-moz-keyframes $1 {
    0% { $2 }
    100% { $3 }
}
@-ms-keyframes $1 {
    0% { $2 }
    100% { $3 }
}
@-o-keyframes $1 {
    0% { $2 }
    100% { $3 }
}
@keyframes $1 {
    0% { $2 }
    100% { $3 }
}

左边距

left: ${1:0};

行内

line-height: ${1:1.5};

外边距

margin: ${1:0};

中等

在关注响应式设计时，建议使用 min-width（这意味着较小的设备，如手机，不会应用未被使用的样式）。

@media (min-width: $1) {
    $2
}

非（阻塞）

text-decoration: none;

填充

padding: ${1:0};

平面

-webkit-animation-play-state: ${1:running|paused};
   -moz-animation-play-state: ${1:running|paused};
    -ms-animation-play-state: ${1:running|paused};
     -o-animation-play-state: ${1:running|paused};
        animation-play-state: ${1:running|paused};

r

我比较喜欢使用 hsla()，我已经写了一篇文章解释为什么。

rgba(${1:0},${2:0},${3:0},${4:1})

相关

position: relative;

定位

right: ${1:0};

安全

font-family: ${1:<font-name>,} sans-serif;

序列

font-family: ${1:<font-name>,} serif;

阴影

box-shadow: ${1:horizontal-offset} ${2:vertical-offset} ${3:blur-radius} ${4:spread-distance} ${5:hsla(0,0%,0%,.25)};

时间

transparent

触摸

这会覆盖iPhone/iPad上的高亮颜色。

-webkit-tap-highlight-color: ${1:hsla(0,0%,0%,.5)};
        tap-highlight-color: ${1:hsla(0,0%,0%,.5)};

文本

请明智使用，请注意可读性。

text-shadow: ${1:horizontal-offset} ${2:vertical-offset} ${3:blur-radius} ${4:hsla(0,0%,0%,.25)};

顶部

top: ${1:0};

转换

这太复杂了，无法列出所有选项。

-webkit-transform: $1;
   -moz-transform: $1;
    -ms-transform: $1;
     -o-transform: $1;
        transform: $1;

过渡

过渡简写：transition-propery transition-duration transition-timing-function transition-delay。默认值是：all 0 ease 0，这意味着如果你想将过渡应用于所有属性，并使用 ease 时间函数，你只需要声明持续时间（例如，transition: .5s;）。

-webkit-transition: ${1:all} ${2:.25s} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)};
   -moz-transition: ${1:all} ${2:.25s} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)};
    -ms-transition: ${1:all} ${2:.25s} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)};
     -o-transition: ${1:all} ${2:.25s} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)};
        transition: ${1:all} ${2:.25s} ${3:ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(<number>,<number>,<number>,<number>)};

上半部

text-transform: uppercase;

包裹

出于传统原因，用户代理也可能会接受 'word-wrap' 作为 'overflow-wrap' 属性的替代名称。然而，这种语法不符合作者样式表。 (http://www.w3.org/TR/css3-text/#overflow-wrap)

overflow-wrap: break-word;
    word-wrap: break-word;