sass个人学习笔记

Materliu 在慕课的视频: http://www.imooc.com/learn/364 、 http://www.imooc.com/wiki/371

sass入门:http://www.w3cplus.com/sassguide/

个人先看了 《Sass与Compass实战》（Materliu 是中文翻译之一）后看的视频，看书的时候不是很了解看了视频之后又看了一遍书终于少许了解sass了

下面是我个人对《Sass与Compass实战》这本书学习笔记总结，有些是个人极端自我理解少许和API解释不同

安装的步骤就不总结了

目前个人觉得也就用到这几个 当然也是书里写

compass create 项目名  创建 compass项目

compass h compass的帮助命令

compass init 为项目添加 compass

compass watch 实时编译

compass compile 生成样式表

{

gem install css_parser 安装

compass stats 查看生成的文件大小

}

 可以用图形界面的编译工具  koala 不用命令行了

config.rb 配置文件：

http_path = "/" 路径
css_dir = "stylesheets"  样式
sass_dir = "sass"  存放scss文件夹
images_dir = "images"  存放图片文件夹
javascripts_dir = "javascripts" 存放JS文件夹

output_style = :compact  生成CSS格式 有压缩、{}不同方式

relative_assets = false 是否是相对路径

line_comments = false  生成CSS里清楚对应scss行数

注释：

// 仅scss 文件内看;

/**/ 除未压缩外能看;

/*!  !*/ 都能看 压缩也能看;

注释中有会有中文编译问题 在文件第一行 @charset "utf-8";

@debug $style; 打印日志
@error 错误提示信息

@import "compass/reset"  引入默认样式 个人认为这个默认样式没啥用

@at-root 在嵌套里标记用的 生成出来css是独立的

@extend 是继承 不能  .a .b的继承

% 提取公共的样式，同时不编译 简称 提取公因式且不编译

$ 开头定义变量名 是个全局变量   在{ $name } 局部变量

&代表父级 a{ &:hover{} } a{} a:hover{}

.a{ .b,.c,.d{} } .a .b,.a .c,.a ,d{} 群组

.a,.b{ a{}}  .a a,.b a{}   群组

.a{ border : { style:solid;1px;color:#ccc } }  属性嵌套 ‘:’ 必写

_aa.scss 一般为 局部文件 其实 @import 引入的时候 _可以不写

$aa:10 !default  !default设置默认值

@mixin 混合器 @include 调用 

布尔值  and(与)or(或) ot(非)

comparable($numver-1,$numver-2) 判断是否能相加 返回 布尔值 true/false

unit($numver) 判断 $numver 的单位

unitless($numver) 判断数值是否有单位 返回布尔值 没有单位是 true 反之 false

type-of($value) 返回类型 类似于js typeof

@function @return  必须要有返回值 

#{...} 插值

@for $i from 1 to 5  @for $i from 1 through 5 前者是到4不到5 后者循环到5 

@for $i from $strat through $end  开始结束如果是 strat 大就从小到大 反之亦然 

@if 判断条件{}@else{} 判断

@include a($a:10,$b:20) 可以传类似于json的值

@include link-colors(  #333,#666,#999,#f00  ); 设置 a:visited a:focus a:hover a:active 颜色

@include link-colors(#333,#00f); 设置默认没有线 hover 有线 还有文字颜色

@include ellipsis 文字超出....

@include nowrap 防止折行

@include clearfix;清浮动

compass css3 个人感觉就这最实用

@import “compass/css3”;

@include border-radius(5px);

关闭某一项浏览器的 厂商前缀

$experimental-support-for-opera:false

$experimental-support-for-microsoft:false

$experimental-support-for-khtml:false

图片精灵 仅支持PNG格式

@import “compass/utilities/sprites”;

@import "icons/*.png"  图片的目录名

@include all-icons-sprites;  生成所有的精灵class  'icons'为目录名 生成的class名为 .目录名+图片名 .icos-ico1

<map>就是ico的目录名字

background-image:inline-image('../images/a.png'); 生成base-64位的 data:images/gif;base64xxxxxxx= 

$<map>-layout:vertical(垂直)、horizontal(水平)、diagonal(对角线)、smart(智能)  

$icons-layout:smart  $icons目录名  生成的图片是四种中的哪一种 生成到原本小图标icons目录的上一级目录 命名为 小图标目录 icons-乱码.png

$<map>-spacing:0px  $icons-spacing:5px;  设置精灵图片间距  （ smart模式 不能设置图片间距 ）

$<map>-<sprite>-spacing:0px;   $icons-arrow-spacing:12px; sprite其实就是你想单独间距ico的名

$<map>-sprite-width($name)、$<map>-sprite-height($name) 获取制定ico的宽高

$<map>-sprite-dimensions:true/false; 将每张ico图片设置宽高

$<map>-sprite-base-class:'.aa' 更改默认文件夹icons 前缀的classname

$disable-magic-sprie-selectors：true/false; 默认开启 是通过图片名 a_hover.png 图片生成伪选择器 a{ background-position:0 0 } a:hover{background-position:10px 10px}

个人觉得有用的 图片精灵自定义：

sprite-map($glob,...) 生成图片的url复制给变量，同时可以设置一些配置参数

$icons:sprite-map("icons/*.png",$layout:vertical,$arrow-spacing:5px)  定义图片的变量名

sprite($map,$sprite,[$offset-x],[$offset-y]);   生成自定义的图片

sprite-position($map,$sprite,[$offset-x],[$offset-y]) 设置backgournd-positon：x y 位置

backgurnd:sprite-position($icons,arrow);     设置backgournd-positon：x y 位置

sprite-background-position($map,$sprite,[$offset-x],[$offset-y]); 设置backgournd-positon：x y 位置

@include sprite-background-position($icons,arrow); 返回的精灵的x y 位置

@include sprite-dimensions($icons,arrow) 返回的精灵的宽高

 例子：

$icons:sprite-map("icons/*.png"); 

.sprite-base{background:$icons no-repeat;}

.next{

　　@extend .sprite-base;

　　@include sprite-backgournd-position($icons,arrow);

　　@include sprite-dimensions($icons,arrow);

}

写完发现 越来越来越像书的压缩版和 API 了还不如人家做的.....

做了一个小小DEMO 

上图：

整个文件目录截图：

images 截图:

生成ico的 icons里的截图:

sass截图

stylesheets截图

html部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>厘米IT学院    </title>
    <link rel="stylesheet" type="text/css" href="stylesheets/itlimi.css" />
</head>
<body>
    <!-- 头部 导航 start  -->
    <div class="content">
        <div class="nav-top">
            <div class="log"><a href="#"></a></div>
            <ul class="nav">
                <li><a href="#">首  页</a></li>
                <li><a href="#">培训课程</a></li>
                <li><a href="#">优秀学员</a></li>
                <li><a href="#">课程疑问</a></li>
                <li><a href="#">职业生涯</a></li>
                <li><a href="#">学员社区</a></li>
                <li><a href="#">官方博客</a></li>
                <li><a href="#">学院地址</a></li>
            </ul>
        </div>
        <!-- 头部 导航 end  -->

        <!-- 广告 start  -->
        <div class="adve">
            <img src="images/bannerImg.jpg" alt="">
        </div>
        <!-- 广告 end  -->
        
        <!-- 主体 start  -->
        <div class="box-main">
            <!-- right start  -->    
            <div class="box-right">
                <dl class="dl-list">
                    <dt>
                        职业生涯
                    </dt>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            Web前端开发工程师需要掌握哪些核心技能？
                        </a>
                    </dd>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            我是程序员，有必要进行web前端开发的学习吗?
                        </a>
                    </dd>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            我是网站美工，目前发展遇到瓶颈，该如何解决？
                        </a>
                    </dd>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            我适合从事web前端开发行业吗？
                        </a>
                    </dd>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            Web前端工程师如何给自己定位？
                        </a>
                    </dd>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            Web前端开发工程师好找工作吗？
                        </a>
                    </dd>
                </dl>
                <dl class="dl-list">
                    <dt>
                        好职推荐
                    </dt>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            盛大网络--前端开发工程师
                        </a>
                    </dd>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            阿里巴巴--前端开发工程师
                        </a>
                    </dd>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            金山软件--KIS-WEB前端页面工程师
                        </a>
                    </dd>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            360京东商城 -- Web前端开发工程师
                        </a>
                    </dd>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            阿里巴巴 - 技术部 - Web前端开发工程师（高
                        </a>
                    </dd>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            人人网 - 技术部 - 3G前端工程师
                        </a>
                    </dd>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            人人网 - 技术部 - Web前端开发工程师
                        </a>
                    </dd>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            搜狐 - 媒体技术产品中心 - JavaScript前端
                        </a>
                    </dd>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            新浪 - 运营部 - Web前端开发工程师
                        </a>
                    </dd>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            新浪 - 无线部 - Web前端开发工程师
                        </a>
                    </dd>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            新浪 - 技术部 - Web前端开发工程师
                        </a>
                    </dd>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            新浪 - 产品部 - JavaScript前端工程师
                        </a>
                    </dd>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            百度 - Web前端研发工程师
                        </a>
                    </dd>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            百度 - 商务搜索 - Web前端研发工程师
                        </a>
                    </dd>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            百度 - 社会化网络事业部 - JavaScript前端
                        </a>
                    </dd>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            百度 - 搜索研发部 - web前端研发工程师
                        </a>
                    </dd>
                    <dd>
                        <span>
                            &nbsp;
                        </span>
                        <a href="#">
                            百度 - 系统部 - WEB前端开发工程师
                        </a>
                    </dd>
                </dl>
            </div>
               <!-- right end  -->
    
            <!-- left start  -->    
            <div class="box-left">
                <div class="min-adve">
                    <img src="images/articleBanner.jpg" alt="">
                </div>
                <h2 class="tit">Web前端开发工程师好找工作吗？</h2>
                <div class="txt-info">
                        据09年全国Web前端开发行业调查统计显示，09年大型企业对于Web前端开发人才需求紧缺。 Web前端开发目前是一种新兴职业，专业的前端开发人员绝大部分存在于大型企业中，如腾讯、百度等，换种说法就是：选择从事Web前端开发就等于你的一只脚已经迈进了腾讯、百度等高薪企业。

                        随着Web2.0的大潮席卷而来，2010年互联网发展速度空前，互联网向标准化、专业化、精细化方向发展，导致Web开发职位进一步细分，Web 前端开发工程师、Web页面重构师等这些高薪职业相继诞生。如今流行的浏览器有十几种，不同的浏览器对页面的解析不同，导致相同的页面在不同的浏览器内显示效果不同，不能兼容多种浏览器，用户体验降低，搜索引擎抓取率低，加载速度慢等影响页面整体质量的因素产生，所以对页面制作要求越来越高，致使许多公司急需提供制作标准页面服务的技术人员。

                        现在YAHOO、MSN等国际门户网站，网易、新浪等国内门户网站，和主流的Web2.0网站，均采用xHTML(DIV)＋CSS的框架模式，更加印证了xHTML(DIV)＋CSS是大势所趋。

                        正因为如此Web前端开发人员成为市场上紧缺的人才，同时也成为一个新兴的高薪职业。
                </div>
            </div>
               <!-- left end  -->
        
            
        </div>
        <!-- 主体 end  -->

        <!-- 尾部 start  -->
        <div class="foot">
            <p>
                <a href="#">关于W3CStudy</a>
                |
                <a href="#">广告服务</a>
                |
                <a href="#">提交问题</a>
                |
                <a href="#">联系我们</a>
                |
                <a href="#">版权声明</a>
                |
                <a href="#">关于隐私</a>
                |
                <a href="#">合作伙伴</a>
            </p>
            <p>
                京ICP备10055601号  All rights(C)2008-2010 Reserved
            </p>
        </div>
        <!-- 尾部 end  -->
    </div>
</body>
</html>

主要 itlimi.scss 样式

@charset "utf-8";
@import "compass/css3"; 
@import "tsass";  // 默认的样式库
@import "compass/utilities/sprites";


$icons-bgs: sprite-map("icons/*.png",$layout:vertical,$spacing:15px);//图片精灵路径 


@include treset();  // tsass.scss 重置默认样式
@include font-sizes(12,24,px); // tsass.scss 生成初始字体12-24
@include init-Style(ml,margin-left,px,5,10); // tsass.scss 生成初始margin-left左外边距 5-15

.sprite-base{
    background: $icons-bgs no-repeat;
}

//初始一些 颜色值
$gray:#393838;  
$gray2:#eaeaea;
$red:#810000;
$white:#fff;


body{ background:url(../images/bodyBg.png) no-repeat 0 0;}
.content{
    1000px;
    margin:0 auto;
    @include border-radius(5px);
}

/* 导航条 */
.nav-top{
    $hei:54px;

    margin :{
        top:$hei;
    };
    height:$hei;
    background-color:$gray;
    
    %top-public{
        float:left;
        height:$hei;
     }

    .log{
        width:220px;
        @extend %top-public;
        a{
            display:block;
            @extend .sprite-base;
            background-position:sprite-position($icons-bgs,logo);
            @include sprite-dimensions($icons-bgs,logo);
        }
    }
    @at-root .nav{
        li{
            @extend %top-public;
            width:86px;
            line-height: $hei;
            text-align: center;

        }
        a{
            display:block;
            font-size: 12px;
            color: #ccc;
        }
        a:hover{
            color:$white;
            background: $icons-bgs no-repeat;
            background-position:sprite-position($icons-bgs,navActive);
        }


    }

    & a{
        
        text-decoration: none;
    }
}

/* 广告 */
.adve{
    height:292px;
    overflow:hidden;
    margin:10px 0;
}


.box-main{
    background:$gray2;
    padding:10px;
    overflow:hidden;
}

.box-left{
    width:660px;
}

.tit{
    font-size: 22px;
    font-weight: bold;
    line-height: 66px;
    color:$red;
}
.txt-info{ 
    text-indent:2em;
    font-size:14px;
    line-height: 24px;
}

.box-right{
    float:right;
    width:300px;
}

.dl-list{
    padding-bottom:10px;
    dt{
        height:32px;
        line-height: 32px;
        padding-left:20px;
        color:$white;
        font-size: 14px;
        @extend .sprite-base;
        background-color:$red;
        background-position:sprite-position($icons-bgs,fries,7,6);
        margin-bottom:4px;
    }
    dd{
        position:relative;
        line-height: 24px;
        font-size: 12px;
        padding-left:17px;
        span{
            position:absolute;
            left:8px;
            top:12px;
            width:3px;
            height:3px;
            background-image:inline-image('../images/dot.png');
        }
        a{
            text-decoration: none;
            color:#000;
        }
    }
}

/* 尾部 */
.foot{
    background-color:$gray;
    margin-top:10px;
    padding:15px 0;
    font-size: 12px;
    color:$white;
    p{
        text-align: center;
        line-height: 20px;
        a{
            text-decoration: none;
            color:$white;
        }
    }

}

应用 tsass.scss 

@charset "utf-8";
@mixin treset(){
    html {margin: 0; padding: 0; border: 0;}
    body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, article, aside, dialog, figure, footer, header, hgroup, nav, section { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; }
    ol, ul, li { list-style: none; }
    table,tr, th, td { border-collapse: collapse; margin: 0; padding: 0;  font-size: 100%; vertical-align: baseline;}
    caption, th, td { text-align: left; font-weight: normal; }
    input,select{margin:0;padding:0}
    a:hover { text-decoration: underline; }
    img { border: none; }
    textarea{ resize:none;border:1px solid #ccc;}
}

//浮动
@mixin float($dir:left){
    float:$dir;
}


//设置默认字体class
@mixin font-sizes( $strat:0 , $end:100 ,$oUnit:px ){

    @if( TestNum( $strat,$end ) ){
        @for $i from $strat through $end {
            @if( $i%2 == 0 ){
                .f-#{$i}{ font-size:$i+$oUnit; }
            }
        }
    }
}


//判断是否为数字
@function TestNum( $num1,$num2 ){
    
    @if ( not unitless($num1) or not unitless($num2) ){
        @debug "其中数值有单位";
        @return false;
    }
    @if ( type-of($num1) == number and type-of($num1) == number ) {
        @return true;
    }@else{
        @debug "其中有值不数字";
        @return false;
    }
}

//初始class
@mixin init-Style( $class,$styles,$oUnit:px, $strat:0 , $end:100 ){

    @if( TestNum( $strat,$end ) ){
        @for $i from $strat through $end {
            .#{$class}-#{$i}{ #{$styles}:$i+$oUnit; }
        }
    }

}

config.rb配置文件：

require 'compass/import-once/activate'
# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "../"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

# You can select your preferred output style here (can be overridden via the command line):
output_style = :compact

# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = false

# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false

# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

最终生成 itlimi.css

@charset "UTF-8";
html { margin: 0; padding: 0; border: 0; }

body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, article, aside, dialog, figure, footer, header, hgroup, nav, section { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; }

ol, ul, li { list-style: none; }

table, tr, th, td { border-collapse: collapse; margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; }

caption, th, td { text-align: left; font-weight: normal; }

input, select { margin: 0; padding: 0; }

a:hover { text-decoration: underline; }

img { border: none; }

textarea { resize: none; border: 1px solid #ccc; }

.f-12 { font-size: 12px; }

.f-14 { font-size: 14px; }

.f-16 { font-size: 16px; }

.f-18 { font-size: 18px; }

.f-20 { font-size: 20px; }

.f-22 { font-size: 22px; }

.f-24 { font-size: 24px; }

.ml-5 { margin-left: 5px; }

.ml-6 { margin-left: 6px; }

.ml-7 { margin-left: 7px; }

.ml-8 { margin-left: 8px; }

.ml-9 { margin-left: 9px; }

.ml-10 { margin-left: 10px; }

.sprite-base, .nav-top .log a, .dl-list dt { background: url('../images/icons-s46c7590030.png') no-repeat; }

body { background: url(../images/bodyBg.png) no-repeat 0 0; }

.content { width: 1000px; margin: 0 auto; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }

/* 导航条 */
.nav-top { margin-top: 54px; height: 54px; background-color: #393838; }
.nav-top .log, .nav-top .nav li, .nav .nav-top li { float: left; height: 54px; }
.nav-top .log { width: 220px; }
.nav-top .log a { display: block; background-position: 0 -37px; height: 54px; width: 220px; }
.nav li { width: 86px; line-height: 54px; text-align: center; }
.nav a { display: block; font-size: 12px; color: #ccc; }
.nav a:hover { color: white; background: url('../images/icons-s46c7590030.png') no-repeat; background-position: 0 -106px; }
.nav-top a { text-decoration: none; }

/* 广告 */
.adve { height: 292px; overflow: hidden; margin: 10px 0; }

.box-main { background: #eaeaea; padding: 10px; overflow: hidden; }

.box-left { width: 660px; }

.tit { font-size: 22px; font-weight: bold; line-height: 66px; color: #810000; }

.txt-info { text-indent: 2em; font-size: 14px; line-height: 24px; }

.box-right { float: right; width: 300px; }

.dl-list { padding-bottom: 10px; }
.dl-list dt { height: 32px; line-height: 32px; padding-left: 20px; color: white; font-size: 14px; background-color: #810000; background-position: 7px 6px; margin-bottom: 4px; }
.dl-list dd { position: relative; line-height: 24px; font-size: 12px; padding-left: 17px; }
.dl-list dd span { position: absolute; left: 8px; top: 12px; width: 3px; height: 3px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAIAAAGuTRJ+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RkM0Q0UwRTVGNzA4MTFFNEI3RjZFMkQ1Njc1RkM0RDYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RkM0Q0UwRTZGNzA4MTFFNEI3RjZFMkQ1Njc1RkM0RDYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGQzRDRTBFM0Y3MDgxMUU0QjdGNkUyRDU2NzVGQzRENiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGQzRDRTBFNEY3MDgxMUU0QjdGNkUyRDU2NzVGQzRENiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqSIIugAAAAhSURBVHjaYmhkYAAIIAYgBgggEAYigABihGKAAANhCAAASNsDi4C3yNYAAAAASUVORK5CYII='); }
.dl-list dd a { text-decoration: none; color: #000; }

/* 尾部 */
.foot { background-color: #393838; margin-top: 10px; padding: 15px 0; font-size: 12px; color: white; }
.foot p { text-align: center; line-height: 20px; }
.foot p a { text-decoration: none; color: white; }

心得

刚开始写的时候有点不太习惯，之后我就把sass当成JS封方法的感觉在写就好多了 没个css模块就是一个 大的function 里面可能有几个子的方法的概念,

在写 @function 、@if 老感觉在写JS常常忘记@ 然后就编译老报错看代码还觉得没错啊，原来忘了写@