sass实现七色卡

一 环境说明

电脑系统：windows 7

配置：安装sass 具体可以参见我的上一篇博客

http://blog.****.net/u014182411/article/details/77319639

编辑器：webstorm 2016.3 (webstorm可以自动编译sass文件为css文件，具体可以参见：http://www.jianshu.com/p/0fe52f149cab)

二、sass教程

       sass其实是一种css预处理语言，sass相当于在css的基础上加入了编程思想，在sass中可以使用函数，数组，可以使得css的编程面对对象。编写sass之后，利用预处理器可以将sass编译为对应的css文件 ,最后我们在html中引入的还是css文件。sass其实就是辅助我们更轻松的写出css。利用sass可以使得本来需要书写上百行的css，利用几行sass代码就可以编译出。

      我学习sass是看的慕课网上的教程：

      基础篇：http://www.imooc.com/learn/311

      进阶篇：http://www.imooc.com/learn/436

      讲诉的很详细。如果有css的基础和会基本的编程思想，集中学习时间在2到3个小时左右。

      其他资源：

      sass中文官网教程：http://www.sasschina.com/guide/

      阮一峰博客：http://www.ruanyifeng.com/blog/2012/06/sass.html

三、sass实现七色卡

      仿照慕课网进阶学习中的第4章，写了一个七色卡。

      效果图如下（实现了响应式布局）：

具体代码如下：

index.scss:(这里采用的sass的书写方式决定了后缀名称是.scss,具体的解释教程上有说明)

$unit-height: 3rem;
$unit-width: 2.5rem;

$colors:(
        red:#dc143c,
        orange: saturate(lighten(adjust_hue(red, 39), 5), 7),//#f37a16
        yellow: saturate(lighten(adjust_hue(red, 64), 6), 13),//#fbdc14
        green: desaturate(darken(adjust_hue(red, 102), 2), 11),//#73c620
        blue: saturate(darken(adjust_hue(red, 201), 2), 1),//#12b7d4
        purple: saturate(darken(adjust_hue(red, 296), 2), 1),//#a012d4
        black:#777,
        bgc: #fff
);

html, body {
  height: 100%;
  width: 100%;
  font-size: 1.5vw;
}

body, ul, li {
  margin: 0;
  padding: 0
}

main {
  /*  width: 21*$unit-width;*/
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  /*transform: translateY(-3*$unit-height);*/
}

.seven-card {
  width: 21*$unit-width;
}

ul {
  list-style: none;
}

.line {
  display: flex;
  flex-direction: row;
}

li {
  height: $unit-height;
  width: $unit-width;
  display: inline-flex;
}

//declare macro of darken color
@mixin darkenColor($color) {
  @for $i from 1 through 10 {
    $x: $i+11;
    li:nth-child(#{$x}) {
      $n: $i*5;
      $bgcolor: darken($color, $n);
      background-color: $bgcolor;
      &:hover:before { //present the number of color when it's in hover
        content: "#{$bgcolor}";
        color: lighten($bgcolor, 40);
        font-family: Verdana;
        font-size: 8px;
        padding: 2px;
      }
    }
  }
}

//declare macro of lighten color
@mixin lightenColor($color) {
  @for $i from 1 through 10 {
    li:nth-child(#{$i}) {
      $x: 11-$i;
      $n: $x*5;
      $bgcolor: lighten($color, $n);
      background-color: $bgcolor;
      &:hover:before {
        content: "#{$bgcolor}";
        color: darken($bgcolor, 40);
        font-family: Verdana;
        font-size: .5rem;
        padding: .1rem;

      }
    }
  }
}

@each $colorName, $color in $colors {
  .#{$colorName} {
    li:nth-child(11) {
      background-color: $color;
    }
    @include lightenColor($color);
    @include darkenColor($color);
  }
}

代码说明：

      布局采用的flexbox布局。

     七色卡 每个基准颜色有21个变色。每一排以第11个格子为基准颜色，11个格子之后的格子在基准色的基础上变得色度越来越暗。利用darken函数。第11个格子之前的格子，在第11个格子的基础上是变亮的，但是色度亮的程度是从左到右越来越弱。

四、完整代码github地址

      完整代码在我的github上可以下载。地址如下：

      https://github.com/yuanzoudetuzi/seven-color-card/tree/master/seven-color-card