Frameless这个响应式CSS框架怎么使用

Question

关注Frameless这个框架有一段时间了，一直想试试。但文档看得不是很明白，不知该如何下手
http://framelessgrid.com/
求各位大神人能不能简单讲解一下用法，跟那个Less Framework似乎差别很大
那个scss和less文件我基本能看懂，就是不知道该怎么使用

Answer 1

没使用过.. 不够简单看了下.. 我觉得你的问题应该是 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 预处理器来提前计算网格的间距宽度。