一.sass的好处
用css画图也算是简单的实战吧,虽然用到的东西还比较少。。用过之后,发现sass主要有以下优势:
可维护性。最重要的一点,可维护性的很大一部分来自变量
嗯,最简单的例子,画图总要有前景色背景色填涂色等等一堆色值吧,用css也可以完成,但如果要修改某个填涂色可能需要先审查元素找到具体色值,再对源码Ctrl + H全文替换一遍才行。用sass的话就不用这么麻烦了,简单地改下变量的值,轻松搞定,没错,根本不用审查元素找色值那么麻烦,因为好的变量名肯定是自解释的
易用性。刚刚入门用起来都很顺手
兼容css语法,在此基础上提供扩展功能,用起来非常顺手。比如嵌套结构表示后代选择器,使用方便,容易理解,还能避免一些书写错误
灵活性。难以置信的灵活
@mixin提供了极大的灵活性,无参、多参、可选参、任意多参要比很多编程语言更加灵活,入口灵活不仅有利于代码复用,还让接口变得更加易用(不需要记一堆功能相似的函数名)
无意中发现了一个很灵活的用法,代码如下:
// 如果只想简单地支持1参数和4参数形式,可以这样实现 @mixin radius ($r1, $r2: $r1, $r3: $r1, $r4: $r1) { // 注意把默认值设置为了其它形参的值,这太灵活了 // 作为例子就不考虑兼容性了 border-radius: $r1 $r2 $r3 $r4; } // 如果想实现0冗余和支持1、2、3、4参数形式,可以这样实现 @mixin radius2 ($r...) { // 类似于c++的语法 $argNum: length($r); @if ($argNum == 1) { // 1参 border-radius: nth($r, 1); } @else if ($argNum == 2) { // 2参 border-radius: nth($r, 1) nth($r, 2); } @else if ($argNum == 3) { // 3参 border-radius: nth($r, 1) nth($r, 2) nth($r, 3); } @else { // 4参,再多就只取前4个 border-radius: nth($r, 1) nth($r, 2) nth($r, 3) nth($r, 4); } } // 测试 h1 { @include radius(1px); @include radius(1px, 2px, 3px, 4px); @include radius2(1px); @include radius2(1px, 2px); @include radius2(1px, 2px, 3px); @include radius2(1px, 2px, 3px, 4px); }
生成的css代码如下:
h1 { border-radius: 1px 1px 1px 1px; border-radius: 1px 2px 3px 4px; border-radius: 1px; border-radius: 1px 2px; border-radius: 1px 2px 3px; border-radius: 1px 2px 3px 4px; }
可复用性。画过蜗牛后,画青蛙什么的将会很快
画蜗牛只是一个很简单很独立的“项目”(额,麻雀虽小。。),所以创建了很多工具函数(@mixin),而大多数工具函数都是可以复用的,用来画青蛙、画麻雀。。当然,肯定不会局限于画画,别的地方也能用
比如,可以有一个自动添属性名前缀的@mixin:
// 带浏览器前缀的属性设置 @mixin attr ($name, $value) { #{$name}: $value; // 注意左边要添上#{},否则就是赋值了 /* Firefox */ -moz-#{$name}: $value; /* IE */ -ms-#{$name}: $value; /* Opera */ -o-#{$name}: $value; /* WebKit */ -webkit-#{$name}: $value; }
自解释性。或者说是语义上的好处
变量名、@mixin名、@function名都可以语义化,如果是css就不得不添加一堆注释去解释。自解释的东西,不仅对自己好,将来对别人也好
二.画图
小蜗原图:
很简单的小蜗牛,除了圈还是圈,以前用div角角的1px拼这个不现实,但有了border-radius后,曲线什么的,太容易了
1.分解线条
用css画图,第一步肯定是把图中的线条分解成div(div比span有更大的自由度,而且没有语义,正适合干这个),说白了就是写HTML
一般规则从上到下、从左向右分解,每条线对应一个div就好了,这样分解可以很大程度上避免出现margin-left: -30px;
之类的东西,让代码更具可读性
分解结果:
<!-- HTML结构 -->
<div class="wrapper">
<!-- 小蜗整体 -->
<div class="xiaowo">
<!-- 头部 -->
<div class="head">
<!-- 眼睛-->
<div class="eyes">
<!-- 左眼 -->
<div class="eye left">
<!--眼珠-->
<div class="black bleft"></div>
</div>
<!-- 短横线 -->
<div class="shortHLine">
</div>
<!-- 右眼 -->
<div class="eye right">
<div class="black bright"></div>
</div>
<!-- 短斜线 -->
<div class="shortSlash">
</div>
<!-- 嘴巴 -->
<div class="mouth">
</div>
</div>
</div>
<!-- 壳儿 -->
<div class="shell">
<!-- 内圈 -->
<div class="innerCircle">
<!-- 最内圈 -->
<div class="innerinnerCircle">
</div>
</div>
</div>
<!-- 右边身体 -->
<div class="rbody">
</div>
<!-- 底部身体 -->
<div class="bbody">
<!-- 左边短弧线 -->
<div class="shortArc">
</div>
<!-- 底部长弧线 -->
<div class="longArc">
</div>
</div>
</div>
</div>
P.S.具体怎么分解,并没有太大关系,一个线条对应一个div,肯定只多不少,不妨先这样做,到时候如果发现多余了再删掉就好
2.写sass
有了HTML结构就可以直接开始写样式了,规则是从外到内、从左向右一点一点写
很简单,只是需要些耐心,1个像素1个像素、一遍一遍地调试
成品sass代码如下:
/*!
* 小蜗 - sass
*/
// 变量
$fc: #2b2b2b;
$bc: #fafafa;
$bWidth: 7px;
$bStyle: solid;
$bColor: #2b2b2b;
// 此处透明色不考虑IE兼容,因为IE6下很难画出曲线边框,透明也没什么意义
$hidden: transparent;
$border: $bWidth $bStyle $bColor;
$_border: $bWidth $bStyle $hidden;
// 混合
// 0 ~ 无,1 ~ borderStyle,-1 ~ transparent
@mixin border($t, $r, $b, $l) {
@if ($t == 1) {
border-top: $border;
}
@else if ($t == -1) {
border-top: $_border;
}
@if ($r == 1) {
border-right: $border;
}
@else if ($r == -1) {
border-right: $_border;
}
@if ($b == 1) {
border-bottom: $border;
}
@else if ($b == -1) {
border-bottom: $_border;
}
@if ($l == 1) {
border-left: $border;
}
@else if ($l == -1) {
border-left: $_border;
}
}
// 简单起见,只支持1个参数或者4个参数形式
@mixin radius ($r...) {
@if (length($r) == 1) {
border-radius: nth($r, 1);
/* Firefox */
-moz-border-radius : nth($r, 1);
/* IE */
-ms-border-radius : nth($r, 1);
/* Opera */
-o-border-radius : nth($r, 1);
/* WebKit */
-webkit-border-radius : nth($r, 1);
}
@else {
$r1: nth($r, 1);
$r2: nth($r, 2);
$r3: nth($r, 3);
$r4: nth($r, 4);
border-radius: $r1 $r2 $r3 $r4;
/* Firefox */
-moz-border-radius : $r1 $r2 $r3 $r4;
/* IE */
-ms-border-radius : $r1 $r2 $r3 $r4;
/* Opera */
-o-border-radius : $r1 $r2 $r3 $r4;
/* WebKit */
-webkit-border-radius : $r1 $r2 $r3 $r4;
}
}
@mixin transform ($deg) {
transform: rotate($deg);
// IE 9
-ms-transform:rotate($deg);
// Firefox
-moz-transform:rotate($deg);
// Safari and Chrome
-webkit-transform:rotate($deg);
// Opera
-o-transform:rotate($deg);
}
// 盒子
.wrapper{
margin: 10px 0 0 30px;
}
// 小蜗
.xiaowo{
position: relative;
// 头部
.head {
position:relative;
z-index: 100;
margin-left: 200px;
width: 232px;
height: 125px;
background-color: $bc;
}
// 眼睛
.eyes{
position: relative;
}
.eye{
position: absolute;
width: 100px;
height: 105px;
@include radius(57px);
border: $border;
}
// 左眼
.left{
top: 10px;
left: -3px;
}
// 眼珠
.black{
position: absolute;
background-color: #000; // 炯炯有神的黑眼珠
width: 30px;
height: 32px;
@include radius(15px);
}
// 左眼珠 */
.bleft{
top: 25px;
left: 40px;
}
// 短横线
.shortHLine{
position: absolute;
top: 60px;
left: 110px;
width: 12px;
@include border(0, 0, 1, 0);
}
// 右眼
.right{
top: 7px;
right: 0;
}
// 右眼珠
.bright{
top: 25px;
left: 40px;
}
// 短斜线
.shortSlash{
position: absolute;
top: 125px;
left: 32px;
width: 30px;
height: 30px;
border-left: 7px solid #2b2b2b;
@include transform(20deg);
}
// 嘴巴
.mouth{
position: absolute;
top: 130px;
left: 92px;
width: 50px;
height: 24px;
@include border(0, 1, 1, 1);
@include radius(0, 0, 30px, 32px);
}
// 壳儿
.shell{
position: absolute;
top: 75px;
width: 300px;
height: 300px;
@include radius(157px);
@include border(1, -1, 1, 1);
}
// 内圈
.innerCircle{
position: absolute;
top: 55px;
left: 50px;
width: 230px;
height: 230px;
@include radius(122px);
@include border(1, 1, -1, 1);
}
// 最内圈
.innerinnerCircle{
position: absolute;
top: 55px;
left: 75px;
width: 80px;
height: 80px;
@include radius(47px);
border: $border;
}
// 右边身体
.rbody{
position: absolute;
top: 60px;
left: 0px;
width: 410px;
height: 345px;
@include border(-1, 1, -1, -1);
@include radius(0, 170px, 137px, 0);
}
// 底部身体
.bbody{
position: absolute;
top: 317px;
left: 0;
width: 300px;
height: 100px;
}
// 左边短弧线
.shortArc{
position: absolute;
top: 30px;
left: 27px;
width: 36px;
height: 36px;
@include border(1, -1, -1, 1);
@include radius(25px);
}
// 底部长弧线
.longArc{
position: absolute;
top: -248px;
left: -5px;
width: 415px;
height: 345px;
@include border(-1, 1, 1, -1);
@include radius(900px, 630px, 605px, 527px);
}
}
3.修缮
具体工作是:
去除多余线条
用类似于
border-bottom: 5px solid transparent;
的代码去掉多余线条,注意不能用border-bottom: 0;
来消除,因为底边宽度为0会影响其它边(border-radius是连边框宽度一起算的)拼接曲线
去掉多余线条后肯定会出现断开的线条,需要重新定位让曲线完美地接起来
微调
接好后再调调比例、宽高、弯曲程度什么的,就更完美了
三.运行结果
P.S.可能你也发现了,其实sass并不适合干这个,画图时的调试是直接针对css的,把sass扯进来反而更麻烦了。。这都没关系,拿到把新锤子总想用用,现在如愿了