前端工程

sass学习

  • 工作流程
  • 两种语法
    • 以前的.Sass 类 Ruby语法
    • 现在的.Scss 是CSS3的超集

Sass安装

    1. 安装Ruby，rvm 为Ruby的管理工具
    1. 安装sass、compass
1
2
sudo gem install sass 
sudo gem install compass
  • 查看版本
1
2
3
sass -v

compass version
  • 更新 
1
gem update sass
  • 卸载 
1
gem uninstall  sass

Sass 的编译有多种方法：

命令编译

  • 目录下 
1
sass --watch demo.scss:demo.css
  • 单文件编译：
1
sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css
  • 多文件编译：
1
2
sass sass/:css/ 
表示将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件，并且将这些 CSS 文件都放在项目中“css”文件夹中。
  • 开启“watch”功能，这样只要你的代码进行任保修改，都能自动监测到代码的变化，并且给你直接编译出来：
1
sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css
  • watch 举例：

来看一个简单的示例，假设我本地有一个项目，我要把项目中“bootstrap.scss”编译出“bootstrap.css”文件，并且将编译出来的文件放在“css”文件夹中，我就可以在我的命令终端中执行：

1
sass --watch sass/bootstrap.scss:css/bootstrap.css

一旦我的 bootstrap.scss 文件有任何修改，只要我重新保存了修改的文件，命令终端就能监测，并重新编译出文件

koala使用

  • 自动化编译Gulp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//Gulp 配置 Sass 编译的示例代码

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
    gulp.src('./scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
});

gulp.task('watch', function() {
    gulp.watch('scss/*.scss', ['sass']);
});

gulp.task('default', ['sass','watch']);
  • 创建 Sass 文件时，就需要将文件编码设置为“utf-8”，文件不要用中文

在 Sass 中编译出来的样式风格也可以按不同的样式风格显示。

  • 其主要包括以下几种样式风格：

    • 嵌套输出方式 nested
    • 展开输出方式 expanded
    • 紧凑输出方式 compact
    • 压缩输出方式 compressed

  • 嵌套输出方式 nested

Sass 提供了一种嵌套显示 CSS 文件的方式。例如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

在编译的时候带上参数--style nested:

1
sass --watch test.scss:test.css --style nested

编译出来的 CSS 样式风格：

1
2
3
4
5
6
7
8
9
10
nav ul {
  margin: 0;
  padding: 0;
  list-style: none; }
nav li {
  display: inline-block; }
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none; }
  • 在编译的时候带上参数--style expanded:
1
sass --watch test.scss:test.css --style expanded

这个输出的 CSS 样式风格和 nested 类似，只是大括号在另起一行，同样上面的代码，编译出来

  • 紧凑输出方式 compact,单行
    在编译的时候带上参数--style compact:
1
sass --watch test.scss:test.css --style compact
  • 压缩输出方式 compressed
    在编译的时候带上参数--style compressed:
1
sass --watch test.scss:test.css --style compressed

压缩输出方式会去掉标准的 Sass 和 CSS 注释及空格。也就是压缩好的 CSS 代码样式风格：

  • Sass 调试一直以来都是一件头痛的事情，使用 Sass 的同学都希望能在浏览器中直接调试 Sass 文件，能找到对应的行数。值得庆幸的是，现在实现并不是一件难事，只要你的浏览器支持sourcemap功能即可。早一点的版本，需要在编译的时候添加--sourcemap 参数：
1
sass --watch --scss --sourcemap style.scss:style.css
  • 在 Sass3.3 版本之上（我测试使用的版本是 3.4.7），不需要添加这个参数也可以：
1
sass --watch style.scss:style.css

在命令终端，你将看到一个信息：

1
2
3
>>> Change detected to: style.scss
  write style.css
  write style.css.map

这时你就可以像前面展示的 gif 图一样，调试你的 Sass 代码。

Sass 的变量包括三个部分：

  • 声明变量的符号“$”
  • 变量名称
  • 赋予变量的值
1
!default则表示默认值。
1
$color: orange !default;//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量)
  • 您在学习 sass 时，除了在我们网页上可以做练习，还有一个便利在线编辑器网址如下：

http://sassmeister.com/

  • 局部变量只会在局部范围内覆盖全局变量。

Sass 的嵌套分为三种：

  • 选择器嵌套
  • 属性嵌套
  • 伪类嵌套

选择器嵌套

假设我们有一段这样的结构：

1
2
3
4
5
6
7
<header>
<nav>
    <a href=“##”>Home</a>
    <a href=“##”>About</a>
    <a href=“##”>Blog</a>
</nav>
<header>

想选中 header 中的 a 标签，在写 CSS 会这样写：

1
2
3
4
5
6
7
nav a {
  color:red;
}

header nav a {
  color:green;
}

那么在 Sass 中，就可以使用选择器的嵌套来实现：

1
2
3
4
5
6
7
8
9
nav {
  a {
    color: red;

    header & {
      color:green;
    }
  }  
}