Sass和AngularJS实现一个色板
发布在Daze的前端学习笔记2016年1月10日view:2277前端开发AngularjsAnitra
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。
<body ng-app="app" ng-controller="ColorListController">
    <ul ng-repeat="list in classNames" class="swatches {{list.color}}"></ul>
</body>

先上html结构,恩,看起来有些奇怪,为什么这样写呢,因为我比较懒,要实现色板,html结构里面会有太多重复的内容,所以就让js帮忙生成吧

@charset "utf-8";
body {
  font-family: verdana;
  font-size: 8px;
  background-color: #000;
}

/*先调整色相角度,再增加颜色亮度,最后增加饱和度*/
$redBase:#dc143c!default;
$orangeBase:saturate(lighten(adjust_hue($redBase,39),5),7);
$yellowBase: saturate(lighten(adjust_hue($redBase, 64), 6), 13);
$greenBase: desaturate(darken(adjust_hue($redBase, 102), 2), 11);
$blueBase: saturate(darken(adjust_hue($redBase, 201), 2), 1);
$purpleBase: saturate(darken(adjust_hue($redBase, 296), 2), 1);
$blackBase: #777;
$bgc: #fff;
//让颜色变暗
@mixin swatchesDarken($color){
  @for $i from 1 to 10{
    $x:$i+11;
    li:nth-child(#{$x}){
      $n:$i*5;
      $bgc:darken($color,$n);
      background-color: $bgc;
      &:hover:before{
        content: "#{$bgc}";
        color: lighten($bgc,40);
        font-family: verdana;
        font-size: 8px;
        padding: 2px;
      }
    }
  }
}

 @mixin swatchesLighten($color){
  @for $i from 1 to 10{
    $x:11-$i;
    li:nth-child(#{$x}){
      $n:$i*5;
      $bgc:lighten($color,$n);
      background-color: $bgc;
      &:hover:before{
        content: "#{$bgc}";
        color: lighten($bgc,40);
        font-family: verdana;
        font-size: 8px;
        padding: 2px;
      }
    }
  }
}

.swatches li {
  width: 4.7619047619%;
  float: left;
  height: 60px;
  list-style: none outside none;
  cursor: pointer;
}

$colorMap:(
  red:$redBase,
  orange:$orangeBase,
  yellow:$yellowBase,
  green:$greenBase,
  blue:$blueBase,
  purple:$purpleBase,
  black:$blackBase
);

$colorList:map_keys($colorMap);
$colorListValue:map_values($colorMap);

@for $i from 1 through length($colorList){
  ul.#{nth($colorList,$i)}{
    @include swatchesLighten(nth($colorListValue,$i));
    @include swatchesDarken(nth($colorListValue,$i));
    li:nth-child(11){
      background-color: nth($colorListValue,$i);
    }
  }
}

这就是样式,这部分是fork的别人的只修改了最后生成每种颜色生成的sass逻辑,原来应该是一个一个生成的,上面这里用了一个map来生成,至于为什么要这么做,大概是因为我比较懒=。=

window.onload=(function(){
for(var i=0;i<21;i++){
    $('.swatches').append('<li></li>');
}
});

var myModule=angular.module('app',[]);

myModule.controller('ColorListController',['$scope',
function($scope){
    $scope.classNames=[{
        color:"red"
    },{
        color:"orange"
    },{
        color:"yellow"
    },{
        color:"green"
    },{
        color:"blue"
    },{
        color:"purple"
    },{
        color:"black"
    }];
}
]);

这边就是js部分了,没什么特别的,先自动生成每个ul的li,之后就只创建了一个数组,之后现在回头看html部分,就一目了然了。 贴上原Sass教程链接w3cplus颜色函数 本文demo链接Scss色板@Daze

评论
发表评论
2年前

测试markdown语法

2年前

测试markdown语法

2年前

对对对

WRITTEN BY
发发呆哟
前端路上挣扎
TA的新浪微博
PUBLISHED IN
Daze的前端学习笔记

记录工作学习中遇到的各种小坑,不喜勿喷,有错欢迎指出

我的收藏