Sass 和 Compass小结

Sass 简介

Sass的 SCSS 语法是 CSS3 语法 的一个超集，传统的 CSS 重复的工作太多，而 Sass 可以帮助我们减少重复劳动，当然 Sass 的作用远不止这个。

参考和推荐书籍：《Sass 与 Compass 实战》

安装 Sass 和 Compass

一般的方法是通过gem进行安装，而gem又依赖于Ruby环境，所以要先安装Ruby，然后安装sass和compass。具体命令如下：

sudo apt-get install ruby
sudo gem install sass
sudo gem install compass

但是，用这种方法我最后一直安装不上compass，试了很多方法也没用。最后找到了以下这种方法，一次性安装，方便快捷：

sudo apt-get install ruby ruby-sass ruby-compass

检验是否安装成功，查看版本即可：

image1.png

创建 Sass 文件

Sass 文件 是以 .scss 后缀的，然后通过 Sass 命令将 Sass 文件 转化为 css 文件 。命令为：

sass sass 文件 css 文件

image2.png

Sass 基本语法

有 CSS 基础来学习 Sass 的 SCSS 语法很容易上手。

变量

Sass 允许定义变量，变量可以是任何的 CSS 属性值。如：颜色值、以空格分开的多个属性值等。

html

Sass

$color: #456eff;
$border: 2px solid black;

div#container {
    width: 200px;
    height: 200px;
    margin: 10px auto;
    background-color: $color;
    border: $border;
}

编译后的 CSS 代码

/* line 17, ../sass/demo01.scss */
button.sprites-btn {
  border: 1px solid silver;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  width: 400px;
  height: 400px;
  background: url('/images/icons-sf94510dbb1.png') 0 -400px;
}

细心的我们还可以观察到，通过 Sass 编译的 CSS 代码，还帮我们解决了厂商的命名问题（浏览器的兼容问题）。

结果

image3.png

嵌套

通过嵌套，我们可以省去很多重复写父类名的工作等。

html

    

        
1
        
2
        
3
    


    alink

Sass

$color: #456eff;
$border: 2px solid black;

div#container {
    width: 600px;
    height: 600px;
    margin: 10px auto;
    background-color: $color;
    border: $border;
    div#box1{
        width: 200px;
        height: 200px;
        background-color: silver;
        ul{
            list-style: none;
            display: inline;
        }
    }
    div#box2{
        width: 200px;
        height: 200px;
        background-color: wheat;
        margin: 10px;
        a{
            text-decoration: none;
        }
    }
}

编译后的 CSS 代码

div#container {
  width: 600px;
  height: 600px;
  margin: 10px auto;
  background-color: #456eff;
  border: 2px solid black;
}
div#container div#box1 {
  width: 200px;
  height: 200px;
  background-color: silver;
}
div#container div#box1 ul {
  list-style: none;
  display: inline;
}
div#container div#box2 {
  width: 200px;
  height: 200px;
  background-color: wheat;
  margin: 10px;
}
div#container div#box2 a {
  text-decoration: none;
}

通过嵌套，通过编译会帮我们找到相关的嵌套关系，然后转化为相关的 CSS。

结果

image4.png

父选择器的标识符 -- &

& 是父选择器的标识符，简单来说，就是在嵌套中代替父选择器。

下面代码实现对上面例子的最外层 div 的 hover 效果。只要在 div#container 中添加下面代码即可：

&:hover{
    background-color: springgreen;
}

混合器 -- @mixin

混合器的作用：当你需要重复使用一个 CSS 代码段的时候，可以使用混合器减少重复代码。

定义混合器：

@maxin maxinName(params) { ... }

使用混合器：

{ @include maxinName(params) }

html

Sass

@mixin divBox {
    height: 50px;
    width: 50px;
    background-color: rebeccapurple;
    border: 1px solid silver;
    border-radius: 50px;
    margin: 10px;
}

div#box1, div#box2, div#box3{
    @include divBox;
}

编译后的 CSS 代码

div#box1,
div#box2,
div#box3 {
  height: 50px;
  width: 50px;
  background-color: rebeccapurple;
  border: 1px solid silver;
  border-radius: 40px;
  margin: 10px;
}

效果

image5.png

混合器同时也可以传递相关的参数，形参是变量形式，实参是具体的属性。如：

@mixin border($size, $color){ ... }
{ @include border(1px, blue) }
或者
{ @include border($size: 1px, $color: blue) }

继承 -- @extend

继承是基于类的，所以子类继承父类，子类就会拥有父类的所有相关属性。简单理解，就是出现父类名的地方，子类也会出现。

html

    box1
    

        box2
    


    box3
    

        box2
    

Sass

.box1 {
    width: 200px;
    height: 200px;
    background-color: silver;
    padding: 10px;
    .box2{
        width: 100px;
        height: 100px;
        background-color: blue;
    }
}

.box3{
    @extend .box1;
}

编译后的 CSS 代码

.box1,
.box3 {
  width: 200px;
  height: 200px;
  background-color: silver;
  padding: 10px;
}
.box1 .box2,
.box3 .box2 {
  width: 100px;
  height: 100px;
  background-color: blue;
}

观察编译后的 CSS 代码，父类有的包括父类的属性，父类的子类属性，该有的都有。

效果

image6.png

注释

主要有两种方法：

// .........
/* ......... */

导入其他的 Sass 文件

实现方法为：

@import ”文件名“

导入的文件可以不写后缀名，这个Vue一样。然后通过 Sass 编译的时候就会寻找相关的依赖文件，最后转化为一个 CSS 文件。

Compass 简介

Compass 是一个强大的 Sass 框架， 是一套实用的工具。Compass 自身有很多 Sass 混合器和函数构成的模块，这些模块在它的官网都有详细的介绍。http://compass-style.org/

创建 Compass 文件

默认的创建方式为:

compass create project

创建成功：

image7.png

文件目录：

image8.png

默认会创建存放sass 文件的文件夹，和存放css 文件的文件夹，还有一个配置文件。

编译 Compass 文件

在文件夹中，通过编译命令，即可完成编译工作：

compass compile

image9.png

image10.png

Compass 与 CSS3

Compass 在 CSS3 中起着非常大的作用。比如解决浏览器的兼容性前缀问题。

解决前缀问题

导入 Compass CSS3 支持

@import "compass/css3"

圆角

@include border-radius(10px);

阴影

盒子阴影：

@include box-shawdow(10px 10px 10px rgba(125, 125, 125, .8));

文字阴影：

@include text-shawdow(10px 10px 10px rgba(125, 125, 125, .8));

颜色渐变

可以简写颜色渐变：

@include backgroud(linear-fradient(360deg, 颜色变化));

Compass 与 精灵图/雪碧图

可以通过 Compass 将图片合成精灵图，不仅如此，还可以生成精灵图的 CSS 文件， CSS 文件文件中包含精灵图中的相关位置信息。使用的时候还可以设置相关的属性值。个人觉得这个十分强大～～

目录说明

首先，你得在项目在根目录下新建一个 images 文件夹， 然后在 images 文件夹中新建一个 icons 文件夹, 即： /images/icons/ 。icons 文件夹的名字你可以随便起。

创建一个精灵地图

@import "compass/utilities/sprites";
@import "icons/*.png";
@include all-icons-sprites; // 生成 CSS 文件，文件包含精灵的位置信息。

通过以上两个语法，编译的时候就会在你的 images 文件夹中生成一张精灵图。

image10.png

image11.png

image12.png

嗯～很强！！精灵图的相关配置暂时不总结了，在相关书籍和官网上都有很多详细的介绍。