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

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

Sass安装

环境ubuntu 16.04

  1. sudo apt-get install ruby

  2. 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文件,已经编译好了。


Vestin
Great!

For Freedom.

132 声望
15 粉丝
0 条评论
推荐阅读
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco24阅读 2.2k评论 3

你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan25阅读 1.7k评论 1

封面图
「彻底弄懂」this全面解析
当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在 哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性,会在 函数执行的过程中用到...

wuwhs17阅读 2.4k

封面图
反编译微信小程序获取小程序前端源码wxapkg
研究反编译的原因就是我自己辛苦了半个月写的小程序,忘记备份放在桌面,心急体验Win11系统 重装系统忘记备份源码,后悔莫及。 后来网上找了反编译的教程,反编译已经上线了的小程序 于是自己尝试了一下,真的可...

TANKING13阅读 10.1k评论 7

封面图
那些不用js也能实现的效果
本文首发于公众号:GitWeb,欢迎关注,接收首发推文本文列举几个不需要使用js也能实现的效果一、页面回到顶部回到顶部是页面开发中很常见的一个功能,一般的做法是对回到顶部组件做一个监听,当用户点击的时候,...

Winn11阅读 1.2k评论 6

封面图
Three.js 进阶之旅:全景漫游-初阶移动相机版
3D 全景技术可以实现日常生活中的很多功能需求,比如地图的街景全景模式、数字展厅、在线看房、社交媒体的全景图预览、短视频直播平台的全景直播等。Three.js 实现全景功能也是十分方便的,当然了目前已经有很多...

dragonir12阅读 1.5k

封面图
使用 CSS 渐变来实现波浪动画
之前看到coco的这样一篇文章: 纯 CSS 实现波浪效果!,非常巧妙,通过改变border-radius和不断旋转实现的波浪效果,有兴趣的可以去研究一下。这次尝试一下使用 CSS 渐变来实现这样一个效果,还可以用在文字背景...

XboxYan9阅读 474评论 2

封面图

For Freedom.

132 声望
15 粉丝
宣传栏