手机端设计必备：SASS代码教程大揭秘

大家都知道移动互联网发达了，所以做前端的呢也得跟上节奏，从电脑端转到手机端。不过，很多原来电脑端的网页设计经验并不适用于手机端。比如，不久前FungLeo写了一篇文章，总结了手机端H5的一些基础知识，真的挺火爆的！于是，他打算开个关于手机端的系列教程。这个系列文章里，我们就用SASS的代码来写CSS。要是你还不太懂SASS的话，最好先学一下，比如看看作者的《CSS预编译技术之SASS学习经验小结》。文章会用到reset.scss和mixin.scss这2个文件，用来重置浏览器的样式和提供几个基本的SASS代码块。想了解具体内容的话，可以查看《手机端系列博文基础reset.scss和mixin.scss》。

最简单的列表制作方法

列表制作方法一：最简单的列表

好，咱们先动手做一个简单的列表。看，就像下图这样，挺容易的！记住，开发手机应用时别忘了加适配代码，不然手机浏览器可能会把你的网页当成电脑网页处理。另外编码的时候尽量用utf-8，免得出现乱码这种尴尬事。现在使用的是rem这个单位，在reset.scss里头已经把html的字号设成了62.5%，相当于10px。所以说，1.6rem其实就是16px。

HTML代码：

html
    <li>列表项1</li>

    <li>列表项2</li>
    <li>列表项3</li>

    

        
这是一个列表1
        
这是一个列表2
        
这是一个列表3
        
这是一个列表4
        
这是一个列表5
        
这是一个列表6
        
这是一个列表7
        
这是一个列表8
    

注意事项：

-移动端开发需加入适配代码

-统一使用utf-8编码

.list_1 {    ul {}
    li {
        border-bottom: 1px solid #ddd;padding:0 1.6rem;        
        a {display: block;height: 4rem;line-height: 4rem;overflow: hidden;font-size: 1.4rem;}
    }
}

-使用rem作为单位

-学会SASS语法

列表制作方法二：另一个简单的列表

再看看下一个例子：还是个细细长长的列表。看着跟上边那回差不多，可是你瞧，线儿跟字儿对不上这就是设计师的个性和眼光。咱们前端，可得把设计师想传达的心意给砌出来。

SASS代码：

“`scss

ul {

padding:0;

li {

padding: 10px;

底部边框加一条细细的灰色线，颜色为#ccc。

}

.list_1 {    ul {padding-left: 1.6rem;}
    li {        border-bottom: 1px solid #ddd;padding-right: 1.6rem;        
    a {display: block;height: 4rem;line-height: 4rem;overflow: hidden;font-size: 1.4rem;}
    }
}

}

通过这两小例子，咱们知道怎么弄个基础列表，也明白那儿得小心点儿。下章里，FungLeo就教你更高级点的列表玩法儿，看各种样式。

总结与展望：

下面分别给出两例子教你怎么做简单的列表，别忘了记住几个要点！往后学，我们会讲更深奥些的列表制作技巧。