手写动画css jss_用手写笔生成CSS网格-CSDN博客

手写动画css jss

I've jumped into Stylus over the past few moths and I love it. I wouldn't say it's better or worse than SASS, it's just something a bit different. One task I've recently completed is building the standard Mozilla grid and column structure with a Stylus mixin. Here's how I did it!

在过去的几个月里，我跳进了Stylus ，我喜欢它。我不会说它比SASS更好或更糟，只是有些不同。我最近完成的一项任务是使用Stylus mixin构建标准的Mozilla网格和列结构。这是我的方法！

CSS (The CSS)

The first step is setting up vars to represent the column start, stop, and increment sizes:

第一步是设置vars，以表示列的开始，停止和增量大小：


/* grid and site dimensions */
grid-increment-desktop = 80px
grid-increment-tablet = 60px
grid-increment-mobile = grid-increment-tablet

grid-start-desktop = 60px
grid-start-tablet = 40px
grid-start-mobile = grid-start-tablet

grid-end-desktop = 940px
grid-end-tablet = 700px
grid-end-mobile = 280px
grid-end-mobile-wide = 400px

site-width-desktop = 1000px
site-width-tablet = 760px
site-width-mobile = 320px
site-width-wide = 480px

/* media query dimensions */
/* obviously the default view doesn't require a media query */
media-query-tablet = 'only screen and (min-width: 760px) and (max-width: 1000px)'
media-query-mobile = 'only screen and (max-width: 760px)'
media-query-mobile-wide = 'only screen and (min-width: 480px) and (max-width: 760px)'

The grid widths will be need to be modified based on media query (device width) so we'll generate a general grid and then a media query-specific grid:

网格宽度将需要根据媒体查询(设备宽度)进行修改，因此我们将生成一个通用网格，然后生成一个媒体查询特定的网格：


generate-grid(increment, start, end)
	total = start
	for n, x in 0..((end - start) / increment)
		.column-{x+1}
			width total
		total = total + increment


/* and now to generate the grids... */


/* Desktop Layout (default) */
generate-grid(grid-increment-desktop, grid-start-desktop, grid-end-desktop)


/* Tablet Layout - 760px */
@media media-query-tablet
	generate-grid(grid-increment-tablet, grid-start-tablet, grid-end-tablet)

/* Mobile Layout - 320px */
@media media-query-mobile
	generate-grid(grid-increment-mobile, grid-start-mobile, grid-end-mobile)

 /* Wide Mobile Layout - 480px */
@media media-query-mobile-wide
	generate-grid(grid-increment-mobile, grid-start-mobile, grid-end-mobile-wide)

The result looks like this:

结果看起来像这样：


.column-1 {
  width: 60px;
}
.column-2 {
  width: 140px;
}
.column-3 {
  width: 220px;
}
.column-4 {
  width: 300px;
}
.column-5 {
  width: 380px;
}
.column-6 {
  width: 460px;
}
.column-7 {
  width: 540px;
}
.column-8 {
  width: 620px;
}
.column-9 {
  width: 700px;
}
.column-10 {
  width: 780px;
}
.column-11 {
  width: 860px;
}
.column-12 {
  width: 940px;
}
@media only screen and (min-width: 760px) and (max-width: 1000px) {
  .column-1 {
    width: 40px;
  }
  .column-2 {
    width: 100px;
  }
  /* ... */
}
@media only screen and (max-width: 760px) {
  /* ... */
}
@media only screen and (min-width: 480px) and (max-width: 760px) {
  /* ... */
}

I love how easy it is to create these grids using CSS preprocessors and I hope CSS eventually makes it to the dynamic level. SASS and Stylus proves that the system works and I pray we get a standard soon!

我喜欢使用CSS预处理器创建这些网格非常容易，并且希望CSS最终使其达到动态水平。 SASS和Stylus证明该系统正常运行，我祈祷我们尽快获得标准！