Sass 使用流程

最新推荐文章于 2024-01-30 09:30:00 发布

ZhaoYLi

最新推荐文章于 2024-01-30 09:30:00 发布

阅读量462

点赞数 2

分类专栏： Sass

本文链接：https://blog.csdn.net/miss_zxm/article/details/80174160

版权

Sass 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Sass (Syntactically Awesome StyleSheets)

Sass是对css的扩展，让 CSS 语言更强大、优雅。它允许你使用变量、嵌套规则、 mixins、导入等众多功能，并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好，同时也让你能够快速开始小型项目，特别是在搭配 Compass 样式库一同使用时。

特色

完全兼容 CSS3
在 CSS 语言基础上添加了扩展功能，比如变量、嵌套 (nesting)、混合 (mixin)
对颜色和其它值进行操作的{Sass::Script::Functions 函数}
函数库控制指令之类的高级功能
良好的格式，可对输出格式进行定制
支持 Firebug

使用Sass

1、Sass有两种扩展名
（1） .sass是一种sass新语法，跟css语法差别比较大，很难使用，跟stylus很像。
（2） .scss跟css语法很像，比较简单，是最流行的一套语法。

2、安装ruby
使用Sass需要先安装ruby，查看是否安装成功：ruby -v
ruby安装成功，会提供一个gem指令，跟 node 中的 npm 一样，是一个包管理工具，用gem -v查看：
这里写图片描述
然后安装Sass：gem install sass

查看是否安装成功：sass -v

3、配置中文注释
Sass默认不支持中文注释，所以我们要配置它
打开 D:\Ruby24-x64\lib\ruby\gems\2.4.0\gems\sass-3.5.6\lib\sass 目录，编辑engine.rb 文件，在 55 行，添加如下这行代码：
Encoding.default_external = Encoding.find('utf-8')
这里写图片描述
4、编译Sass

浏览器不认识sass，需要编译，有如下两种编译方式：
（1）、命令行编译：
这里写图片描述
编译结果：

sass sass文件 css文件 ：将sass的编译结果，输出到css文件中
这里写图片描述
编译结果：

sass sass文件 css文件配置：-c 避免输出缓存
--sourcemap=none ：避免输出 sourcemap 文件

备注：命令行编译可以快速的把sass文件编译成css文件，但是编译多个文件时成本较高，不适合投入生产。

（2）、工程化编译 —— gulp编译
首先将 gulp 及 gulp 的 sass 插件（gulp-ruby-sass）本地化：
在项目目录新建一个 node_modules 文件夹 —— 在命令提示符输入命令 npm link gulp 获取 gulp —— 继续输入命令 npm link gulp-ruby-sass 获取插件。
这里写图片描述

注意： sass这个插件有一个功能，可以用来获取文件，所以我们在使用它的时候，就不用再使用src方法获取文件了。参数就是文件的地址，返回值是文档流对象，可以使用 pipe 方法。

gulp编译实例：
新建一个HTML文件：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>gulp 编译</title>
        <link rel="stylesheet" type="text/css" href="dist/test.css" />
    </head>
    <body>
        <div> <h1>sass文件</h1> </div>
    </body>
</html>

新建 test.scss文件：

div{
    h1{
        color: gold;
        background: skyblue;
    }
}

新建 gulpfile.js 文件：

//引入模块
var gulp = require('gulp');
var rubySass = require('gulp-ruby-sass');
//创建编译任务
gulp.task('sass',function(){
    //编译sass
    //rubySass可以获取文件
    rubySass('test.scss')
    //编译输出到dest/test.css
    .pipe(gulp.dest('dist'))
})
//启动任务
gulp.task('default',['sass'])

使用命令 gulp 运行：
这里写图片描述

运行后项目目录结构：
这里写图片描述
运行结果：

ZhaoYLi

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Sass 使用流程

Sass (Syntactically Awesome StyleSheets)Sass是对css的扩展，让 CSS 语言更强大、优雅。它允许你使用变量、嵌套规则、 mixins、导入等众多功能，并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好，同时也让你能够快速开始小型项目，特别是在搭配 Compass 样式库一同使用时。特色完全兼容 CSS3 ...
复制链接

扫一扫