stylus,Code片段,代码实例,代码示例,代码片段库

stylus 搜索 - 搜索栏

.pug

.search-bar
  .logo
  input(placeholder='Search ...', type='text')
  nav.user-menu
    a(href='') Login
    a(href='') Register

.styl

.search-bar
  padding: 10px 25px
  background-color: red
  display: flex
  flex-direction: row
  justify-content: space-between
  align-items: center

  .logo
    background-image: url('https://d1ktvljo0s16y6.cloudfront.net/static/images/logo.f392b2746345.png')
    background-size: contain
    background-repeat: no-repeat
    background-position: center center
    width: 80px
    height: 30px

  nav.user-menu
    a
      display: inline-block
      margin: 0 8px
      color: white
      font-weight: bold
      text-decoration: none

stylus 搜索 - 结果产品

.pug

.product
  img(src='https://www.prosoundnetwork.com/.image/c_limit%2Ccs_srgb%2Cq_auto:good%2Cw_436/MTUxOTA1OTQ3MDk3OTAwMDU4/image-placeholder-title.webp')
  h2 Amazing Earphone
  span.price 1980 L.E

.styl

.product
  width: 250px
  text-align: center
  padding: 10px
  img
    width: 180px
    height: 180px
    object-fit: contain

stylus BEM助手（SCSS，SASS，LESS，Stylus）

BEM助手（SCSS，SASS，LESS，Stylus）

bem.less

// Mixins
.has(@element; @content) {
  &__@{element} {
    @content();
  }
}

.variant(@modifier; @content) {
  &--@{modifier} {
    @content();
  }
}

// Example
.Alert {
  padding: 20px;
  position: relative;
  width: 500px;
  
  .variant(danger; {
    background-color: #c00;
    color: #300;
  });

  .has(close-button; {
    display: inline-block;
    position: absolute;
    right: 20px;
    top: 20px;
    
    .variant(danger; {
      color: #c00;
    });
  });
}

bem.sass

// Mixins
=has($element)
  @at-root #{&}__#{$element}
    @content

=variant($modifier)
  @at-root #{&}--#{$modifier}
    @content

// Example
.Alert 
  padding: 20px
  position: relative
  width: 500px
  
  +variant(danger) 
    background-color: #c00
    color: #300
  

  +has(close-button) 
    display: inline-block
    position: absolute
    right: 20px
    top: 20px
    
    +variant(danger) 
      color: #c00;

bem.scss

// Mixins
@mixin has($element) {
  &__#{$element} {
    @content;
  }
}

@mixin variant($modifier) {
  &--#{$modifier} {
    @content;
  }
}

// Example
.Alert {
  padding: 20px;
  position: relative;
  width: 500px;
  
  @include variant(danger) {
    background-color: #c00;
    color: #300;
  }

  @include has(close-button) {
    display: inline-block;
    position: absolute;
    right: 20px;
    top: 20px;
    
    @include variant(danger) {
      color: #c00;
    }
  }
}

bem.styl

// Mixins
has($element)
  /&__{$element}
    {block}

variant($modifier)
  /&--{$modifier}
    {block}

// Example
.Alert 
  padding: 20px
  position: relative
  width: 500px
  
  +variant(danger)
    background-color: #c00
    color: #300
  
  +has(close-button)
    display: inline-block
    position: absolute
    right: 20px
    top: 20px
    
    +has(danger)
      color: #c00

stylus 面包

index.pug

.bread
	-
		var items = ['Главная','Программа Strong','Оформление заказа'];
	each item in items
		a(href="#").bread__el #{item}

style.styl

.bread
	+below(640px)
		display: none
	f()
	fw()
	padding: 30px 0 40px 0

.bread__el
	margin-right: 15px
	margin-bottom: 10px
	position: relative
	@extend .type--sm
	opacity .5
	&:after
		content '>'
		position: absolute
		right: -10px
		top 1px
	&:last-child
		&:after
			content ''
			display: none

stylus Css水平和垂直弯曲中心

Css水平和垂直弯曲中心。 <br/> <br/> https://jsfiddle.net/och0kna2/1/

css_flex_center_horizontally_and_vertically.styl.html

<div class="father">
  <p>sarasa</p>
</div>

css_flex_center_horizontally_and_vertically.styl

.father
  display flex
  align-items center
  justify-content center
  width 165px
  height 48px
  border solid 1px #e6253b

stylus 带Flexbox的垂直中心

带Flexbox的垂直中心<br/> <br/>来源：https：//davidwalsh.name/css-vertical-center-flexbox

html.html

<div class="flexbox-container">
	<div>Blah blah</div>
	<div>Blah blah blah blah blah ...</div>
</div>

css.styl

.flexbox-container
	display flex
	align-items center

stylus 多行css省略号

multiline_css_ellipsis.styl

multiline-ellipsis(lines, fallbackHeight, fallbackHeightLinearGradient)
  overflow hidden
  text-overflow ellipsis
  max-height fallbackHeight // Support for browser that no support line clamp
  &:after
    content ""
    text-align right
    position absolute
    bottom 0
    right 0
    width 30%
    height fallbackHeightLinearGradient
    background linear-gradient(to right, rgba(255,255,255,0), #fff 50%)
  @supports(-webkit-line-clamp lines)
    display -webkit-box
    display -moz-box
    -webkit-line-clamp lines
    -moz-line-clamp lines
    -webkit-box-orient: vertical
    -moz-box-orient: vertical
    max-height none
    &:after
      display none

stylus Animações手写笔

glitch.styl

.elemento
  animation glitch_opacity 8s step-start infinite
  
  span
    animation glitch_scale 12s step-start 2s infinite

@keyframes glitch_opacity
	0%
	10%
	20%
		opacity 1
		
	5%
	15%
		opacity 0
	
@keyframes glitch_scale	
	20%
		transform translate(-20px, -5px)
		
	50%
		transform translate(-20px, -5px) scale(.7, .9)
		
	51%
		transform translate(-25px, -5px) scale(.7, .9)
	
	52%
		transform translate(-20px, -5px) scale(.7, .9)
	
	53%
		transform translate(-20px, -5px) scale(1)
		opacity 1
		
	54%
	56%
	58%
		transform translate(0)
	
	55%
	57%
		opacity 0
	
	59%
		opacity 1
		transform scale(1.3, 1.2)
	
	60%
		transform scale(1, 1)

atencao.styl

animation atencao 2s infinite

@keyframes atencao
	0%
	20%
	40%
		transform translateY(0)
	
	10%
	30%
		transform translateY(-10px)

stylus 手写笔>翻译>垂直

main.styl

position absolute
  top 50%
  transform translate(0, -50%)

stylus 手写笔>翻译>垂直和水平

main.styl

position absolute
  top 50%
  left 50%
  transform translate(-50%, -50%)