天道酬勤,学无止境

Sass development workflow issues

I've been trying to adopt Sass into my development workflow. I do primarily front-end development and as such, I am updating stylesheets quite frequently. After endless searching, I have yet to find the answer to what I feel should be a simple question.

I use both Coda and Textmate, so a solution for either would suffice. When developing locally, I open the terminal, get my .scss file watched, then go to town. I save my .scss file, it happily updates my .css file... and then I'm left with the slight annoyance of having to manually select the .css and publish it to the remote server.
Its not the end of the world but having to pause my usual dev workflow to manually upload a file I'm not actively in is becoming a nuisance. In Coda, it doesn't detect when a file has been updated outside of Coda, so it isn't marked for publishing. Its driving me crazy. I just need a way to save the .scss file and have the .css file easily/automatically uploaded to the remote server. Any help would be greatly appreciated!

标签

评论

The typical way Sass is used is to design on your local computer while using Sass, and to only upload the CSS (and probably the Sass as well) to the server once you're finished. Another alternative would be to run sass --watch on the server so that it compiles the uploaded Sass files.

I have had a rake task that calls rsync for this kind of cases. That still needs to be run each time but because it uses rsync only the changed files are moved. Now, while reading this I got an idea that shouldn't there be 'rsync watch' somewhere and indeed there seems to be: http://code.google.com/p/lsyncd/

Here's an interesting approach I just read about, installing compass into a small local ruby env, inspired by python virtualenv: http://rhodesmill.org/brandon/2011/adding-compass/

YMMV (I haven't even tried this myself).

The Sublime SFTP/FTP Plugin can monitor and auto-upload the .css output file whenever it's updated by the SCSS compiler.

  1. Map your project directory to your server
  2. Check it's woking correctly by browsing remote
  3. Right click on your .css output file, and choose 'Monitor File (Upload on External Save)'
  4. Keep the file's tab open in Sublime to ensure it stays monitored/uploaded.

For extra points, have a look at Browsersync or LiveReload.

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • What is workflow in Yeoman to work with Sass files?
    I try to use yeoman but I don't know how to use my own sass files with it. With grunt server Sass files are watched and compiled into .tmp/styles/ But there is no reference to the compiled stylesheet, except <link rel="stylesheet" href="styles/main.css"> So, what is the recommended way to use the compiled sass files in index.html during development? E.g. grunt server, if I change my style app/styles/my.sass into .tmp/styles/my.css, this is overwritten and it is outside the server (localhost:9000). Therefore, it is impossible to link it in index.html. With grunt build is everything within main
  • Yeoman 中处理 Sass 文件的工作流程是什么?(What is workflow in Yeoman to work with Sass files?)
    问题 我尝试使用 yeoman,但我不知道如何使用我自己的 sass 文件。 和 grunt server Sass文件被监视并编译成 .tmp/styles/ 但是没有引用编译后的样式表,除了<link rel="stylesheet" href="styles/main.css"> 那么,在开发过程中使用 index.html 中编译好的 sass 文件的推荐方式是什么? 例如grunt server ,如果我将样式app/styles/my.sass为.tmp/styles/my.css ,这将被覆盖并且它在服务器之外(本地主机:9000)。 因此,不可能在index.html链接它。 使用grunt build是main.css中的所有内容包括my.sass但在开发过程中我不知道如何在index.html使用我自己的 sass 文件。 你能给我举个简单的例子吗? 它是默认的 yeoman 安装。 我这样做了: yo angular test 我添加了app/styles/style.sass grunt server将style.sass编译成.tmp/styles/style.css 现在我不知道如何在 html 中包含style.css (对不起,这可能是一个愚蠢的问题,但我也是自耕农和咕噜声的新手) 这是来自 yeoman 的 Gruntfile.js: 'use
  • SASS/TFS 最佳实践(SASS/TFS best practice)
    问题 我让我的工作场所同意使用 SASS/Compass,我们在 ASP.NET MVC3 中使用 TFS 服务器。 我担心的是,当我们三个前端开发人员同时在同一个站点上工作时,编写 SASS 会导致问题。 有没有其他人有使用 SASS 和 TFS 的工作流程经验? 你遇到了什么样的问题? 你是如何解决它们的? 建议将不胜感激 回答1 我建议不要将生成的 css 文件检查到源代码管理中,而是使用 mvc4 中的捆绑功能以及 sass nuget 包在服务器上生成 css 文件。 这样,当您获得最新版本或签入时,您无需处理合并 css 文件的问题,它还可以解决您在打开独占签出时遇到的一些麻烦。 还要确保启用缩小设置,SassAndScssSettings 上似乎有一个 UseNativeMinification 属性,它是从 webconfig bundleTransformer/sassAndScss 创建的
  • Gulp-webapp running BrowserSync and PHP
    My main goal here is to adapt Yeoman's gulp-webapp development workflow to run PHP. Specifically, I want to be able to use gulp-php-connect with multiple base directories (for the compiled CSS from Sass) and routes (for Bower dependencies), if that's even possible. I'm able to run PHP with Gulp using the gulp-connect-php plugin, like this: gulp.task('connect-php', function() { connectPHP.server({ hostname: '0.0.0.0', bin: '/Applications/MAMP/bin/php/php5.5.3/bin/php', ini: '/Applications/MAMP/bin/php/php5.5.3/conf/php.ini', port: 8000, base: 'dev' }); }); However, I'd like to take advantage of
  • SASS/TFS best practice
    I got my workplace to agree to using SASS/Compass and we work in ASP.NET MVC3 with a TFS server. My concern is when the 3 of us front end developers are working on the same site at the same time writing SASS it's going to cause issues. Does anyone else have workflow experience using SASS and TFS? What kind of issues did you run into? How did you solve them? Suggestions would be very appreciated
  • 【学习笔记】Part2·前端工程化实战--开发脚手架及封装自动化构建工作流(三、自动化构建 -- 主Grunt)
    【学习笔记】Part2·前端工程化实战–开发脚手架及封装自动化构建工作流(一、工程化概述) 【学习笔记】Part2·前端工程化实战–开发脚手架及封装自动化构建工作流(二、脚手架工具) 【学习笔记】Part2·前端工程化实战–开发脚手架及封装自动化构建工作流(三、自动化构建 – 主Grunt) 【学习笔记】Part2·前端工程化实战–开发脚手架及封装自动化构建工作流(三、自动化构建 – 主Gulp) 自动化构建 -- 主Grunt 自动化构建简介自动化构建初体验常用的自动化构建工具Grunt 的基本使用Grunt 标记任务失败Grunt 的配置方法Grunt 多目标任务Grunt 插件的使用Grunt 常用插件及总结 自动化构建简介 自动化构建,是前端工程化当中一个非常重要的组成部分。 自动化:通过机器代替手工完成一些工作,构建:转换 - 把一个东西转换成另外一个东西 开发行业的自动化构建: 把我们开发阶段写出来的源代码,自动化的转换成生产环境中可以运行的代码或者程序。 一般我们把这个转换的过程称为自动化构建工作流。 作用就是让我们脱离运行环境兼容带来的种种问题,在开发阶段使用一些提高效率的语法、规范和标准。 最典型的应用场景就是我们在去开发网页应用时,我们就可以使用 ECMAScript Next 最新标准去提高编码效率和质量,利用 SASS 和 Less 去增强 CSS
  • SASS 如何帮助我开发响应式网页设计?(How can SASS help me develop responsive web designs?)
    问题 我多年来一直使用 CSS 进行设计,但我现在才刚刚学习如何使用 SASS。 这是一个非常初学者的问题,所以请多多包涵。 我开始研究 SASS 的原因是因为我想开发一个响应式网页设计,但希望有一种比手动为每个屏幕尺寸制作不同样式表更好的方法。 我相信原则上,像 SASS 这样的 CSS preprossesor 应该有助于解决这个问题......但目前我不明白如何。 如果我有一个 id 为#squishable的 div,在大屏幕上我希望它的宽度为 1000 像素,在小屏幕上的宽度为 100 像素,但在这两种情况下都是红色背景,我想我会做点什么像这样: $color = red; #squishable { backgorundcolor: $color; } @media only screen and (min-width : 321px) { #squishable { width:100px; } } @media only screen and (min-width : 1824px) { #squishable { width:1000px; } } 但是,我不确定这种方法是否比仅使用 CSS 更有优势。 也许作为一个例子,它太简单了。 但是,在任何情况下,我都看不出我会用 SASS 做些什么不同的事情来让响应式网页设计的代码变得更容易。 这就是它的全部吗?
  • NPM 的 Autoprefixer 错误(✖ 插件错误:找不到模块)(Autoprefixer errors with NPM (✖ Plugin Error: Cannot find module ))
    问题 所以目前我在使用 autoprefixer 时遇到了麻烦。 我已经将 postcss-cli 和 autoprefixer 下载到 --save-dev 和 -g 当我运行这样的命令时: postcss ../../../htdocs/css/workflow/homepage-announcements.css -o ../../../htdocs/css/workflow/homepage-announcements.css 工作正常,输出为: ✔ 完成 ../../../htdocs/css/workflow/homepage-announcements.css (25ms) 现在我已经使用了--use autoprefixer一个错误被抛出。 下面的命令。 postcss --use autoprefixer ../../../htdocs/css/workflow/homepage-announcements.css -o ../../../htdocs/css/workflow/homepage-announcements.css 错误信息: ✖ 插件错误:找不到模块“../../../htdocs/css/workflow/homepage-announcements.css” 我已经尝试了一切,但仍然没有解决方案:( { "name": "homepage
  • webpack build css rules have different order then in development
    I am not sure if this is a webpack issue, vue-loader for webpack issue or just something that I am doing wrong. When I am running npm run build to build a distribution for my Vue.js application the CSS rules applied in the dist app are in different order then in my development environment thus my CSS overrides are different and app doesn't render right... Here is demonstration for one element: npm run dev - proper render npm run build - improper render UPDATE: added webpack config files webpack.base.conf.js var path = require('path') module.exports = { entry: { app: './src/main.js' }, output:
  • Gulp-webapp运行BrowserSync和PHP(Gulp-webapp running BrowserSync and PHP)
    问题 我的主要目的是使Yeoman的gulp-webapp开发工作流程适应运行PHP。 具体来说,我希望能够与多个基本目录(对于来自Sass的已编译CSS)和路由(对于Bower依赖项)一起使用gulp-php-connect ,如果可能的话。 我可以使用gulp-connect-php插件在Gulp中运行PHP,如下所示: gulp.task('connect-php', function() { connectPHP.server({ hostname: '0.0.0.0', bin: '/Applications/MAMP/bin/php/php5.5.3/bin/php', ini: '/Applications/MAMP/bin/php/php5.5.3/conf/php.ini', port: 8000, base: 'dev' }); }); 但是,我想利用gulp-webapp出色的但很纠结的开发工作流程体系结构,该体系结构依赖于BrowserSync,Sass编译器(将.css文件编译为.tmp文件夹进行开发),自动前缀和使用了许多其他有用的插件。 这是我想适应使用gulp-connect-php或任何其他PHP的部分: gulp.task('serve', ['styles'],function () { browserSync({ notify: false
  • 前端自动化构建
    前端自动化构建 Grunt基本使用Grunt标记任务失败Grunt的配置选项方法Grunt多目标任务Grunt插件的使用Grunt常用的插件以及总结 GulpGulp的基本使用Gulp的组合任务Gulp中的异步任务的三种方式构建过程核心的工作原理 GulpGulp案例-样式编译脚本编译页面模版编译图片和文字文件转换其他文件及文件清除自动加载插件热更新开发服务器监视变化以及构建优化useref文件引用处理文件压缩重新规划构建过程补充 自动化转换工作流,作用是为了脱离运行环境兼容带来的问题 开发阶段使用一些提高效率的语法、规范和标准 常用的自动化构建工具, grunt gulp fis Grunt 基本使用 mkdir sample-grunt sudo yarn init --yes sudo yarn link 新建入口文件gruntfile.js //grunt的入口文件,用于定义一些要grunt自动执行的任务 //需要导出一个函数,此函数接受一个形参,内部提供一些创建任务时需要的API module.exports = grunt => { //注册任务 指定任务名字,指定任务函数,任务发生时自动执行的函数 //yarn grunt foo grunt.registerTask('foo', ()=>{ console.log('hello grunt') }) //yarn
  • 用javascript重新加载CSS样式表(Reload CSS stylesheets with javascript)
    问题 我想通过javascript重新加载html页面中的所有CSS样式表,而不重新加载页面。 我仅在进行开发以反映CSS更改而无需始终刷新页面时才需要这样做。 一个可能的解决方案是使用javascript将css hrefs添加一个?id=randomnumber randomnumber后缀,但是我不想这样做。 我想以某种方式重新加载样式表,而不更改其url,浏览器将决定是否需要加载该CSS的新版本(如果服务器响应304 - Not modified )。 如何做到这一点? 回答1 用简单的Javascript: var links = document.getElementsByTagName("link"); for (var x in links) { var link = links[x]; if (link.getAttribute("type").indexOf("css") > -1) { link.href = link.href + "?id=" + new Date().getMilliseconds(); } } 在jQuery中: $("link").each(function() { if $(this).attr("type").indexOf("css") > -1) { $(this).attr("href", $(this).attr(
  • webpack 构建 css 规则的顺序与开发中的顺序不同(webpack build css rules have different order then in development)
    问题 我不确定这是一个 webpack 问题,是 webpack 问题的 vue-loader 还是我做错了什么。 当我运行npm run build为我的 Vue.js 应用程序构建一个发行版时,在 dist 应用程序中应用的 CSS 规则与在我的开发环境中的顺序不同,因此我的 CSS 覆盖不同,应用程序无法正确呈现...... 这是一个元素的演示: npm run dev - 正确渲染 npm run build - 不正确的渲染 更新:添加了 webpack 配置文件 webpack.base.conf.js var path = require('path') module.exports = { entry: { app: './src/main.js' }, output: { path: path.resolve(__dirname, '../dist/static'), publicPath: '/static/', filename: '[name].js' }, resolve: { extensions: ['', '.js', '.vue'], alias: { 'src': path.resolve(__dirname, '../src') } }, resolveLoader: { root: path.join(__dirname, 'node
  • 编译SCSS时默认导入常用模块(Import common modules by default when compiling SCSS)
    问题 我有几个模块包含诸如border-radius 、 $btnBgColor 、 up-arrow 。 大多数其他模块需要在一处或另一处import它们,所以我想知道是否可以在SCSS编译器级别import它们,以便我可以像使用内置工具一样使用这些常用工具。 我使用的 SCSS 实现是 pyscss。 Scss编译器构造函数接受一个scss_files参数,我认为该参数可用于预导入某些文件,因此我尝试了以下操作: compiler = scss.Scss(scss_files={path: source}) compiler.compile("a { background: $btnBgColor; }") 这没有用。 回答1 是的,这确实是可能的,事实上已经有一个成熟的解决方案。 它被称为指南针。 关于什么是指南针有很多含糊不清的地方,这是我解决它的一种非规范尝试。 指南针是同一个名称下的三个不同的东西: 创建可重用 SASS 模块的标准,就像您想要的那样。 这些模块被称为“指南针扩展”。 Compass 扩展基本上是以某种方式组织的 SASS 代码片段,作为 Ruby gem 分发。 它们还可以包含用于引入自定义 SASS 函数的 Ruby 代码。 用于编译 SASS 并支持这些扩展的compass命令行工具。 请注意,它只是原始 SASS 编译器的包装器
  • 去除重复:自动化构建工作流
    文章内容输出来源:拉勾大前端高薪训练营 开发脚手架及封装自动化构建工作流 工程化概述 工程化的定义和主要解决的问题 全副武装:通过工程化提升战斗力。 问题1: 想要使用ES6+新特性,但是兼容有问题。 问题2: 想要使用Less/Sass/PostCSS增强CSS的编程性但是运行环境不能直接支持。 问题3: 想要使用模块化的方式提高项目的可维护性但运行环境不能直接支持。 问题4: 部署上线前需要手动压缩代码和资源文件。 问题5: 部署过程需要手动上传代码到服务器。 问题6: 多人协作开发时,无法硬性统一大家的代码风格。 问题7: 从仓库中pull回来的代码质量无法保证。 问题8: 部分功能开发时需要等待后端服务接口提前完成。 问题归类 传统语言或语法的弊端。无法使用模块化/组件化。重复的机械式工作。代码风格统一、质量保证。依赖后端服务接口支持。整体依赖后端项目。 一个项目过程中工程化的表现。 一切以降本增效、质量保证为目的的手段都属于☛工程化☚ 一切重复的工作都应该被自动化。 创建项目 创建项目结构。创建特定类型文件。 编码 格式化代码检验代码风格编译/构建/打包 预览/测试 Web Server/MockLive Reloading/HMRSource Map 提交 Git HooksLint-staged持续集成 部署 CI/CD自动发布 工程化 ≠ 某个工具
  • 前端 自动化构建 入门及原理
    自动化构建简介 今天请假肝学习 周三. 把一些重复的工作机械化和一些不被支持的新特转化,以及利用其它高效工具进行开发。 自动化构建初体验 scss也是一种自动化构建,帮我们自动转换成原始css,但也要重复执行命令,安装 npm install -g sass 我们可以用npm script解决这些问题 npm script 使用 package中新增一个对象 先安装下面这个,用于启动一个测试服务器 yarn add browser-sync --dev package中添加 启动成功 我们要在这个服务器启动前设置样式,有个preserve之前的属性 添加变动监听变化 ,自动编译 因为加了watch命令行会一种占用着,我们需要启动多个任务去解决这个问题,先安装下面这个 yarn add npm-run-all --dev build监听scss文件的变化去编译 browser-sync 监听文件变动去刷新浏览器 可以一起运行了 这样就可以刷改完后就不需要手动刷新浏览器获取最新的代码了(vue cli应该也是这个原理) { "name": "my-web-app", "version": "0.1.0", "main": "index.js", "author": "zce <w@zce.me> (https://zce.me)", "license": "MIT", "scripts
  • 您如何配置 Webpack 开发服务器以在通过不同的服务器运行站点的其余部分时为特定文件夹提供服务?(How do you configure a Webpack dev server to serve a specific folder while running the rest of the site through a different server?)
    问题 一些快速背景: 我公司的站点运行 CMS,由 CMS 处理所有路由。 没有 html 文件,只有 razor 文件 (.cshtml)。 虽然从头开始重做网站是我更喜欢做的,但这不是一种选择,所以我试图通过逐页将 vue.js 与 webpack 开发工作流程相结合,慢慢地使网站现代化基础。 我花了大量时间设置 webpack,使其只能处理在 /dist/ 文件夹中找到的文件 - 其他所有内容都通过 http://my.server/ 提供服务,并由 CMS 和后端处理。 通过反复试验,我设法在 /dist/ 文件夹中获取 webpack-dev-server 服务文件,同时允许服务器的其余部分提供其他所有内容(通过 http://my.server/)。 不幸的是,这仅在 webpack-dev-server 部分的文件路径特别引用“http://localhost:8080/”时才有效,这显然是不可接受的。 开发环境代码必须和生产环境代码完全一样,所以<script src="http://localhost:8080/dist/build.js"></script>简直不能接受。 但是,如果我简单地编写<script src="/dist/build.js"></script>服务器<script src="/dist/build.js"></script>其解析为
  • conflicting sass / compass versions
    I've inherited a project and am having problems setting up the sass/compass workflow. Google search didn't yield any useful info on this. I've got the following: $ cat /etc/*-release DISTRIB_ID=LinuxMint DISTRIB_RELEASE=15 DISTRIB_CODENAME=olivia DISTRIB_DESCRIPTION="Linux Mint 15 Olivia" NAME="Ubuntu" VERSION="13.04, Raring Ringtail" ID=ubuntu ID_LIKE=debian PRETTY_NAME="Ubuntu 13.04" VERSION_ID="13.04" $ ruby --version ruby 1.9.3p194 (2012-04-20 revision 35410) [x86_64-linux] $ gem list *** LOCAL GEMS *** breakpoint (2.4.0) celluloid (0.15.2) chunky_png (1.2.9, 1.2.8) color-schemer (0.2.7)
  • 前端代码工作流
    编辑器选择 在刚接触前端的时候,我使用的编辑器是sublime。主要特点是轻量,缺点就是安装插件的时候过程比较麻烦,而且代码提示做的也不够好;后来听说webstrom这个地表最强编辑器功能很强大,就尝试着使用这个编辑器。webstrom给我的感觉是就功能很强大,但是很臃肿,软件包很大。实际上我用到编辑器的功能就几个,但是webstrom给我提供了一大堆功能。主要还是webstrom这东西太吃内存了,电脑性能支撑不起来,所以后面使用了一段时间就放弃了;后来有同学给我推荐了vscode这个编辑器。发现这个编辑器也很轻量,而且提供了很多插件给你选择安装,最重要的是vscode是免费的(虽然sublime也是免费的),在后来的工作中,我一直都是使用vscode的。 代码规范 刚学前端的时候还有刚毕业出来的那一年,我其实是不怎么关注代码规范这方面的东西,基本都是代码写完了,然后在编辑器中来一个右键-格式化文档,遵循的原则就是能用能看就行了。其实中间有一段时间我是有尝试过去使用eslint这些代码规范化的工具的,但是那时候我就是个小白,eslint报错或者编辑器哪里提示格式不规范,我都是手动一个地方一个地方去修正的,连eslint --fix这些命令都不知道的,更别说集成到vscode当中了,后来就觉得太麻烦了,就没有在使用了,不过现在想想还是有点好笑
  • Is 'El Capitan's' rootless breaking old grunt configs?
    After migrating to El Capitan, it seems users are experiencing an issue with grunt installations, possibly related to the rootless changes of El Capitan. In particular, running the grunt --force command results in EPERM errors. The workflow is as follows: Assuming npm has been installed, navigate to the grunt directory with package.json and gruntfile.js and invoke grunt: grunt --force Example Gruntfile.js file contents: module.exports = function(grunt) { // All configuration goes here grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { // Configuration for concatenating