css去除下划线 Sass 与 Compass 实战经验总结

自从走进前端圈，一直忙于学习和工作，虽有经常记下点滴收获，却没有时间好好地写出来。此刻，恰逢”五一”，正好挤时间写写博客，跟大家分享下近期结合使用Sass和Compass的一些经验。文章主要面向对Sass和Compass还不熟悉的同学，相信对你有一定的帮助。大牛请补充，欢迎留下建议或补充说明。

Sass 和 Compass 的安装

Sass 和 Compass 的安装大家可以参考它们各自的官网，里面有详细的 install 步骤。以下是它们的官网：

这里需要提下，安装 Sass 和 Compass 之前，请先确保本地已经装了 Ruby 环境，因为这两者都是用 Ruby 语言开发的。至于 Ruby 环境的安装，本文提供两个途径：

Sass 的常用方法

Sass 有两种语法规则 — Sass 和 Scss, 以下所说的都是针对 Scss 语法。以下示例只给出 Scss 的写法，如有需要了解编译后样式的，推荐参考官网。

编译

Scss 有四种编译风格，分别是：

至于怎么编译，我们放在下面跟 Compass 一起讲兼职赚钱，因为这里主要分享和 compass 结合使用。如果要单独编译 Sass，可以参考官网上提供的在线编辑器，或者用 koala 软件，一款 Less、Sass 编译器css去除下划线，如果项目中有用 Gulp 或 Webpack,可以用它们的插件自行编译即可。

注释

以下两种注释方式，大家自取所需即可。

//这种注释方式，不会被编译到css文件中，只能保留在源文件
/* 这种注释可以被编译到css文件中 */

变量

Scss 语法支持使用变量，变量都以$符号开头css去除下划线，以下给出简单示例：

$font-color: #ff637c;
$sm-padding: 6px;
.main {
    color: $font-color;
    padding-top: $sm-padding;
}

嵌套

Scss 支持选择器嵌套使用，省去我们写很多相同的选择器名称，如：

.prev-item {
    border: 1px solid $primary-color;
    padding: $sm-padding;

  p {
     line-height: 28px; 
    }
}

这里提醒一点，嵌套层级太深会影响网页性能，一般推荐嵌套不超过 3 层。

复用

scss 代码的复用，这里讲以下几种：

@mixin 和 @include

@mixin size($width, $height: $width) {
    width: $width;
    height: $height;
}

.containter {
    @include size(60px);
}

class / placeholder 和 @extend

请大家看看以下两种形式，注意两种形式的编译结果:

%auto {
    margin-left: auto;
    margin-right: auto;}

.box {    
    @extend %auto;
    width: 80px;}

.auto {
    margin-left: auto;
    margin-right: auto;
}
   
.content {
    @extend .auto;
    width: 80px;
}

第一种写法是 Scss 的 placeholder 的用法，编译结果如下，也就是”%auto“的样式是不会单被编译出来的，只在引用它的选择器里面生效：

.box {
    margin-left: auto;
    margin-right: auto;
    width: 80px;
}

而第二个编译结果是

.auto {
    margin-left: auto;
    margin-right: auto;
}

.content {     
    margin-left: auto;     
    margin-right: auto;     
    width: 80px;
}

因此，如果你的 html 中需要用到诸如“auto”这个类的，选用第二种方法，如果 html 中不需要用到“auto”这个类，scss 中的“auto”纯属用来服务其他类的，那我们选择第一种方法，减少 css 中多余的样式。

@import

@import命令在css模块化的运用中起着重要的作用，它用来引入外部的文件。比如我们已经写好了 _reset.scss、header.scss 和 modal.scss，如下：

css去除下划线_实战经验的重要性_实战经验是什么意思

这里我们在写 index.scss 时，需要用到 header 和 modal 的样式，那么我们直接在 index.scss 里面，通过 @import 命令引进来就行，如图：

css去除下划线_实战经验的重要性_实战经验是什么意思

这里提醒注意两点

Sass 还有很多高级用法，如自定义函数、条件语句等, 有兴趣的同学可以看看官方文档。

Compass 与 Sass 结合使用

Compass 和 Sass 结合使用，可以大大加快我们编写 css 的速度，因为 Compass 里面已经有很多现成的 sass 模板，我们可以直接拿来用。先看看在项目里面装了 Compass 以后，compass 里面会有一个 config.rb 文件、一个存放 Sass 文件的文件夹和一个存放编译后的 css 文件夹（文件夹名称可自行修改），你也可以放入其他文件，如下图的 images 文件夹。

实战经验是什么意思_实战经验的重要性_css去除下划线

我们看看下图 config.rb 文件：

css去除下划线_实战经验的重要性_实战经验是什么意思

在代码的6~9行，我们可以设置文件的路径，在14行设置编译后的css格式，20行设置 line_comments = false 去除默认状态下大量的注释，如果需要去除缓存文件，则加上一句 cache = false 即可。

编译

如果项目中没有使用 gulp 或者 webpack，单纯用 compass 来编译的话，可以命令行中项目的根目录下，执行 compass compile ，这样 compass 就会把 Scss 文件夹中的 scss 文件, 编译成 css 并存放在 css(或默认名为 stylesheets)的文件夹里面。Compass 也可以像 gulp 或者 webpack 一样，实时编译，只需要在项目的根目录下，打 compass watch , 这样 compass 就会实时监听 scss 文件，一旦 sass 文件有改动，及立即编译到 css 文件。

模块引用

有了 compass，我们不用再自己写一个 reset.scss 文件，或者定义一大堆 css3 的 @mixin等，可以直接在 scss 文件里面引用 compass 的现成模块。具体模块很多，有兴趣的同学可以浏览官网，上面有详细的用法说明，这里只给出简单示例：

实战经验是什么意思_实战经验的重要性_css去除下划线