您当前的位置:首页 > 计算机 > 编程开发 > Html+Div+Css(前端)

CSS:用SASS(SCSS)实现栅格系统

时间:11-27来源:作者:点击数:

背景

CSS:用Less实现栅格系统中我介绍了如何用LESS实现栅格系统,为啥还要再用SASS做一遍呢?Bootstrap+JQuery+Less做前端(以读取为目的),ExtJs+Sass做后台(以写为目的),学会了Sass让我可以自定义ExtJs的主题。

收集的资料

按照官网的教程尝试一遍就OK了。

注意事项

  • Ruby对中文目录的支持不好,项目不要放到中文目录下。
  • 重点学校Sass的这个几个概念:变量、嵌条、惨入和流程控制。

栅格实战

$span_length: 12;



/*固定栅格系统*/

/*栅格的左边距*/
$span_margin: 20px;
/*栅格的的宽度*/
$span_width: 60px;
/*栅格数量*/

.row
{
    margin-left: -$span_margin;/*抵消第一个栅格的左边距*/
    min-height:1px;
}

.row [class*="span"]
{
    float: left;
    min-height:1px;
    margin-left: $span_margin;
}

@mixin span ($length)
{
    @for $index from 1 through $length
    {
        .row .span#{$index}
        {
            width: $index * $span_width + ($index - 1) * $span_margin;
        }
    }
}

@mixin offset ($length)
{
    @for $index from 1 through $length
    {
        .row .offset#{$index}
        {
            margin-left: $index * $span_width + ($index + 1) * $span_margin;
        }
    }
}

@include span($span_length);
@include offset($span_length);



/*自动栅格系统*/

/*栅格的宽度和左边距之比*/
$span_width_margin_scale: 3;
/*栅格的左边距比例*/
$span_margin_percentage: (1 / ($span_length * ($span_width_margin_scale + 1) - 1));

.row-fluid
{
    width: 100%;
    min-height:1px;
}

.row-fluid [class*="span"]:first-child
{
    margin-left: 0;
}

.row-fluid [class*="span"]
{
    float: left;
    min-height: 1px;
    margin-left: percentage($span_margin_percentage);
}

@mixin fluid_span ($length)
{
    @for $index from 1 through $length
    {
        .row-fluid .span#{$index}
        {
            width: percentage(($index * ($span_width_margin_scale + 1) - 1) * $span_margin_percentage);
        }
    }
}

@mixin fluid_offset ($length)
{
    @for $index from 1 through $length
    {
        .row-fluid .offset#{$index}
        {
            margin-left: percentage(($index * ($span_width_margin_scale + 1) + 1) * $span_margin_percentage);
        }
    }
}


@include fluid_span($span_length);
@include fluid_offset($span_length);

运行效果

备注

真是仰慕这些工具的作者!

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门