sass实战演练04 - 响应式处理(2):最外层container的响应式宽度写法

Sass中的集合变量
前面我们学过了定义变量（字符串形式），实际上Sass还支持集合（类数组形式）
$screen:($xs,$sm,$md,$lg); 其中内置函数length($screen)可以获取这个集合的长度

List对应函数
length($list) 返回一个列表的长度值 nth($list,$n) 返回一个列表中指定的某个标签值（索引是从1开始的） join($list1,$list2,[$separator]) 将2个list给连接在一起，变成一个列表
append($list1,$val,[$separator]) 将某个值放在列表的最后 zip($list,,,) 将多个list结合成一个多维的list
index($list,$value) 返回一个值在list中的位置

循环语法
1. @for $xx from start to end 2. @for$xx from sart through end
关键字through表示包括end这个数，而to则不包括end这个数

主要代码
1.定义不同的屏幕宽度变量

$xs-width:480px;
$sm-width:750px;
$md-width:992px;
$lg-width:1200px;

$screen-width:($xs-width,$sm-width,$md-width,$lg-width);

$xs:'screen and (min-width:#{$xs-width})';   //手机屏幕
$sm:'screen and (min-width:#{$sm-width})';   //pad屏幕
$md:'screen and (min-width:#{$md-width})';   //中等屏幕
$lg:'screen and (min-width:#{$lg-width})'; //大屏幕

$screen:($xs,$sm,$md,$lg);  //屏幕的宽度,是一个集合

2.设置container的样式，需要遍历定义的各种宽度来设置@media响应式处理

@for $i from 1 through length($screen){
  @media #{nth($screen,$i)} {
    .container{
      width: nth($screen-width,$i);
    }
  }
}

3.最后编译的代码如下：

.container {
  padding-left: 15px;
  padding-right: 15px;
  margin: 0 auto; }

@media screen and (min-width: 480px) {
  .container {
    width: 480px; } }

@media screen and (min-width: 750px) {
  .container {
    width: 750px; } }

@media screen and (min-width: 992px) {
  .container {
    width: 992px; } }

@media screen and (min-width: 1200px) {
  .container {
    width: 1200px; } }

这样就做到了，根据屏幕宽度的不同，container的宽度也不同了。

完整代码
1.vars.scss里定义常用的变量和集合

$xs-width:480px;
$sm-width:750px;
$md-width:992px;
$lg-width:1200px;

$screen-width:($xs-width,$sm-width,$md-width,$lg-width);

$xs:'screen and (min-width:#{$xs-width})';   //手机屏幕
$sm:'screen and (min-width:#{$sm-width})';   //pad屏幕
$md:'screen and (min-width:#{$md-width})';   //中等屏幕
$lg:'screen and (min-width:#{$lg-width})'; //大屏幕

$screen:($xs,$sm,$md,$lg);  //屏幕的宽度,是一个集合


$blue-font:#1b85ff;

$gray-border:solid 1px gray;

/*字体大小和文字颜色*/
$title-font-size:48px;
$title-font-color:#666;

2.一些公用的样式写到global.scss里面

*{
  margin: 0;
  padding: 0;
  font-size: 14px
};

.container{
  padding-left: 15px;
  padding-right: 15px;
  margin: 0 auto;
}

3.mixin.scss里放置一些相当于函数的代码段

@mixin align($align)
{
  text-align: $align;
}


@mixin media-xs(){
  $title-font-color:red;
  $title-font-size:36px;  //重新设置了变量的值,这个值修改不能写到@media里面
  @media #{$xs} {
    h1:first-child{ //大标题
      color: $title-font-color;
      font-size: $title-font-size;
    };
  }
}

@mixin container{
  @for $i from 1 through length($screen){
    @media #{nth($screen,$i)} {
      .container{
        width: nth($screen-width,$i);
      }
    }
  }
}

4.index.scss文件里引入其他文件，完成我们的首页样式

@import "./common/global";
@import "./common/vars";
@import "./common/mixin";

@include container;

.container{
  div{
    @include align(center);
    h1{
      font-size: $title-font-size * 0.5;
      color: lighten($title-font-color,20%);
    };
    h1:first-child{ //大标题
      color: $title-font-color;
      font-size: $title-font-size;
    };
    @include  media-xs;
  }

  .searchdiv{
    input{
      height: 40px;width: 60%;border: solid 1px gray;
    }
    button{height: 40px;width: 60px;border: solid 1px gray;}
  }
}

5.首页样式我们需要gulp来编译打包，gulpfile.js如下：

var gp = require('gulp');
var sass = require("gulp-sass");
gp.task("css",function(){
   gp.src("./mycss/index.scss").pipe(sass()).pipe(gp.dest("./mycss/"))
})

执行这个任务就把index.scss编译成了index.css

$ gulp css

5.最后index.css如下，html模板引入它

@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  font-size: 14px; }

.container {
  padding-left: 15px;
  padding-right: 15px;
  margin: 0 auto; }

/*字体大小和文字颜色*/
@media screen and (min-width: 480px) {
  .container {
    width: 480px; } }

@media screen and (min-width: 750px) {
  .container {
    width: 750px; } }

@media screen and (min-width: 992px) {
  .container {
    width: 992px; } }

@media screen and (min-width: 1200px) {
  .container {
    width: 1200px; } }

.container div {
  text-align: center; }
  .container div h1 {
    font-size: 24px;
    color: #999999; }
  .container div h1:first-child {
    color: #666;
    font-size: 48px; }
  @media screen and (min-width: 480px) {
    .container div h1:first-child {
      color: red;
      font-size: 36px; } }

.container .searchdiv input {
  height: 40px;
  width: 60%;
  border: solid 1px gray; }

.container .searchdiv button {
  height: 40px;
  width: 60px;
  border: solid 1px gray; }