美文网首页我爱编程
CSS 预处理器-Sass入门

CSS 预处理器-Sass入门

作者: Rin阳 | 来源:发表于2016-01-31 22:03 被阅读181次

前言


Sass 是一门高于 CSS 的元语言,它能用来清晰地、结构化地描述文件样式,有着比普通 CSS 更加强大的功能。Sass 能够提供更简洁、更优雅的语法,同时提供多种功能来创建可维护和管理的样式表。

以上是Sass官网的介绍。Sass相信很多人都耳熟能详,它是一款CSS预处理器,是一门编程语言,通过少量的Sass代码,通过编译转换成CSS文件。掌握Sass已成为前端工程师必备技能。

安装与使用


Sass是基于ruby语言编写的,也就是说,Sass的编译需要ruby环境下的Sass去编译,但我们不需要去学习ruby,只需安装好即可。ruby下载地址

安装好ruby以后,打开windows cmd窗口,输入ruby -v,显示出版本号就代表安装完毕了。

ruby当前稳定版本号为2.3.0

sass文件本身是有两种格式,一种叫.sass,另一种叫.scss
它俩有和区别?请看下面。
sass文件书写格式

/* sass文件书写格式 */
body
  color: #fff
  background: #f36

scss文件书写格式

/* scss文件书写格式 */

body{
  color:#fff;
  background:#f36;
}

编译出来的CSS文件

body{
  color:#fff;
  background:#f36;
}

观察上面的代码可以看出,.sass后缀的代码没有大括号、没有分号,严格缩进,这种书写方式和python一样。但对于前端开发人员来说非常的不友好,所以后来推出了.scss后缀的版本,来适应前端开发人员的习惯。后面演示都之以.scss为主。

那么怎样把.scss转换成css文件呢,前面的ruby环境就起了作用,在安装好ruby之后,接着安装Sass。

在cmd窗口下输入如下命令。

gem install sass

安装完成后,再输入如下命令。

sass -v
sass版本号

显示出版本号后,即Sass安装成功。

安装完成后即可直接使用,在cmd下切换到一个叫style.scss文件所在目录,代码如下。

$color: red;  // 定义一个变量
body {
    color: $color;  // 使用变量
    border: 1px solid $color;
}

在cmd下输入如下命令。

sass style.scss

结果被输出在cmd上。


结果输出

如果想要把输出的文件保存下来,可以输入如下命令。

sass style.scss style.css

两条命令在部分情况下等价,但强烈推荐标准来,使用冒号而不是用空格。

sass style.scss:style.css

文件会被保存在当前目录下,名为style.css,内容格式与输出在cmd上的一样,若不想输出到当前文件夹可以用相对路径,比如../../style.css。

而且SASS提供四个编译风格的选项:

  • nested:嵌套缩进的css代码,它是默认值。
  • expanded:没有缩进的、扩展的css代码。
  • compact:简洁格式的css代码。
  • compressed:压缩后的css代码。

该参数跟在--style的后面,空格隔开,如下代码所示。

sass --style compressed test.sass:test.css

多文件编译如下代码所示,将当前目录的 scss文件夹下的所有.sass/.scss文件,全部编译到当前目录下的css文件夹下。css文件夹必须存在,否则报错。

sass --update scss/:css/

也可以配合--style参数一起使用。


sass --update scss/:css/ --style compressed

每次修改scss文件后,都要去手动编译,sass为我们提供了另外一个参数watch,监控文件变动自动编译。scss/为监控目录,css/为输出目录,都可以使用相对路径。

sass --watch scss/:css/

其他方式编译


如果用不习惯命令操作,可以使用GUI编译器
Koala (http://koala-app.com/)
Compass.app(http://compass.kkbox.com/
Scout(http://mhs.github.io/scout-app/
CodeKit(https://incident57.com/codekit/index.html
Prepros(https://prepros.io/

其中我更喜欢koala,强烈推荐。


koala界面

如果你使用前端自动化构建工具grunt或gulp,可以使用编译sass的插件进行自动编译和输出。我目前使用的gulp构建工具,gulpfile.js的配置如下。

var gulp = require('gulp');  //加载gulp
var sass = require('gulp-sass');  //加载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的安装、后缀名版本、sass命令使用,以及三种编译方式做了简单的介绍,下一节我们将直接进入sass基础。

相关文章

  • Sass和Less

    什么是Sass和Less? Sass和Less都属于CSS预处理器。 什么是 CSS 预处理器呢? CSS 预处理...

  • web开发小部分单词

    Sass=scss编程 Sass 是css预处理器 css预处理器用编程思维写一些可以转成css的东西 优点:更加...

  • 为什么选择Sass而不是Less?

    什么是Sass和Less? Sass和Less都是属于CSS的预处理器,那什么是预处理器呢? CSS预处理器定义了...

  • sass入门指南

    很详细的sass入门指南,学习一下。原文sass入门指南css预处理器已经算不上一个新鲜的词了,当前比较有代表性的...

  • 很杂的笔记

    关于Sass Sass是什么? Sass是一个CSS预处理器 CSS预处理器是什么? 下面是我照着自己的理解下的内...

  • scripts+commonjs+gulp

    css预处理器 Sass https://www.sass.hk/ LESS Stylus Sass 嵌套 嵌套规...

  • sass

    css预处理器 Sass https://www.sass.hk/ LESS Stylus Sass 嵌套 嵌套规...

  • CSS预处理器入门介绍:Sass、Less 和 Stylus

    css 预处理器:Sass、Less 和 Stylus 【Sass】 扩展名:「 *.sass 」和「 *.scs...

  • css预处理器:sass

    Sass Sass简介Sass 是一种css预处理器,CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门...

  • sass核心知识点

    sass 核心知识点 1、什么是CSS预处理器,什么是Sass (1) CSS 预处理器用一种专门的编程语言,进行...

网友评论

    本文标题:CSS 预处理器-Sass入门

    本文链接:https://www.haomeiwen.com/subject/rplskttx.html