sass实战演练05 - 把布局拆分为12列(1):函数、字符串拼接、集合函数append

学习笔记666

于 2016-09-10 15:41:48 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： nodejs+gulp+webpack+sass基础篇文章标签：布局 append 函数

本文链接：https://blog.youkuaiyun.com/github_26672553/article/details/52495264

nodejs+gulp+webpack+sass基础篇专栏收录该内容

33 篇文章

订阅专栏

本文介绍如何使用SASS的循环功能来为响应式布局中的col-xs-*类生成统一的样式定义，包括具体的实现步骤及语法示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前面我们实现了，当我们拉动屏幕改变宽度时，container的width属性会跟着一起变化。
基于这个思路我们就可以扩展了，比如把屏幕分成12列。

1.我们在global.scss文件里写一个函数，目的是用来循环输出col-xs-*

// 屏幕从1-12通用样式定义
@function getxs(){
  $res:"";
  @for $i from 1 through 12{
    $res:".col-xs-#{$i},#{$res}";
  }
  @return $res;
}

#{getxs()}{
  min-height: 1px;
  padding:0 15px;
}

2.执行gulp编译，看看最后的效果是不是你想象的那样

.col-xs-12, .col-xs-11, .col-xs-10, .col-xs-9, .col-xs-8, .col-xs-7, .col-xs-6, .col-xs-5, .col-xs-4, .col-xs-3, .col-xs-2, .col-xs-1 {
  min-height: 1px;
  padding: 0 15px; }

3.sass语法学习——字符串的拼接
上面我们学习了这种拼接方式：

 $res:".col-xs-#{$i},#{$res}";

再来看看另外的字符串拼接方式：

$res:".col-xs-" + $i + $res;

推荐的方式（集合的方式）：

$res:();  //定义集合
  @for $i from 1 through 12{
    $res:append($res,".col-xs-#{$i}",comma);
  }

第3个参数只能是space（空格）、comma（逗号）和auto