更多
更多
文章目录
  1. Sass是什么？
  2. Sass安装及其使用
  3. Sass语法
  4. 什么是Compass？
  5. 总结
  6. 参考

使用Sass编译扫盲Compass

2018.01.19 chen7 工具  热度 ℃

Sass是什么？

SASS是Syntactically Awesome StyleSheets的缩写，它是css的一个预处理开发工具，提供了很多便利和简单的语法，让css看起来更像是一门语言，这种特性也被称为“css预编译”。

Sass只是css预编译工具中的一种，类似的工具还有Less/stylus等。

Sass安装及其使用

安装

SASS是Ruby语言写得，所以必须先安装Ruby，然后再安装Sass：

1
gem install sass

检查是否安装成功可输入ruby -v sass -v 查看版本号。

使用

1.利用sass本身进行编译

1
sass test.scss

将test.scss文件转为css语句显示在屏幕上（一般不用此操作）

1
sass test.scss test.css

将test.scss文件编译为test.css文件放在当前目录下（也可将编译的css文件单独放一个文件）

sass提供四个编译选项

  • nested：产套缩进的css代码，默认值；
  • expanded：没有缩进的/扩展的css代码；
  • compact：简介格式的css代码；
  • compressed：压缩后的css代码；

生产环境中，一般使用压缩后的css代码：

1
sass --style compressed test.scss test.css

我们更喜欢用SASS监听文件或目录进行自动编译：

1
//watch a file监听单个文件改动
sass --watch test.scss:test.css

//watch a directory监听文件夹变动
sass --watch sass文件夹名:css文件夹名

在样式表分布比较多的情况下更喜欢监听文件夹下目录的变动进行自动编译。

2.配合gulp-sass进行自动编译

前面我们已经学习过Gulp任务自动管理这里便可使用其gulp-sass插件监听文件的变动进行自动化编译。

1
2
3
4
5
6
7
8
9
10
//gulpfile.js
var sass = require('gulp-sass');
var gulp = require('gulp');

gulp.task('sass', function() {
  return gulp.src('app/scss/**/*.scss')
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(gulp.dest('app/css'));
})
gulp.task('default', ['sass']);

Sass语法

  • 变量
  • 嵌套/层叠
  • 计算
  • 继承
  • 混合器Mixin
  • 导入文件
  • 函数
  • 条件判断及循环

变量

sass使用$符号来标识变量

1
2
3
4
5
6
7
8
9
10
11
$hight-color:#f00;
.nav{
  $width:100px;
  color:$hight-color;
  width:$width;
}
//编译后
.nav{
  color:#f00;
  width:100px;
}

变量可以在css规则块之外存在，当变量定义在css规则块内，该变量只能再此规则块内使用。规则块内的变量和规则块之外的变量是相互独立各不影像的。

嵌套

Sass允许选择器及属性进行嵌套，我们一般用得较多的是选择器嵌套，

在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$hight-color:#f00;
.nav{
  background:$hight-color;
  height:100px;
  .txt{
    color:pink;
    &:hover{
			color: #ffb3ff;
		}
  }
}
//编译后
.nav{
  background:#f00;
  heigth:100px;
}
.nav .txt{
  color:pink;
}
.nav .txt:hover{
  color: #ffb3ff;
}

计算

Sass允许在代码中使用算术公式

1
2
3
4
5
body {
　　　　margin: (14px/2);
　　　　top: 50px + 100px;
　　　　right: $var * 10%;
　　}

继承

Sass允许一个选择器继承另一个选择器，使用选择器的继承，要使用关键词 @extend，后面紧跟需要继承的选择器。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.header{
  height:100px;
  background:red;
}
.tip{
  @extend .hader;
  font-size:12px;
}
//编译后
.tip{
  height:100px;
  background:red;
  font-size:12px;
}

混合器Mixin

Mixin有点像C语言的宏（macro），是可以重用的代码块。

使用@mixin命令，定义一个代码块,使用@include命令，调用这个mixin。

1
2
3
4
5
6
7
8
9
10
11
12
13
@mixin demo{
  $color:#f00;
  background:$color;
  height:100px;
}
div{
  @include demo;
}
//编译后
div{
  background:#f00;
  height:100px;
}

可以通过在@include混合器时给混合器传参，来定制混合器生成的精确样式。当@include混合器时，参数其实就是可以赋值给css属性值的变量。这种方式跟JavaScript的function很像：

1
2
3
4
5
6
7
8
9
10
11
12
@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
a{
  @include linkcolor(blue,red,green);
}
//编译后
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

导入文件

sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。另外，所有在被导入文件中定义的变量和混合器均可在导入文件中使用。

那些专门为@import命令而编写的sass文件，并不需要生成对应的独立css文件，这样的sass文件称为局部文件。sass局部文件的文件名以下划线开头。

1
@import "_test.scss";

什么是Compass？

Sass本身只是一个编译器（‘css预处理器‘），Compass在它的基础上，封装了一系列有用的模块和模板，补充Sass的功能。它们之间的关系，有点像Javascript和jQuery、Ruby和Rails、python和Django的关系。

安装

在已经安装好Ruby的前提下：

1
$gem install compass

项目初始化

1
compass create project //创建一个名为project的compass项目

里面会有config.rb配置文件，和两个子目录sass和stylesheets

1
compass create 项目名称 --sass-dir "sass" --css-dir "css" --javascript-dir "js" --images-dir "img"//创建定制化compass项目

编译

1
2
compass compile //一次性编译，将scss文件编译成css文件
compass watch //自动编译命令，只要scss文件发生变化就会自动编译成css

Compass模块

Compass采用模块结构，不同模块提供不同的功能，目前内置有五个模块,

具体可参考官方文档

  • reset //重置浏览器默认样式
  • css3 //提供css3命令
  • layout //提供布局功能
  • typography //提供板式功能
  • utilities //提供一些不属于其他模块的功能

具体对模块的精简介绍可参考Compass用法指南

总结

了解了相关的功能写法后发现Sass的编写方式让项目更模块化，减少重复性的录入。当然这些都需要建立在对项目整体有一定规划布局。

可以预见的是大项目的使用上模块化可以让代码更加容易维护。但是在小的页面站点上用原生的css还是更方便直接的写法。

另外实践了compass的用法之后自我感觉比较不太懂它存在的意义，模块的引用并没有让我觉得更利于代码的管理书写，所以关于compass决定弃用。

参考

感谢阅读
公众号