sass实现七色卡

最新推荐文章于 2022-03-31 23:02:03 发布

远走的兔子

最新推荐文章于 2022-03-31 23:02:03 发布

阅读量896

点赞数 1

分类专栏： Web 文章标签： sass 七色卡教程

本文链接：https://blog.csdn.net/u014182411/article/details/77372676

版权

Web 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

一环境说明

电脑系统：windows 7

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

http://blog.csdn.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);
  }
}