资讯专栏INFORMATION COLUMN

前端基础工作流:sass自动化编辑成css

W4n9Hu1 / 3424人阅读

摘要:目前提供了观察文件变化,自动将文件编译成的功能。但在有些机子上跟踪编译非常慢。如果想更顺手的完成更复杂的编译,就需要使用工具进行处理。启动提示打开编辑器编辑下文件,保存,查看下文件,已经编译好了。

目前sass提供了观察文件变化,自动将sass文件编译成css的功能。
但在有些机子上跟踪编译非常慢。使用不便。
如果想更顺手的完成更复杂的编译,就需要使用nodejs,gulp 工具进行处理。

Sass安装

环境ubuntu 16.04

sudo apt-get install ruby

sudo gem install sass

国内会报错,如下

sudo gem install sass
ERROR:  While executing gem ... (Gem::RemoteFetcher::FetchError)
Errno::ECONNRESET: Connection reset by peer - SSL_connect (https://api.rubygems.org/quick/Marshal.4.8/sass-3.4.22.gemspec.rz)

原因是国内和谐gem,解决方法是使用淘宝镜像如下

$ gem sources --add https://ruby.taobao.org/ --remove https://rubygems.org/
$ gem sources -l
*** CURRENT SOURCES ***
https://ruby.taobao.org
# 请确保只有 ruby.taobao.org

重新执行sudo gem install sass

nodejs安装

安装参考nodejs.org
npm访问慢的问题参考npm.taobao.org淘宝镜像

gulp安装

gulp 介绍

gulpjs.com
gulp中文网

gulp 安装参考gulp入门指南
简易步骤:
在项目更目录执行
npm install --save-dev gulp
*安装gulp-sass插件,详细说明gulp-sass
npm install gulp-sass

sass 转 css 操作流

示例项目目录结构

-node_modules   //node 模块
-scss           //编译前的scss文件
 --test.scss
-css            //编译后的css文件
 --test.css
--gulpfile.js   //gulp任务执行工具配置文件
--index.html

gulpfile.js文件内容

var gulp = require("gulp");
var sass = require("gulp-sass");

gulp.task("scss",function(){
    gulp.src("./scss/*.scss")  //这里是scss文件的目录
        .pipe(sass().on("error",sass.logError))
        .pipe(gulp.dest("./css"));  //这里是编译后css存放的目录
})

gulp.task("default",function(){
    gulp.watch("./scss/*.scss",["scss"]);  //在这里执行文件观察任务,发现变化执行上面定义好的 `scss`编译任务。
})

启动:
node_modules/.bin/gulp gulpfile.js
提示

[19:05:18] Using gulpfile ~/test/gulpfile.js
[19:05:18] Starting "default"...
[19:05:18] Finished "default" after 20 ms

打开编辑器编辑scss下test.scss文件,保存,查看css下test.css文件,已经编译好了。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/115215.html

相关文章

  • 关于sass、scss、less的概念性知识汇总

    摘要:而使用预处理器,提供缺失的样式层复用机制减少冗余代码,提高样式代码的可维护性。所以我们在实际项目中衡量预编译方案时,还是得想想,比起带来的额外维护开销,预处理器有没有解决更大的麻烦。也是成熟的预处理器之一,而且有一个稳定,强大的团队在维护。 这篇文章主要解答以下几个问题,供前端开发者的新手参考。 1、什么是Sass和Less? 2、为什么要使用CSS预处理器? 3、Sass和Less的...

    HmyBmny 评论0 收藏0
  • 关于sass、scss、less的概念性知识汇总

    摘要:而使用预处理器,提供缺失的样式层复用机制减少冗余代码,提高样式代码的可维护性。所以我们在实际项目中衡量预编译方案时,还是得想想,比起带来的额外维护开销,预处理器有没有解决更大的麻烦。也是成熟的预处理器之一,而且有一个稳定,强大的团队在维护。 这篇文章主要解答以下几个问题,供前端开发者的新手参考。 1、什么是Sass和Less? 2、为什么要使用CSS预处理器? 3、Sass和Less的...

    xuweijian 评论0 收藏0
  • Laravel学习笔记三-前端作流

    摘要:本节将学习是如何利用形成一套完整的前端工作流模式的。你也可以使用下面命令来强制安装所有模块,不管该模块之前是否安装过由于国内墙的原因,使用安装会非常缓慢,慢到想切,不过还好,我们可以使用淘宝提供的国内镜像进行下载。 本节将学习 Laravel 是如何利用 Sass, NPM, Gulp形成一套完整的前端工作流模式的。 一、句法强大的样式表Sass Sass 是一种可用于编写CSS的语言...

    liuchengxu 评论0 收藏0
  • Gulp入门教程

    摘要:本教程分为两个部分先讲解的使用及参数说明,后以一个实际项目案例作为演练。或自动监视文件变化并执行指定的任务。项目代码下载其他文献官方接口文档很多演示项目代码其它教程文章 Gulp介绍 Gulp是一个前端开发的自动化构建工具。前端开发往往需要把LESS/SCSS文件进行编译成CSS文件,JavaScript多文件合并成一个文件并压缩以及一些其他需要重复性操作的工作。而Gulp就是通过简单...

    levius 评论0 收藏0
  • 做一个合格的前端,gulp资源大集合

    摘要:承接前一篇做一个合格的前端,自动化构建工具入门教程故而整理了如下插件资源大全。接下来我会逐一开源观点网开发过程中的前后端技术,如全文索引自定义富文本编辑器图片上传压缩水印等等。 承接前一篇《做一个合格的前端,gulp自动化构建工具入门教程》故而整理了如下gulp插件资源大全。**【我的新作观点网:http://www.guandn.com (观点网是一个猎获新奇、收获知识、重在独立思考...

    Baoyuan 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<