Sass带来的变革

作者：大漠 日期：2014-11-17 点击：9455
Sass
SCSS
会员专栏

特别声明：小站对部分原创文章已开启付费阅读，并开通年费VIP通道，年费价格为 ¥365.00元。如果您喜欢小站的内容，可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法，欢迎发送邮件至: airenliao@gmail.com!(^_^)

接触Sass差不多有一个年头了，在这一年来的时间中，也花了不少心思在Sass的学习上。同时也让自己喜欢上了Sass,目前在自己的私人项目中，我一直都在使用Sass做为前端开发，用来处理CSS。其实，在W3cplus站点上，已经发布了近一百篇有关于Sass方面的教程(教程有自己的学习心得、有译文，也有其他同学的使用经验分享)。也自认自己是Sass在中国的推广者，其实我也更想做为Sass在中国的布道者，让更多的人了解他，学习他，使用他。

那么回到话题的正题中来，今天要说的是Sass带来的变革，其实标题有点浮夸，也可以当其是标题党吧。他是出自于自己在兄弟公司做分享的一份PPT。因为时常能碰到同学在问：

  • Sass是什么?
  • 怎么学习Sass？
  • 如何在项目中使用Sass？

等等一系列问题，其实在前面的教程中或多或少都有介绍，那么今天借此机会将前面所整理的教程、译文做一个系统的归纳吧，让有需要的同学能更好的学习和使用Sass。

Sass是什么？

Sass是"Syntactically Awesome StyleSheets"的简称。那么他是什么？其实没有必要太过于纠结，只要知道他是“CSS预处理器”中的一种即可，简单点说，Sass就是“CSS预处理器”，你可以称其是工具或者是语言。如果你实在想知道他是什么？可以看Sass官网上的一段描述。

Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly, particularly with the help of the Compass style library.

为什么选择Sass？

与Sass齐名的CSS预处理器还有LESS、Stylus等。这也引出一个激烈的讨论，Sass和LESS哪家技术强。而且这个讨论在很多论坛和平台都有出现过：比如2012年5月份Chris Coyier发表的《Sass vs LESS》一文，记得看文章后面的评论，因为评论的内容更精彩。

对于我个人为什么重新选择使用Sass，原因非常的简单，功能上来说他们都类似，也没有哪家比哪家强一说，但对于初学者，学习任何一门新技术，除了官网文档之外，希望有其他的教程或者资料，从这一点上来说，Sass相关的资料就非常的多。除此之外，使用Sass写的案例与框架也多。这就是我选择他的原因。如果你想先简单的了解Sass、LESS和Stylus有哪些不一样，再做出选择的话，可以看一篇2013年我在《程序员》杂志上发表的一篇文章《CSS预处理器——Sass、LESS和Stylus实践【未删减版】》。

扩展阅读

Sass功能与特性

Sass现在更新到3.4.7版本(写这篇文章时最新版本)，其实Sass有很多功能和特性是CSS无法匹敌的，比如：变量、继承、混合宏、占位符、逻辑判断、函数、@at-root、列表和map等等。这些都是Sass的基本功能，可以说掌握了这些功能，配合你自己的创造力，可以使用Sass做更多有意义的事情。

扩展阅读

Sass学习路线

学习Sass还是具有一定的成本的。这样说吧，他和CSS基本类似，说得难听一点，你把你的.css更换成.scss文件，这就是现成的Sass。但要真正懂Sass还是需要一定的时间的。在这里，我来聊聊我是怎么样学习Sass的，或者说我学习Sass的一个路线是什么样的。

我将学习Sass分为三个阶段。

初级阶段

初级阶段就是一个入门的过程，知道怎么使用Sass。在这个过程中主要包括以下几个部分：

  • 运行Sass环境
  • Sass安装
  • Sass语法
  • Sass编译
  • Sass调试

运行Sass的环境

Sass是基于Ruby开发的，所以要运行Sass都需要一个Ruby环境。但并不是说你要懂得Ruby，你只需要在你的电脑中安装一个Ruby环境即可。如果你使用的是Mac电脑，那么就不需要安装，如果你使用的是Win系统，那么需要先在电脑中安装Ruby。也正是因为这个原因，很多同学觉得Sass要依赖于Ruby环境，而放弃使用Sass。

至于如何安装Ruby，就不做过多阐述，因为现在的应用软件安装都是非常简单的，一路下一步即可。

扩展阅读

Sass安装

对于Sass安装来说是件非常简单的事情，只需要在你的命令终端输入一行命令即可：

gem install sass

提醒一下，在使用Mac的同学，可能需要在上面的命令加上sudo，才能正常安装：

sudo gem install sass

如果你是一位Sass发烧友，你也可以通过--pre参数来安装Sass开发版本，领略Sass的一些最新功能与特性：

gem install sass --pre

不过在天朝往往上面的命令让你无法正常实现安装，如果你碰到这样的事情，那么需要特殊去处理。可以到Rubygems网站上下载Sass安装包,然后在命令终端输入：

gem install <把下载的安装包拖到这里>

直接回车(Enter)即可安装成功。如果你不确认你的Sass是否安装成功，只需要输入命令：

sass -v

看到版本号就表示安装成功。

Sass语法

Sass语法规则有两种，一种是通过tab键控制缩进的语法规则(缩进要求非常严格)，这种语法对于熟悉Ruby的同学来说会非常的方便和喜欢。这种语法的Sass文件是以.sass后缀命名。另一种语法是SCSS，这是Sass的新的语法规则，他的外观和CSS的一模一样，文件后缀是.scss。如下所示：

//Sass语法
$width: 200px
.box
    width: $width

//SCSS语法
$width: 200px;
.box {
    width: $width;
}

来看个示意图：

Sass语法

正因为如此，有不少同学，使用的是Sass新的语法规则，而文件后缀依旧是.sass，这也就造成血案了，编译时说编译不出来。所以在此特别提醒新同学：.sass只能使用Sass老语法规则（缩进规则），.scss使用的是Sass新语法规则（类似CSS语法）。

上面只演示了最基础的语法规则，其实在定义混合宏，调用混合宏，他们都略有不同。对于前端人员，个人更建议使用SCSS语法风格，比较适应，也不会那么容易出错。

Sass编译

众所周知，到目前为止，各浏览器是无法直接解析.scss或者.sass文件。换句话说，在Web实际掉用当中，还是需要调用.css文件。这个问题也困扰了很多初学者，常常有人会问，使用Sass进行开发，那么是不是直接通过<link>引用.scss或.sass文件呢？那么这里告诉大家，在项目中还是引用.css文件，Sass只不过是做为一个预处理工具，提前帮你做事情，只有你需要的时候，他才能功效。

这样一来，在Sass开发之后，要使用写好的东西，让Web页面能调用，就得经过一个过程，这个过程就是Sass编译过程。Sass的编译有多种方法：

命令编译

如果你喜欢操纵你的命令终端，那么可以直接通过命令终端来对Sass进行编译，只需要命令终端输入：

sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

这是对一个单文件进行编译，如果想对整个项目里所有Sass文件编译成CSS文件，可以这样操作：

sass sass/:css/

上面的命令表示将项目中sass目录中所有.scss(.sass)文件编译成.css文件，并且这些CSS文件都放在css目录当中。

在实际编译过程中，你会发现上面的命令，只能一次性编译。每次修改保存.scss文件之后，都得得新执行一次这样的命令，如此操作太麻烦，其实还有一种方法，就是在编译Sass时，开启watch功能，这样只要你的代码进行任何修改，他都能自动监测到代码的变化，并且给你直接编译过来。

sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

命令编译就是这么的简单。当然，使用sass命令编译时，可以带很多参数。

Sass编译命令参数

GUI编译

如果平时工作中不太喜欢使用命令终端的同学，可以考虑使用GUI界面工具来对Sass进行编译。当然不同的GUI工具操作方法略有不同。在此也不一一对编译的界面工具做详细的介绍。对于GUI界面编译工具，目前较为流行的主要有：

自动化配置编译Sass

喜欢自动化研究的同学，应该都知道Grunt和Gulp这两个东东。如果您正在使用其中的任何一种，那么你也可以通过他们来配置，也可以完成Sass的编译。

//Grunt
module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        sass: {
            dist: {
                files: {
                    'style/style.css' : 'sass/style.scss'
                }
            }
        },
        watch: {
            css: {
                files: '**/*.scss',
                tasks: ['sass']
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default',['watch']);
}

//Gulp
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调试

Sass调试

Sass调试一直以来都是一件头痛的事情，使用Sass的同学都希望能在浏览器中直接调试Sass文件，能找到对应的行数。值得庆幸的是，现在要实现并不是一件难事了，只要你的浏览器支持"Sourcemap"功能即可。早一点的版本，需要在编译的时候添加--sourcemap参数：

sass --watch --scss --sourcemap style.scss:style.css

在3.3版本之上（我测试使用的版本是3.4.7），不需要添加这个参数也可以：

sass --watch style.scss:style.css

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

>>> Change detected to: style.scss
  write style.css
  write style.css.map

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

扩展阅读

如果掌握了上面提到的知识，我想你已具备Sass的初级水平。你会安装Sass、知道Sass语法、会编写Sass代码，也能编译Sass，还能调试Sass代码。但这仅仅是Sass的基础知识。如果还要深入，还是需要花不少时间去学习与实战的。

中级阶段

具有Sass初级阶段水平之后，你对Sass也有了基本的了解，也能用Sass去做一些简单的事情。如果要深入还是要继续往下学习的。接下来向大家简单介绍有关于Sass方面更有兴趣的东东。

Sass的基本功能

Sass功能和特性有很多，要把所有东西介绍完，我想完全可以写一本书了，那么在这里主要向大家介绍一些Sass最基本、最常用的特性：

  • 变量
  • 混合宏@mixin
  • 继承
  • 占位符%placeholder
  • 嵌套
  • 运算符
  • 选择符&
  • 列表$list
  • 函数@function
  • map
  • 控制命令
  • @at-root
变量

先来看一张图

Sass变量

上图非常清楚告诉了大家，Sass的变量包括三个部分：

  • 声明变量的符号$
  • 变量名称
  • 赋予变量的值

定义变量，就可以在代码中调用了：

//SCSS
$color: orange !default;

.block {
  color: $col
剩余80%内容付费后可查看

如需转载，烦请注明出处：https://www.w3cplus.com/preprocessor/sass-bring-change.html

如果文章中有不对之处，烦请各位大神拍正。如果你觉得这篇文章对你有所帮助，打个赏，让我有更大的动力去创作。(^_^)。看完了？还不过瘾？点击向作者提问！

赏杯咖啡，鼓励他创作更多优质内容！
返回顶部