小编Mar*_*ers的帖子

我最近开始了一个大型的多年客户端项目,前端开发的第一阶段是创建一个在整个项目中使用的模式库.我正在为我的网格使用Compass和Blueprint.该@include blueprint-grid混入看上去很适合这个项目:它会自动生成语义类名(即.span5),该团队的其他成员可以在所有页面中重用.

但是,Compass文档指出:

最佳做法不鼓励使用此mixin,但它是为了支持旧网站并针对蓝图的示例页面测试sass端口而提供的.

这是为什么？为什么要在现代网格系统中使用非语义类？为各种页面元素创建一个新的CSS类似乎不那么干,它们将共享相同的网格宽度.例如:

.dashboard__chart {
    @include column(6);
}

.dashboard__news {
    @include column(6);
}

当我可以简单地让一个.span6班级申请我的标记.

这可能是情境性的:如果整个项目在整个项目中都有类似的布局(例如,新闻网站或博客),那么非语义类就有意义.但是,此仪表板/报告工具项目在每个页面中都有一些不同的布局.

回到最初的问题:为什么最好不要使用语义类,以及避免它们的最佳方法是什么？

我在Windows Server 2012 VM上第一次尝试gulp.我通常是Mac用户,所以对于像这样的开发工具我对Windows和Powershell有点新.我安装了Node.js和npm(没有别的).我创建了以下基本的Gulpfile来编译我的Sass:

Gulpfile.js

var gulp = require('gulp'),
    sass = require('gulp-ruby-sass');

gulp.task('styles', function() {
    return gulp.src('Content/sass_new/application.scss')
    .pipe(sass({ style: 'expanded', }))
    .pipe(gulp.dest('Content/css'))
});

gulp.task('watch', function() {
    gulp.watch('Content/sass_new/*', ['styles']);
})

gulp.task('default', ['styles']);

在Windows Powershell中,我运行gulp命令,它输出以下内容:

[10:02:57] Using gulpfile C:\[path to]\gulpfile.js
[10:02:57] Starting 'styles'...
[10:02:57] gulp-ruby-sass: 'sass' is not recognized as an internal or external command,
operable program or batch file.
[10:02:57] Finished 'styles' after 316 ms
[10:02:57] Starting 'default'...
[10:02:57] Finished 'default' after 15 ?s

我在这里错过了什么吗？我需要安装Ruby还是Sass？我想这样做,我需要一个Ruby命令提示符,而PowerShell将无法访问它.任何指导表示赞赏!

我想要一个设置了百分比宽度的divwith 。是我最好的选择，我需要几个并排的高度相等。display: table-celldisplay: table-celldiv

经过研究，我正确地将父级设置为display: table; table-layout: fixed; width: 100%在许多其他线程中找到的那样，但table-cell仍然填充了父级。

.table-wrapper {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.table-cell {
  display: table-cell;
  width: 25%;
  overflow: hidden !important;
  border: 1px solid black;
}

<div class="table-wrapper">
  <div class="table-cell">
    Should be 25%, but it fills .table-wrapper
  </div>
</div>

这不可能吗？