Dcss是一个通过js设置和修改css文件的css内容的库，和LESS，SASS的区别在于Dcss是可以通过js设定变量值，不依赖于服务或工具，不过目前还没有开发LESS和SASS的Mixin这种功能。
Deno
来看一个 呆猫，看下Dcss的适用场景。 我们用css3做一个盒子
- 前
- 后
- 右
- 左
- 上
- 下
html代码如下：
<div class="cube-box">
<ul id="cube" class="cube">
<li class="face front">前</li>
<li class="face back">后</li>
<li class="face right">右</li>
<li class="face left">左</li>
<li class="face top">上</li>
<li class="face bottom">下</li>
</ul>
</div>
css代码如下：
/*width：500px，height：300px，depth：400px*/
.cube-box{
position: relative;
width: 500px;
height: 300px;
-webkit-perspective: 2000px;
-moz-perspective: 2000px;
-o-perspective: 2000px;
perspective: 2000px;
}
.cube{
width: 100%;
height: 100%;
position: absolute;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(-200px);
-moz-transform: translateZ(-200px);
-o-transform: translateZ(-200px);
transform: translateZ(-200px);
}
.cube-box .cube{
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
}
.cube .face{
display: block;
position: absolute;
border: 1px solid #aaa;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-box-shadow:0px 0px 20px rgba( 0, 0, 0, 0.6 );
-moz-box-shadow:0px 0px 20px rgba( 0, 0, 0, 0.6 );
box-shadow:0px 0px 20px rgba( 0, 0, 0, 0.6 );
}
.cube .front { background-color: rgba( 130, 179, 25, 0.2); }
.cube .back { background-color: rgba( 130, 179, 25, 0.2); }
.cube .right { background-color: rgba( 130, 179, 25, 0.2); }
.cube .left { background-color: rgba( 130, 179, 25, 0.2); }
.cube .top { background-color: rgba( 130, 179, 25, 0.2); }
.cube .bottom { background-color: rgba( 130, 179, 25, 0.2); }
.cube .front{
left:0;
top:0;
width: @width;
height: @height;
-webkit-transform: rotateX(0deg) translateZ(@half-depth);
-moz-transform: rotateX(0deg) translateZ(@half-depth);
-o-transform: rotateX(0deg) translateZ(@half-depth);
transform: rotateX(0deg) translateZ(@half-depth);
}
.cube .back{
left:0;
top:0;
width: @width;
height: @height;
-webkit-transform: rotateX(180deg) translateZ(@half-depth);
-moz-transform: rotateX(180deg) translateZ(@half-depth);
-o-transform: rotateX(180deg) translateZ(@half-depth);
transform: rotateX(180deg) translateZ(@half-depth);
}
.cube .right{
left: @face-left;
top: 0;
width: @depth;
height: @height;
-webkit-transform: rotateY(90deg) translateZ(@half-width);
-moz-transform: rotateY(90deg) translateZ(@half-width);
-o-transform: rotateY(90deg) translateZ(@half-width);
transform: rotateY(90deg) translateZ(@half-width);
}
.cube .left{
left: @face-left;
top: 0;
width: @depth;
height: @height;
-webkit-transform: rotateY(-90deg) translateZ(@half-width);
-moz-transform: rotateY(-90deg) translateZ(@half-width);
-o-transform: rotateY(-90deg) translateZ(@half-width);
transform: rotateY(-90deg) translateZ(@half-width);
}
.cube .top{
left: 0;
top: @face-top;
width: @width;
height: @depth;
-webkit-transform: rotateX(90deg) translateZ(@half-height);
-moz-transform: rotateX(90deg) translateZ(@half-height);
-o-transform: rotateX(90deg) translateZ(@half-height);
transform: rotateX(90deg) translateZ(@half-height);
}
.cube .bottom{
left: 0;
top: @face-top;
width: @width;
height: @depth;
-webkit-transform: rotateX(-90deg) translateZ(@half-height);
-moz-transform: rotateX(-90deg) translateZ(@half-height);
-o-transform: rotateX(-90deg) translateZ(@half-height);
transform: rotateX(-90deg) translateZ(@half-height);
}
css3的代码就是烦，想兼容性好点得加各种前缀，也可以看出css3各种变换是局部坐标系下的变换，X，Y，Z轴方向都随着变换而改变。
我们想要显示盒子的每一个面，再加点css代码
.show-front{
-webkit-transform: translateZ(-200px) rotateX(0deg);
-moz-transform: translateZ(-200px) rotateX(0deg);
-o-transform: translateZ(-200px) rotateX(0deg);
transform: translateZ(-200px) rotateX(0deg);
}
.show-back{
-webkit-transform: translateZ(-200px) rotateX(-180deg);
-moz-transform: translateZ(-200px) rotateX(-180deg);
-o-transform: translateZ(-200px) rotateX(-180deg);
transform: translateZ(-200px) rotateX(-180deg);
}
.show-right{
-webkit-transform: translateZ(-250px) rotateY(-90deg);
-moz-transform: translateZ(-250px) rotateY(-90deg);
-o-transform: translateZ(-250px) rotateY(-90deg);
transform: translateZ(-250px) rotateY(-90deg);
}
.show-left{
-webkit-transform: translateZ(-250px) rotateY(90deg);
-moz-transform: translateZ(-250px) rotateY(90deg);
-o-transform: translateZ(-250px) rotateY(90deg);
transform: translateZ(-250px) rotateY(90deg);
}
.show-top{
-webkit-transform: translateZ(-150px) rotateX(-90deg);
-moz-transform: translateZ(-150px) rotateX(-90deg);
-o-transform: translateZ(-150px) rotateX(-90deg);
transform: translateZ(-150px) rotateX(-90deg);
}
.show-bottom{
-webkit-transform: translateZ(-150px) rotateX(90deg);
-moz-transform: translateZ(-150px) rotateX(90deg);
-o-transform: translateZ(-150px) rotateX(90deg);
transform: translateZ(-150px) rotateX(90deg);
}
现在只需要添加6个按钮，每次点击的时候给id="cube"的元素添加对应的class，比如右边就添加show-right， 一个盒子完成了，那如果我们想要把这些代码封装成一个类，可以通过js动态生成，动态设置长宽高，怎么办呢？ Dcss就是决绝这个问题的。 来看下Dcss是怎么工作的。
首先建一个后缀为dccs的文件，盒子对应的css代码如下：
define{
@width :[width];
@height :[height];
@depth :[depth];
@half-width :@width/2;
@half-height :@height/2;
@half-depth :@depth/2;
@all-width :@width + @height + @half-depth + @half-depth;
}
.cube-box{
position: relative;
width: @width;
height: @height;
-webkit-perspective: 1600px;
-moz-perspective: 1600px;
-o-perspective: 1600px;
perspective: 1600px;
}
.cube{
width: 100%;
height: 100%;
position: absolute;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(-@half-depth);
-moz-transform: translateZ(-@half-depth);
-o-transform: translateZ(-@half-depth);
transform: translateZ(-@half-depth);
}
.cube-box .cube{
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
}
.cube .face{
position: absolute;
display: block;
border: 1px solid #666;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.cube .front { background-color: rgba(255, 255, 255, 0.9); }
.cube .back { background-color: rgba(255, 255, 255, 0.9); }
.cube .right { background-color: rgba(255, 255, 255, 0.9); }
.cube .left { background-color: rgba(255, 255, 255, 0.9); }
.cube .top { background-color: rgba(255, 255, 255, 0.9); }
.cube .bottom { background-color: rgba(255, 255, 255, 0.9); }
.cube .front{
left:0;
top:0;
width: @width;
height: @height;
-webkit-transform: rotateX(0deg) translateZ(@half-depth);
-moz-transform: rotateX(0deg) translateZ(@half-depth);
-o-transform: rotateX(0deg) translateZ(@half-depth);
transform: rotateX(0deg) translateZ(@half-depth);
}
.cube .back{
left:0;
top:0;
width: @width;
height: @height;
-webkit-transform: rotateX(180deg) translateZ(@half-depth);
-moz-transform: rotateX(180deg) translateZ(@half-depth);
-o-transform: rotateX(180deg) translateZ(@half-depth);
transform: rotateX(180deg) translateZ(@half-depth);
}
.cube .left{
left: @face-left;
top: 0;
width: @depth;
height: @height;
-webkit-transform: rotateY(-90deg) translateZ(@half-width);
-moz-transform: rotateY(-90deg) translateZ(@half-width);
-o-transform: rotateY(-90deg) translateZ(@half-width);
transform: rotateY(-90deg) translateZ(@half-width);
}
.cube .right{
left: @face-left;
top: 0;
width: @depth;
height: @height;
-webkit-transform: rotateY(90deg) translateZ(@half-width);
-moz-transform: rotateY(90deg) translateZ(@half-width);
-o-transform: rotateY(90deg) translateZ(@half-width);
transform: rotateY(90deg) translateZ(@half-width);
}
.cube .top{
left: 0;
top: @face-top;
width: @width;
height: @depth;
-webkit-transform: rotateX(90deg) translateZ(@half-height);
-moz-transform: rotateX(90deg) translateZ(@half-height);
-o-transform: rotateX(90deg) translateZ(@half-height);
transform: rotateX(90deg) translateZ(@half-height);
}
.cube .bottom{
left: 0;
top: @face-top;
width: @width;
height: @depth;
-webkit-transform: rotateX(-90deg) translateZ(@half-height);
-moz-transform: rotateX(-90deg) translateZ(@half-height);
-o-transform: rotateX(-90deg) translateZ(@half-height);
transform: rotateX(-90deg) translateZ(@half-height);
}
.show-front{
-webkit-transform: translateZ(-@half-depth) rotateX(0deg);
-moz-transform: translateZ(-@half-depth) rotateX(0deg);
-o-transform: translateZ(-@half-depth) rotateX(0deg);
transform: translateZ(-@half-depth) rotateX(0deg);
}
.show-back{
-webkit-transform: translateZ(-@half-depth) rotateX(-180deg);
-moz-transform: translateZ(-@half-depth) rotateX(-180deg);
-o-transform: translateZ(-@half-depth) rotateX(-180deg);
transform: translateZ(-@half-depth) rotateX(-180deg);
}
.show-right{
-webkit-transform: translateZ(-@half-width) rotateY(-90deg);
-moz-transform: translateZ(-@half-width) rotateY(-90deg);
-o-transform: translateZ(-@half-width) rotateY(-90deg);
transform: translateZ(-@half-width) rotateY(-90deg);
}
.show-left{
-webkit-transform: translateZ(-@half-width) rotateY(90deg);
-moz-transform: translateZ(-@half-width) rotateY(90deg);
-o-transform: translateZ(-@half-width) rotateY(90deg);
transform: translateZ(-@half-width) rotateY(90deg);
}
.show-top{
-webkit-transform: translateZ(-@half-height) rotateX(-90deg);
-moz-transform: translateZ(-@half-height) rotateX(-90deg);
-o-transform: translateZ(-@half-height) rotateX(-90deg);
transform: translateZ(-@half-height) rotateX(-90deg);
}
.show-bottom{
-webkit-transform: translateZ(-@half-height) rotateX(90deg);
-moz-transform: translateZ(-@half-height) rotateX(90deg);
-o-transform: translateZ(-@half-height) rotateX(90deg);
transform: translateZ(-@half-height) rotateX(90deg);
}
看到这儿，会觉得和LESS或SASS一样，定义些变量，解析的时候将变量替换成值，生成css。dcss的重点是可以通过css进行设置和更新。再看下js代码。
//第一次加载
var dcss = Dcss.load({
width: '500px',
height: '300px',
depth: '400px'
}, '/js/project/dcss/box.dcss');
$('#set-width').click(function(){
//更新
dcss.update({
width: '400px'
});
});
ok,介绍完了，就这么简单。
API:
var dcss = Dcss.load(style, path);
dcss.update(style);
var dcss = Dcss.load({
width: '500px',
height: '300px',
depth: '400px'
}, '/js/project/dcss/box.dcss');
dcss.update({
width: '400px'
});