当前位置:Gxlcms > html代码 > Sass简介,安装环境,Sass的语法格式及编译调试_html/css_WEB-ITnose

Sass简介,安装环境,Sass的语法格式及编译调试_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:53人阅读

什么是 CSS 预处理器?

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

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

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

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

什么是 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 ,放两个案例在这慢慢研究

    人气教程排行