Sass初接触

爱钓鱼的老毕登
366 阅读3分钟

Sass是CSS预处理器之一，它能让你更好的、更轻松的工作。这个系列教程主要适合前端开发人员，能帮助前端开发人员快速的掌握Sass，并且直接运用于实际项目当中。

Sass 作为成熟、稳定、强大的 CSS 扩展语言，被越来越多前端工程师所青睐。Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言，它诞生于2007年，是最大的成熟的 CSS 预处理语言。最初它是为了配合 HAML（一种缩进式 HTML 预编译器）而设计的，因此有着和 HTML 一样的缩进式风格。

由于sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby，具体安装方式请自行前往www.ruby-lang.org根据自己系统安装相应的版本，因为小key的电脑是windows系统，下面介绍在windows环境中安装Sass。

安装好ruby后，在开始菜单栏下启动：Start Command Prompt with ruby，在命令中输入：

gem install sass

当有如下显示即表示安装成功：

Successfully installed sass-3.7.4

当然也可以通过如下方式查看是否安装成功：

sass -v    
//Ruby Sass 3.7.4

你也可以更新你的Sass：

gem update sass

这样安装就成功了。 Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：

  • 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名

  • 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

具体事例可以网查。这里暂时不做介绍。

因为 Sass 开发之后，要让 Web 页面能调用 Sass，这个过程就称之为 Sass 编译过程。Sass 的编译有多种方法：

  • 命令编译

  • GUI工具编译

  • 自动化编译

命令行编译：

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

我们也可以用 --watch方式来完成修改编辑代码，不必重新执行编译命令，而是自动监测到代码的变化，并且给你直接编译出来，例如：

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

GUI工具编译：（这里仅介绍比较流行的几种 GUI 界面编译工具）

1.Koala (koala-app.com/)

2.Compass.app（compass.kkbox.com/）

3.Scout（mhs.github.io/scout-app/）

4.CodeKit（incident57.com/codekit/ind…

5.Prepros（prepros.io/）

自动化编译：（借鉴于慕课网作者--大漠）

1.Grunt 配置 Sass 编译的示例代码：

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']);
}

2.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中，使用$声明变量，例如：

$color: orange !default;//定义全局变量
.block {
  color: $color;//调用全局变量
}
em {
  $color: red;//定义局部变量
  a {
    color: $color;//调用局部变量
  }
}
span {
  color: $color;//调用全局变量
}

css的结果：

.block {
  color: orange;
}
em a {
  color: red;
}
span {
  color: orange;
}

如果值后面加上!default则表示默认值。

当然，sass的基本特性还包括嵌套、继承、占位符、混合宏、插值、数据类型等，将在下一文章中出现。

avatar
文章
阅读
粉丝