用sass画蜗牛

一.sass的好处

用css画图也算是简单的实战吧，虽然用到的东西还比较少。。用过之后，发现sass主要有以下优势：

  1. 可维护性。最重要的一点，可维护性的很大一部分来自变量

    嗯，最简单的例子，画图总要有前景色背景色填涂色等等一堆色值吧，用css也可以完成，但如果要修改某个填涂色可能需要先审查元素找到具体色值，再对源码Ctrl + H全文替换一遍才行。用sass的话就不用这么麻烦了，简单地改下变量的值，轻松搞定，没错，根本不用审查元素找色值那么麻烦，因为好的变量名肯定是自解释的

  2. 易用性。刚刚入门用起来都很顺手

    兼容css语法，在此基础上提供扩展功能，用起来非常顺手。比如嵌套结构表示后代选择器，使用方便，容易理解，还能避免一些书写错误

  3. 灵活性。难以置信的灵活

    @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;
}
  4. 可复用性。画过蜗牛后，画青蛙什么的将会很快

    画蜗牛只是一个很简单很独立的“项目”（额，麻雀虽小。。），所以创建了很多工具函数（@mixin），而大多数工具函数都是可以复用的，用来画青蛙、画麻雀。。当然，肯定不会局限于画画，别的地方也能用

    比如，可以有一个自动添属性名前缀的@mixin：

    // 带浏览器前缀的属性设置
@mixin attr ($name, $value) {
  #{$name}: $value; // 注意左边要添上#{}，否则就是赋值了
  /* Firefox */
  -moz-#{$name}: $value;
  /* IE */
  -ms-#{$name}: $value;
  /* Opera */
  -o-#{$name}: $value;
  /* WebKit */
  -webkit-#{$name}: $value;
}
  5. 自解释性。或者说是语义上的好处

    变量名、@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.修缮

具体工作是：

  1. 去除多余线条

    用类似于border-bottom: 5px solid transparent;的代码去掉多余线条，注意不能用border-bottom: 0;来消除，因为底边宽度为0会影响其它边（border-radius是连边框宽度一起算的）

  2. 拼接曲线

    去掉多余线条后肯定会出现断开的线条，需要重新定位让曲线完美地接起来

  3. 微调

    接好后再调调比例、宽高、弯曲程度什么的，就更完美了

三.运行结果

P.S.可能你也发现了，其实sass并不适合干这个，画图时的调试是直接针对css的，把sass扯进来反而更麻烦了。。这都没关系，拿到把新锤子总想用用，现在如愿了

参考资料

时间： 2024-10-09 02:32:49

用sass画蜗牛的相关文章

Sass mixin 使用css border属性画三角形

To be finished. //triangle@mixin css-triangle ($direction: "down", $size: 20px, $color: #000, $fillColor:#fff) {    width: 0;     height: 0;    position: relative;    z-index: 0;    border-left: #{setTriangleSize($direction, "left", $s

蜗牛学院——web前端开发

------------恢复内容开始------------ 一.第一阶段 专业核心基础 1.第一周 HTML和CSS入门 知识要点: web前端开发环境.HTML常用标签.表单元素.table布局.CSS样式表.DIV+CSS布局 课程目标: 熟练运用HTML和CSS样式属性完成页面的布局和美化,能够仿制任意网站的前端页面实现 2.第二周 CSS3和移动端 知识要点: CSS3选择器.伪类.过渡.变换.动画.字体图标.弹性盒模型.响应式布局.移动端 课程目标 熟练运用CSS3来开发网页.熟练开

gulp教程（sass，livereload，md5，css压缩，js压缩，img的base64）

环境 node -v  v6.10.3 npm -v  3.10.10 package.json如下: { "name": "zhcsdata", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": &

LSEE和SASS的区别

/Less中的注释,但这种不会被编译/* * 这也是Less中的注释,但是会被编译 *  * [Less中的变量] *  * 1.声明变量:@变量名:变量值: *   使用变量:@变量名 *  *  >>>Less中变量的类型: *  ①数字类         ①10px   ②字符串:无引号字符串 red        有引号字符串   "haha" *  ②颜色类red  #000000   rgb()    ③值列表类型:用逗号或空格分割     10px so

sass语法基础知识

文件后缀名 sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号:另一种就是我们这里使用的scss文件,这种和我们平时写的css文件格式差不多,使用大括号和分号.而本教程中所说的所有sass文件都指后缀名为scss的文件.在此也建议使用后缀名为scss的文件,以避免sass后缀名的严格格式要求报错. //文件后缀名为sass的语法 body background: #eee font-size:12px p background: #0982c1 //文件后缀名为scss的语法 b

Kinect2入门+opencv画骨架+骨架数据

////////////////////////////准备工作/////////////////////////////// 首先需要下载安装Kinect2的SDK,下载地址如下: https://www.microsoft.com/en-us/download/details.aspx?id=44561 建议安装时从官网下载,之前有出现过拷贝的文件无法正常安装的情况. //注意V2.0以下版本为一代Kinect所用,一代Kinect推荐V1.8 相对于一代的Kinect,二代由于SDK只出过

sass学习笔记（五）：sass的运算

(一).加法 加法运算是 Sass 中运算中的一种,在变量或属性中都可以做加法运算.如: .box {   width: 20px + 8in; } 编译出来的 CSS: .box {   width: 788px; } 但对于携带不同类型的单位时,在 Sass 中计算会报错,如下例所示: .box {   width: 20px + 1em; } 编译的时候,编译器会报错:"Incompatible units: 'em' and 'px'." (二).减法 Sass 的减法运算和加

10天精通Sass 之 处理字符串与数字的函数

Sass的函数简介 Sass中自备了一系列的功能函数,包括: - 字符串函数 - 数字函数 - 列表函数 - 颜色函数 - Introspection函数 - 三元函数 除了Sass中已提供的函数,我们还可以根据自己的需求定义函数,称为自定义函数. 字符串函数 * unquote($string) * :删除字符串中的引号 * quote($string) * :给字符串加引号 unquote()函数 用来删除字符串的引号,如果这个字符串没有引号,则返回原始字符串. .test1 { conte

SASS详解之沿袭(extend)

SASS详解之继承(extend) 每一个类名都有可能有另一个类名的所有样式和它自己的特定样式的.当一个div的身上有两个类名,一个是“one”,另一个是“two”的时候.如下 HTML代码 <div class="one two"> 梦龙小站 </div> CSS代码 .one {width:100px;height:100px;} .two {background:red;border:5px solid #000;} 这就意味着,我们要配备一个很好的记忆力