没使用过.. 不够简单看了下.. 我觉得你的问题应该是 less 还有 scss 该怎么使用。

这里只讲 less, scss 自己上 http://sass-lang.com 研究

Less

http://lesscss.org 官网被墙了。

http://www.lesscss.net/ 替代之。

在引入less.js前先要把你的样式文件引入 :

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

回到 Frameless 的 Less

其实它的核心就下面几段代码

//
// Configuration
//

@font-size: 16;         // Your base font-size in pixels
@em: @font-size*1em;    // Shorthand for outputting ems, e.g. "12/@em"

@column: 48;    // The column-width of your grid in pixels
@gutter: 24;    // The gutter-width of your grid in pixels


//
// Column-widths in variables, in ems
//

 @1cols: ( 1 * (@column + @gutter) - @gutter) / @em; @1col: @1cols;
 @2cols: ( 2 * (@column + @gutter) - @gutter) / @em;
 @3cols: ( 3 * (@column + @gutter) - @gutter) / @em;
 @4cols: ( 4 * (@column + @gutter) - @gutter) / @em;
 @5cols: ( 5 * (@column + @gutter) - @gutter) / @em;
 @6cols: ( 6 * (@column + @gutter) - @gutter) / @em;
 @7cols: ( 7 * (@column + @gutter) - @gutter) / @em;
 @8cols: ( 8 * (@column + @gutter) - @gutter) / @em;
 @9cols: ( 9 * (@column + @gutter) - @gutter) / @em;
@10cols: (10 * (@column + @gutter) - @gutter) / @em;
@11cols: (11 * (@column + @gutter) - @gutter) / @em;
@12cols: (12 * (@column + @gutter) - @gutter) / @em;
@13cols: (13 * (@column + @gutter) - @gutter) / @em;
@14cols: (14 * (@column + @gutter) - @gutter) / @em;
@15cols: (15 * (@column + @gutter) - @gutter) / @em;
@16cols: (16 * (@column + @gutter) - @gutter) / @em;


//
// Column-widths in a function, in ems
//

.width (@cols:1) {
    width: (@cols * (@column + @gutter) - @gutter) / @em;
}

要使用的话 需要引入 frameless.less, 这个直接做主文件，因为里面包含了reset css，当然你可以推翻重写，不过要记得保留上面的几段核心代码

<link rel="stylesheet/less" type="text/css" href="frameless.less">

修改一下配置。列宽，间距。

//
// Configuration
//

@font-size: 16;         // Your base font-size in pixels
@em: @font-size*1em;    // Shorthand for outputting ems, e.g. "12/@em"

@column: 48;    // The column-width of your grid in pixels
@gutter: 24;    // The gutter-width of your grid in pixels

然后你就可以通过less语法来使用 frameless提供的 列宽度变量 @1cols ~ @16cols 还有 .width 函数。

举个例子 比如你有个内容区域

<article class="main">something herer bala bala..</artcile>

你想让它横跨 8列

利用Frameless提供的参数和函数，你可以在less里用下面两种方式实现

.main {
    .width(8);
}

或者

.main {
     width: @8cols;
}

The end！

Ps: 这个网格系统很像 The Semantic GRID SYSTEM 。 它们为了避免引入无意义的网格相关标签（比如 row，colum，span4，。。。），所以引入 less，scss这些css 预处理器来提前计算网格的间距宽度。