欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

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

程序员文章站 2022-05-23 10:26:53
...
什么是 CSS 预处理器？

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

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

CSS 预处理器语言，比如说：
Sass（SCSS）
LESS
Stylus
Turbine
Swithch CSS
CSS Cacheer
DT CSS

到目前为止，在众多优秀的 CSS 预处理器语言中就属 Sass、LESS和 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 /style.scss:/style.css

    多文件编译：

    sass sass/:css/

    缺点及解决方法：

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

    sass --watch /style.scss:/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 ，放两个案例在这慢慢研究

    相关标签： Sass简介 安装环境，Sass的语法格式及编译调试

    上一篇： 电子商务网站上的常用的js放大镜效果_图象特效

    下一篇： DIV+CSS实操七：中文系内容模块控制文本不换行和超出指定宽度后用省略号代替_html/css_WEB-ITnose

    推荐阅读