后使用快捷导航没有帐号？
只需一步，快速开始
查看: 2122|回复: 8
有人用less或sass在正式项目中使用么？
UID500967在线时间 小时积分2204帖子离线17064 天注册时间
银牌会员, 积分 2204, 距离下一级还需 796 积分
为什么我总感觉这些方案是把简单的问题复杂化了？
做DEMO的时候就感觉有点蛋疼，就不说BUG跟限制之类的~
虽然写起来是方便了很多，很多定义可以统一起来在头部，像变量一样很爽，
但是，代码提示什么的都不能用了，然后调试BUG之类的也好麻烦，转来转去的~~
有人用过么？一般怎么解决这些~
UID522151在线时间 小时积分2044帖子离线17064 天注册时间
银牌会员, 积分 2044, 距离下一级还需 956 积分
跟coffee一样蛋疼的说。
UID176496在线时间 小时积分8490帖子离线17064 天注册时间
跟coffee一样蛋疼的说。
请描述一下 coffee 怎么让你蛋疼了?
UID421944在线时间 小时积分5327帖子离线17064 天注册时间
在使用less& &相对sass来说 更接近css,&&如果你愿意 可以完全按css的写法写&&不存在比css复杂的问题
UID346713在线时间 小时积分1973帖子离线17064 天注册时间
银牌会员, 积分 1973, 距离下一级还需 1027 积分
公司里用SASS 1年多了。 像REM这种单位，也只有Sass可以方便的去处理。还有很多小工具，比如自动转换图片格式，转换单位，自动合并背景图，等等。
唯一的问题大概就是输出的CSS总是太大，也可能是我们的优化没到位。
UID500967在线时间 小时积分2204帖子离线17064 天注册时间
银牌会员, 积分 2204, 距离下一级还需 796 积分
看来还是挺多人用的，下个项目试试新东西了。。。
SASS，还有 sublime text2 编辑器和Zen Coding插件，看起来都挺厉害的，但一直只下过来玩过，没有真用它，准备爽一爽，用几个月后再发个贴来说明一下感受
UID66116在线时间 小时积分2880帖子离线17064 天注册时间
银牌会员, 积分 2880, 距离下一级还需 120 积分
最近在用Less，感觉整体下来能少写不少css，就是不知道在大项目中是否靠谱保险。
UID277685在线时间 小时积分377帖子离线17064 天注册时间
中级会员, 积分 377, 距离下一级还需 123 积分
今天尝试了下，挺有意思。
大家是如何把less这中文件转编译成普通css的呢？
UID658003在线时间 小时积分2713帖子离线17064 天注册时间
银牌会员, 积分 2713, 距离下一级还需 287 积分
最近在用Less，感觉整体下来能少写不少css，就是不知道在大项目中是否靠谱保险。
喵在大项目中用less了么？
Powered bySublime Text通过插件编译Sass为CSS - 推酷
Sublime Text通过插件编译Sass为CSS
才是未来，但是
成熟稳定，拥有一大波忠实的使用者，及开源项目，且最近
也从Less转到Sass了。所以了解Sass还是非常有必要的。
基于快速开发及效率，我开发环节习惯通过编辑器插件来完成Less/Sass编译，这样可以快速定位、修复Bug。
下面介绍一款Sublime Text的插件
可以在编辑器完成Sass编译。名字是
但Sublime Text 3可用无压力。
首先要安装
，详细可参考：
或者网上大把教程
Sublime Text安装Sass Build插件
1. 安装 Package Control Plugin
View & Show Console
Sublime Text2
import urllib2,os, h = 'ebf27d836c04bb0cbaf282' + 'd0e7accb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else N urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else N print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')
Sublime Text3
import urllib.request,os, h = 'ebf27d836c04bb0cbaf282' + 'd0e7accb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
2. 安装 Package Control Plugin
Ctrl+Shift+P
(Linux/Windows) 或
Command+Shift+P
(OS X)，然后输入'install'会看到
Package Control: Install Package
等待列表出来，输入
SASS Build System
选择安装。
安装完成后，
(Linux/Windows) or
(OS X)可编译Sass为CSS，还会有一个
更多详细见官方：
最后，如果编译失败，或许就是
目录的问题,改成英文目录再试下。
转载请注明出处：
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致搞了好久，终于把sass搞定了。
最开始，我是想使用koala来实现对sass的实时编译的，但是每当我保存的时候，总是弹出erro错误，即无法编译生成css文件，百度了半天，问了好久，这个问题还是没能解决了，还希望能有个哥哥姐姐不吝指导我一下。。
下面我给大家介绍一下，如何使用sublime插件实现对scss文件的编译的吧。
首先，你想要使用sass的话，就必须依赖于ruby环境。所以，你要下一个ruby。具体的链接应该是(http://rubyinstaller.org/downloads)。下载相应的版本。建议大家不要使用谷歌浏览器，因为他真得加载不出来。
下载好之后，就需要一步步进行安装了（建议大家把其安装在c盘），这里需要注意的是：
这个勾别忘了选，因为不选中，就会出现编译时找不到Ruby环境的情况。
这时，我们在控制台输入ruby -v就可以得到我们的安装好的ruby的版本号等信息
Ruby 安装完成后，在开始菜单中找到新安装的 Ruby，并启动 Ruby 的 Command 控制面板，如下图所示：
当你的电脑中安装好 Ruby 之后，接下来就可以安装 Sass 了。同样的在windows下安装 Sass 有多种方法。给大家提供一种最实用的方法。
到&(http://rubygems.org/) 网站上将&（http://rubygems.org/gems/sass）下载下来，然后在命令终端输入：
gem install &把下载的安装包拖到这里&
直接回车即可安装成功。
接下来，就是在sublime中安装sass插件和sass build插件了，打开我们的sublime
首先你要看的是在preference选项下有没有package control这个选项，如果没有的话，就表示你没有Package Control 插件（一个方便&Sublime text 管理插件的插件），这时，你就要从菜单 View - Show Console 或者 ctrl + ~ 快捷键，调出 console。将以下 Python 代码粘贴进去并 enter 执行，不出意外即完成安装
sublime text3
import urllib.request, pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())
sublime text2
import urllib2, pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else N urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')
完成了这步之后,再重新打开我们的sublime,ctrl+shift+p，并输入install
选择第一个Install Pacage,
在命令栏中输入"Sass"然后回车，然后在弹出的列表中选择Sass插件，通过鼠标单击或者回车进行安装，可通过左下角状态栏查看安装结果
在命令栏中输入"SassBuild"然后回车，然后在弹出的列表中选择SassBuild插件，通过鼠标单击或者回车进行安装，可通过左下角状态栏查看安装结果
按ctrl+shift+p，输入package，选择list packages，就看到了我们安装的插件列表
如果你看到了sass和sass bulid就说明插件安装成功了。
这是你把scss文件写完之后，按ctrl+b就可以实现sass文件的编译了，他会生成一个自动编译生成css文件。这里,再跟大家介绍一下windows7下解决中文乱码的问题吧。需要做的就是：
找到ruby的安装目录，里面也有sass模块，如这个路径：&C:/Ruby/lib/ruby/gems/1.9.1/gems/sass-3.3.14/lib/sass&在这个文件里面engine.rb，添加一行代码Encoding.default_external = Encoding.find(&utf-8&) 放在所有的require XXXX 之后即可.
阅读(...) 评论()前端工程师的神器Sublime Text使用介绍
前端工程师的神器Sublime Text使用介绍
来源： | 时间： 10:22:30 | 阅读数：
[导读] Sublime Text算是前端开发中最常使用的文本编辑器之一，对于前端工程师来说熟悉手中的编辑器就像熟悉筷子一样重要。Sublime Text的入门文章网上已经太多了，本文只关注能提升前端工程师工作效率的技巧和插件。
Sublime Text算是前端开发中最常使用的文本编辑器之一，对于前端工程师来说熟悉手中的编辑器就像熟悉筷子一样重要。Sublime Text的入门文章网上已经太多了，本文只关注能提升前端工程师工作效率的技巧和插件。
一晃已经接近2015年，过去数年里前端开发的发展日新月异：浏览器里充斥着新增加的CSS特性（以及这些特性的N种实现），JavaScript也不像原来那样只用作给单一页面加点特效或者提交Ajax请求这么简单，我们手边有了Jade，Sass，TypeScript等等一打甚至更多种能生成HTML，CSS，JavaScript的语言，默认安装的Sublime Text已经完全无法提供这些新的语言、新的特性所需要的语法高亮和智能感知。这一节介绍了一些Package来辅助Sublime Text实现更好地语法高亮。
JavaScript Next
JavaScript Next&提供了比默认JavaScript Package更好的语法高亮，而且他完美支持ECMAScript 6，如果你知道ECMAScript 6，或许也感受过默认安装的Sublime Text不支持modules，succinct methods, arrow functions, classes, generators, and accessors 带来的不便。
嗯是的，就是CSS3，默认安装的Sublime Text对CSS3的支持让人抓狂，帧动画？别开玩笑了你只会看到一片白色的纯文本一样的代码。事实上不光CSS3，我建议用CSS3 Package完全替代原来的CSS Package来完成语法高亮。
Sass的开发人员们，我建议你们使用SCSS&Package，是的我也觉得有.sass和.scss是很脑残的设定，但是我想大多数Sass开发人员实际上写的都是.scss，毕竟.scss更&像&我们熟悉的原生CSS。
当然Stylus和LESS也是写CSS的好工具，事实上我更喜欢LESS。
其他Package
CoffeeScript的开发人员少不了Better-Coffescript，这个Package比Package Control里官方的CoffeeScript Package要好得多，后者已经很久没有维护更新了。嗯，TypeScript也是个不错的选择，当然我想Visual Studio或许是更好地TypeScript工具。
Haml&Package为默认的工具增加了嵌套语言的支持，包括JavaScript，CSS，Sass等等，语法高亮比以前更方便。Slim和Jade也提供了各自的语法高亮支持，这两种语言我还不是非常了解，如果有更好的插件提供请一定分享出来。
Sublime Text有无数有趣又有用的插件，社区的支持也是我一直用Sublime Text的原因。如果我们找一打工程师坐下来讨论Sublime Text的插件，哦算了我们还是聊聊宇宙和平吧&& 前端工程师常用的插件比如CTag不再赘述，这里说几个有趣的。
Color Highlighter
这个插件我等了很久了，我最早用Sublime Text写CSS时候就在想&这堆颜色码谁知道是什么颜色&&&Color Highlighter这个插件会检测CSS文件中的颜色码，不论是Hex码或者RGB码都能很好的显示。Color Highlighter能够设置成用背景色或者边框提示颜色，我一般在Settings里做这样的设置：
language-http& { &ha_style&: &filled&, &icons&: false }
这样设置之后的效果是这样的：
更赞的是最近这个插件也支持了Sass、LESS以及Stylus，这也使他成为我的必备插件之一。
嗯，我个人不喜欢Emmet这个名字，反倒是以前他叫做Zen Coding的时候更容易被人记住。大量使用Emmet只有一个坏处，那就是你可能会忘记把标签成对打两遍的好习惯。
用Emmet写HTML很快，真的很快。简单的把标签和需要的class名称写清，嵌套结构和闭合标签他会帮你搞定的。Jade、Slim或者Haml的支持也很好。
Sublime Linter
经常对代码做lint是个好习惯，这不一定是为了检测语法错误，还能减少潜在的冲突、不兼容等。后端工程师有CLint一类的工具，Sublime Text中对JavaScript的Lint支持也很好。Sublime Linter可以在编译时就很方便的帮助我们lint代码。虽然我们通过grunt等构建工具，也可以在构建网站时强制进行lint检测，但是在编辑时的实时监测总是方便很多。
我想合适的主题和配色是能够潜在提高工程师效率的重要工具，虽然用白底黑字的记事本也能写出稳固高效的代码，但是为了我们的心情和眼睛，还是选几款好的配色比较好。前端工程师对设计和美学更加敏锐，虽然不是设计师，但我们知道&什么是美的&。在Sublime Text中改变视觉效果有两部分设置，分别是代码高亮的&配色&以及编辑器本身的&主题&（包括了Tab栏、侧边栏以及Command窗口等）。顺便插播一下，最新版本的Sublime Text 3能够指定侧边栏的文件图标了~
记得知乎上有为什么大部分程序员都喜欢用黑色界面这样的问题，嗯&& 不管你使用亮色系还是暗色系的主题（事实上我在不同的编辑器分别用了这两种），下面这几种都非常值得推荐：
Solarized Dark
Solarized在事实上设计了一套配色的标准，而非单纯的几个编辑器配色文件。我们可以在官网上找到大量流行IDE的Solarized配色方案，在GitHub等开源网站上更多！几乎所有数的出来的编辑器、终端工具等都可以找到Solarized风格的配色。很多顶级工程师的工具和博客也使用了这一套配色。
Cabalt2这套主题是本文原作者Wes Bos推荐的主题，这套主题经过了5年以上的修改和演进。它的特点在于通过高对比度的方案吸引使用者的眼球，把注意力放在需要注意的地方。
黑，很黑，用来形容Seti UI不算过分，这套主题的蓝色很挑眼，我推荐这款主题只是因为这篇文章太长了需要点儿亮色~
Goto Anything
如果你之前用过Coda、Textmate或者Dreamweaver你可能对侧边栏上的文件导航及其依赖。Sublime Text带来了Goto Anything特性，只需要按下简单的 ⌘ (Ctrl on Windows) + P 就可以前往任何你想到达的位置，这是你能想到的打开文件的最快的方法。智能感知的提示框提供了模糊匹配，我们不需要记住准确的文件名，也不需要记住他在哪层文件夹里。
Goto Anything不光支持文件名，事实上他还支持前往某行，你可以使用&jquery.js:205:15&来前往jquery.js文件的205行15列。使用&@&可以前往文件里的函数、方法等等成员，再方便不过。
手机扫描下方二维码，关注php100官方微信。
同步官网每日更新，为您带来随时随地的资讯与技术信息。更有不定期的互动抽奖活动，赢取实用贴心的小礼物。
除非特别声明，PHP100新闻均为原创或投稿报道，转载请注明作者及原文链接原文地址：
友情链接与合作伙伴
粤ICP备号-3编辑器笔记——sublime text3 编译sass
来源：博客园

如已经安装sass 和 sass build两个插件到ST，command+b编译也没有问题，那么另外安装koala，在koala中引入你要编辑的sass，并把该sass文件设置为自动编译，那么用ST编辑该sass保存时就能自动编译了，不用每次command+b编译那么麻烦。&img data-rawheight="556" data-rawwidth="900" src="/8a98744f8afdd2b8cebc312b_b.jpg" class="origin_image zh-lightbox-thumb" width="900" data-original="/8a98744f8afdd2b8cebc312b_r.jpg"&
用ST保存sass之后，koala会自动进行编译，并在右下角反馈编译成功的提示。
&img data-rawheight="108" data-rawwidth="400" src="/e9e219d2a17b15a1433efb95_b.jpg" class="content_image" width="400"&

作者：刘丽冰链接：/question//answer/来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
免责声明：本站部分内容、图片、文字、视频等来自于互联网，仅供大家学习与交流。相关内容如涉嫌侵犯您的知识产权或其他合法权益，请向本站发送有效通知，我们会及时处理。反馈邮箱&&&&。
学生服务号
在线咨询，奖学金返现，名师点评，等你来互动