你的位置:首页 > 网页设计

[网页设计]Sass简介,安装环境,Sass的语法格式及编译调试


什么是 CSS 预处理器?

定义:CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。

在 CSS 中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性,可以让你的 CSS 更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处。

CSS 预处理器语言,比如说:
Sass(SCSS)
LESS
Stylus
Turbine
Swithch CSS
CSS Cacheer
DT CSS

到目前为止,在众多优秀的 CSS 预处理器语言中就属 SassLESS和 Stylus 最优秀

 

 

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

 

 

Sass 和 SCSS 有什么区别?
Sass 和 SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点:
1、文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名
2、语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
Sass 语法

1 $font-stack: Helvetica, sans-serif //定义变量2 $primary-color: #333 //定义变量3 body4   font: 100% $font-stack5   color: $primary-color

SCSS 语法

1 $font-stack: Helvetica, sans-serif;2 $primary-color: #333;3 body {4   font: 100% $font-stack;5   color: $primary-color;6 }

编译出来的 CSS

1 body {2   font: 100% Helvetica, sans-serif;3   color: #333;4 }

 

 

 

Sass/SCSS 和纯 CSS 写法差很多吗?
Sass 和 CSS 写法有差别:
Sass 和 CSS 写法的确存在一定的差异,由于 Sass 是基于 Ruby 写出来,所以其延续了 Ruby 的书写规范。在书写 Sass 时不带有大括号和分号,其主要是依靠严格的缩进方式来控制的。如:
Sass写法:

body  color: #fff  background: #f36

而在 CSS 我们是这样书写:

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

SCSS 和 CSS 写法无差别:
SCSS 和 CSS 写法无差别,这也是 Sass 后来越来越受大众喜欢原因之一。简单点说,把你现有的“.css”文件直接修改成“.scss”即可使用。

 

 

 

Sass安装(windows版)

在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包,Ruby 的官网(http://rubyinstaller.org/downloads)下载对应需要的 Ruby 版本。

Ruby 安装文件下载好后,可以按应用软件安装步骤进行安装 Ruby。在安装过程中,建议将其安装在 C 盘下,在安装过程中选择第二个选项(不选中,就会出现编译时找不到Ruby环境的情况),如下图所示:

Ruby 安装完成后,在开始菜单中找到新安装的 Ruby,并启动 Ruby 的 Command 控制面板,如下图所示:

当你的电脑中安装好 Ruby 之后,接下来就可以安装 Sass 了。

  通过命令安装 Sass

打开电脑的命令终端,输入下面的命令:

gem install sass

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

sudo gem install sass

 

 

查测 Sass 及更新

如何确认自己是否安装 Sass 成功了呢?

sass -v

更新 Sass

gem update sass

卸载(删除)Sass

gem uninstall sass

 

 

 

Sass 编译

使用 Sass 进行开发在项目中还是引用“.css”文件,Sass 只不过是做为一个预处理工具,提前帮你做事情,只有你需要时候,他才有攻效。

Sass 的编译有多种方法

  • 命令编译
  • GUI工具编译
  • 自动化编译

 

命令编译

命令编译是指使用你电脑中的命令终端,通过输入 Sass 指令来编译 Sass。这种编译方式是最直接也是最简单的一种方式。因为只需要在你的命令终端输入:

单文件编译:

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

多文件编译:

sass sass/:css/

缺点及解决方法:

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

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

例:

单文件转换命令

sass style.scss style.css

单文件监听命令

sass --watch style.scss:style.css

文件夹监听命令

sass --watch sassstyle:stylesheets

我们一般常用的有  --style  ,  --sourcemap  , --debug-info  等。

sass --watch style.scss:style.css --style compactsass --watch style.scss:style.css --sourcemapsass --watch style.scss:style.css --style expanded --sourcemapsass --watch style.scss:style.css --debug-info

 --style  表示解析后的css是什么格式,有四种取值分别为: nested 嵌套输出方式, expanded 展开输出方式, compact 紧凑输出方式, compressed 压缩输出方式。

 --sourcemap 表示开启sourcemap调试。开启sourcemap调试后,会生成一个后缀名为.css.map文件。

 --debug-info 表示开启debug信息,升级到3.3.0之后因为sourcemap更高级,这个debug-info就不太用了。

 

四种style生成后的css:

 1 // nested 2 #main { 3  color: #fff; 4  background-color: #000;  5 } 6  #main p { 7   width: 10em;  8 } 9 .huge {10  font-size: 10em;11  font-weight: bold;12  text-decoration: underline;13 }14 // expanded15 #main {16  color: #fff;17  background-color: #000;18 }19 #main p {20  width: 10em;21 }22 .huge {23  font-size: 10em;24  font-weight: bold;25  text-decoration: underline;26 }27 // compact28 #main { color: #fff; background-color: #000; }29 #main p { width: 10em; }30 .huge { font-size: 10em; font-weight: bold; text-decoration: underline; }31 // compressed32 #main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}

 

 

GUI编译Sass,我用的是koala。

  1. Koala (http://koala-app.com/)
  2. Compass.app(http://compass.kkbox.com/)
  3. Scout(http://mhs.github.io/scout-app/)
  4. CodeKit(https://incident57.com/codekit/index.html)
  5. Prepros(https://prepros.io/)

相比之下推荐使用以下两个:

  • Koala (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html) 
  • CodeKit (http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)
图片 
koala工具  http://koala-app.com/index-zh.html
sass文件需要以.scss来结尾。创建完成需要图片
把css文件拖到软件中去,这样就可以将sass转化成css了
sass不支持中文
需要在koala => rubygems => sass => lib => sass => engine.rb
engine.rb打开加入一句Encoding.default_external = Encoding.find('UTF-8')
图片 
sass配置,输出一般用展开的形式就可以图片

 

 

自动化编译

 

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

 1 module.exports = function(grunt) { 2   grunt.initConfig({ 3     pkg: grunt.file.readJSON('package.json'), 4     sass: { 5       dist: { 6         files: { 7           'style/style.css' : 'sass/style.scss' 8         } 9       }10     },11     watch: {12       css: {13         files: '**/*.scss',14         tasks: ['sass']15       }16     }17   });18   grunt.loadNpmTasks('grunt-contrib-sass');19   grunt.loadNpmTasks('grunt-contrib-watch');20   grunt.registerTask('default',['watch']);21 }

 

2、Gulp 配置 Sass 编译的示例代码

 1 var gulp = require('gulp'); 2 var sass = require('gulp-sass'); 3  4 gulp.task('sass', function () { 5   gulp.src('./scss/*.scss') 6     .pipe(sass()) 7     .pipe(gulp.dest('./css')); 8 }); 9 10 gulp.task('watch', function() {11   gulp.watch('scss/*.scss', ['sass']);12 });13 14 gulp.task('default', ['sass','watch']);

没用过Grunt 、Gulp ,放两个案例在这慢慢研究