css脚本（SASS、SCSS、Less）和使用Gulp转换css

落日映苍穹つ 2023-07-08 02:42 5阅读 0赞

# CSS脚本 #

使用sass需要安装Ruby，或者gulp安装node-sass这个模块

*  **CSS** 指层叠样式表 (Cascading Style Sheets)。
 *  **Sass** (Syntactically Awesome StyleSheets)，后缀名为.sass，是由ruby语言编写的一款css预处理语言，它是基于ruby在服务器处理的。 Sass 是一款强化 CSS 的辅助工具，是对 CSS 的扩展，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、继承(extend)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。
 *  **SCSS** (Sassy CSS)，后缀名为 .scss。SCSS 是 Sass 3 引入新的语法，与原来的语法兼容，只是用\{ \}替代了原来的缩进。SCSS语法完全兼容 CSS3，并且继承了 Sass 的强大功能。
 *  **Less** 后缀名为 .less。与Sass类似，也是一款css预处理语言。与Sass不同的是，Less是基于Javascript，是在客户端处理的。Less 既可以在客户端上运行（支持IE 6+，Webkit，Firefox），也可以运行在 Node 服务端。

## SASS、SCSS、Less语法学习 ##

*  详细请到less中文网：http://lesscss.cn/
 *  详细请到sass中文网：https://www.sass.hk/

## 一 什么是Ruby ##

Ruby，一种为简单快捷的面向对象编程（面向对象程序设计）而创的脚本语言，

### 1 安装ruby ###

安装的时候最后一步全选

环境变量配置：如果在vscode中gem报错则需要找到C:/Ruby23-x64/bin复制路径，打开我的电脑属性添加到系统变量path中

### 2 gem 命令 ###

安装ruby之后会自带一个gem命令

安装完成后需测试安装有没有成功,运行CMD输入以下命令：

ruby -v//如安装成功会打印
    //ruby 2.6.3p62 (2019-04-16 revision 67580) [x64-mingw32]

因为国内网络的问题导致gem源间歇性中断因此我们需要更换gem源：

//1.删除原gem源
    gem sources --remove  https://rubygems.org/
    
    //2.添加国内gem源
    gem sources --add https://gems.ruby-china.com/
    
    //3.打印是否替      换成功
    gem sources -l

### 3 安装sass ###

需要安装这两个插件

*  gem install sass
 *  gem install compass

验证安装情况：

sass -v

#### (1) Compass是什么？ ####

简单说，Compass是Sass的工具库（toolkit）。

Sass本身只是一个编译器，Compass在它的基础上，封装了一系列有用的模块和模板，补充Sass的功能。它们之间的关系，有点像Javascript和jQuery、Ruby和Rails、python和Django的关系。

Compass是用Ruby语言开发的，所以安装它之前，必须安装Ruby。

### 4 使用 ###

#### (1) 单个文件转换为css ####

sass input.scss output.css
    /.目标sass文件到输出css文件
    sass ./sass/a.sass ./css/a.css

#### (2) 监听watch ####

不需要每次重新启动，自动检测

sass --watch  ./sass:./css//监视整个文件目录
    sass --watch

Ctrl+C跳出监视

# Gulp中使用CSS脚本 #

1.  yarn global add gulp@3 //安装全局gulp
2.  yarn add gulp@3//项目安装3 版本
3.  yarn add gulp-sass --save-dev //gulp安装在开发依赖
    
    安装依赖如果node-sass报错输入yarn config set sass\_binary\_site http://cdn.npm.taobao.org/dist/node-sass -g

## 一 不用插件写法 ##

在项目中创建gulpfile.js填写配置

//加载gulp模块
    var gulp=require("gulp");
    //定义了一个叫做a的任务，在终端中输入gulp a，可以执行该任务
    gulp.task("a",function(){ 
        console.log("aaa")
    });
    //如果每一个参数为default，在终端中输入gulp，即可执行该任务
    gulp.task("default",function(){ 
        console.log("888")
    })

//终端输入
    //执行默认
    gulp

## 二 使用Gulp插件 ##

安装都为开发依赖 `--save-dev`

yarn add XXXX --save-dev

1.  gulp-load-plugins 自动加载插件
2.  gulp-concat 合并文件
3.  gulp-uglify 压缩文件
4.  gulp-rename 重命名

在没有使用自动加载插件插件的时候用法

var gulp = require('gulp');
    var concat=require("gulp-concat");
    var uglify=require("gulp-uglify");
    var rename=require("gulp-rename");
    //......
    gulp.task("a",function(){ 
        gulp.src("./src/js/*.js")
        .pipe(concat("c.js"))
        .pipe(uglify())
        .pipe(rename("c.min.js"))
        .pipe(gulp.dest("./dist/"));
    });

使用后

var gulp=require("gulp");
    var plugins=require("gulp-load-plugins")();
    gulp.task("a",function(){ 
        gulp.src("./src/js/*.js")
        .pipe(plugins.concat("c.js"))
        .pipe(plugins.uglify())
        .pipe(plugins.rename("c.min.js"))
        .pipe(gulp.dest("./dist/"));
    });