1. 首页
  2. css

CSS关于预处理的思考

我最近做的每件事都用Sass。下面是一些旅途中的感想。从拦车,到绊倒,再到熄火。从应用程序和团队到工作流程和语法。
你必须在本地工作
对我来说最大的贡献就是放弃了我的突击队实时FTP编辑方式。是的,结尾很棒,但这是个坏习惯。它使现场工作变得太容易,而不是本地工作,本地工作具有明显的优势。也就是说,1)它很快2)你可以随心所欲地编辑内容,而不用担心你会搞砸一个现场站点,3)它允许你通过版本控制(稍后将详细介绍)在团队中有效地工作。
所以就这么做吧。如果你只在静态站点上工作,你就可以开始这样做。从计算机上的某个文件夹工作。如果你在PHP网站上工作(例如WordPress、Joomla、PHP、Vanilla、CodeIgnitor、CakePHP和amillionmore),那么使用MAMP(myscreencast)是理想的选择。当然,所有平台都有MAMP的变体。
如果您使用的是Ruby或Python之类的东西,那么很可能您知道如何设置这些东西,这样您就没事了。
既然我主要从事在本地机器上运行的项目,那么使用预处理器就很容易了。我使用了几个非常棒的应用程序,稍后我会介绍它们。命令行诸如此类诸如此类的诸如此类的诸如此类的诸如此类的诸如此类的诸如此类的诸如此类的诸如此类的诸如此类的诸如此类的诸如此类的诸如此类的诸如此类的诸如此类的诸如此类的诸如此类的诸如此类的!我不知道如何使用命令行,也不需要这样做。
关于SASS,这是很常见的事情。事情是这样的:我就在你身边。我讨厌命令行。你不需要这样做。我几乎从来没有做过任何事2其他让人讨厌的事情
尽管这看起来很幼稚,但我花了这么长时间才加入预处理器行列的另一个原因是人群太多。我不是一个人在这里。伙计,通常你甚至会对预处理器和CSS感到惊讶,而那些以灰狗的速度缠着你的/SASS人却少之又少。
-Eric A.Meyer(@meyerweb),2012年1月26日。很久以来,我一直在想:我每天都写CSS。我很了解CSS。我的工作流程很好。我很有效率。为什么有什么需要改变?真正的答案是,如果你不想改变,什么都不需要改变。如果你非常乐意做你正在做的事情:祝你好运。
我可以告诉你,跳转之后,我实际上更有效率。我写了更好的CSS。我所从事的项目也因此变得更好,更易于维护。在某些情况下,速度更快。我的建议是:不要让别人插手你的案子。做你该做的。如果你有时间试试,就去做吧。在一个真正的项目上做。只是胡闹不算数。你必须尝试一下,看看它如何与你的日常工作配合。应用程序
我只有Mac应用程序的经验。对不起的。我确信其他平台也有不错的应用程序。
让我开始使用这些预处理器的应用程序是LiveReload(屏幕广播)。我还是个粉丝。它现在可以在应用商店9.99美元。它是一个菜单栏应用程序,单击菜单栏中的图标可打开一个选项窗口。LiveReload:菜单栏图标、应用程序窗口和安装了浏览器扩展的浏览器。
您告诉LiveReload监视特定文件夹。当该文件夹中的任何文件发生更改时,它将触发预处理。它可以做一大堆预处理器。对于CSS:LESS、SASS(带指南针)或手写笔。对于JavaScript:CoffeeScript或IcedCoffeeScript。对于HTML:HAML、Jade、Slim或Eco。
经过预处理后,它会在安装了浏览器扩展的任何浏览器中重新加载页面。如果您更改的只是CSS,它将样式注入到页面中,而不刷新页面。这对于在特定状态下设置页面上的样式特别有用。假设一个点击触发打开一个对话框,你正在尝试设置这个对话框的样式。使用LiveReload,您可以保持对话框打开,新注入的样式将影响它,这意味着不会浪费太多时间单击和重新单击。
但我最近切换到CodeKit。CodeKit的用户界面更好,有更多的特性(例如图像优化,JS连接)和更少奇怪的限制(你可以选择文件是否被预处理以及它们去哪里,不像LiveReload那样,一旦你导入它就永远无法编译它)。我唯一怀念的是LiveReload在不重新加载页面的情况下注入CSS的能力,这是一个方便的特性,对于具有复杂状态的站点来说,需要多个步骤才能在rel之后将页面恢复到该状态oad。2012年4月更新:CodeKit现在正在进行CSS的实时注入。
不过,我不喜欢LiveReload的一些特性。一个是告诉它编译源的输出路径的屏幕:我讨厌这个屏幕
注意到灰显的吗?它试图聪明一点,注意到你已经把那个文件放在别处了。因此它不会编译。但是,如果你想编译它的其他原因呢?太糟糕了,没办法。它不是一个很好的用户界面,开始使用它可能有点棘手。
因此进入CodeKit。CodeKit有一个漂亮的UI。嗯。UI很可爱。
将文件路径更改为文件编译到的位置非常容易。而且我从来没有教过它,它似乎在目录结构上有所改进,并从一开始就得到了正确的结果。它也会灰显包含的文件,但你可以很容易地打开和关闭。
CodeKit仅限于LESS、Sass、手写笔、CoffeeScript和HAML。我发现这有点限制,因为我在一些项目中使用了Jade来预处理HTML。Jade支持HTML包含,这非常有用。
CodeKit上的错误报告非常好。很清楚发生了什么,当你解决它时感觉很好。
与LiveReload相比,LiveReload中有一个小窗口从屏幕右上角滑下来,文本剪辑不好,没有关闭按钮,一旦你解决了它,它就会滑走。
CodeKit也无法实现这种风格LiveReload可以注射的。这就是造物主的感受:
@chriscoyier我对此悬而未决。看到一个更新的发生会让人感到很舒服。
-Bryan Jones(@bdkjones)2012年2月6日
更新:CodeKit现在确实做了现场注射。
最终我认为CodeKit现在是我的最爱。最重要的是所有的附加功能。它可以自动祝福CSS。它可以连接和缩小JavaScript。它可以告诉你什么文件导入任何其他特定的文件。也许是我最喜欢的:它可以一键优化图像。团队
加入预处理器的另一个可能障碍:团队合作。特别是一个团队,多个人进出同一个CSS文件。如果是这样的话,那么所有这些人都需要使用你正在使用的任何预处理应用程序(你可以使用不同的应用程序,这很好)。最好是它们都运行相同的预处理器核心版本)。不能让某些人编辑.css文件,而让其他人编辑.scss文件。这些对.css文件的更改将在下次有人编译和提交时被覆盖。预处理器是无情的。他们不会说\”嘿,看起来这个.css文件和我上次编译它的时候有些不同,想先看看吗?\”不,他们只是在上面写。不过,这是可行的。在很短的时间内,我们把五福全部搬到了萨斯。实际上,我们把一部分移到了LESS,然后一部分移到了Stylus,然后全部移到了SASS。噢,爸爸。这要归功于凯文。我们还在SurveyMonkey上进行了全新的开发,使用了一大组使用SASS的设计模式。
如果有人对预处理器有任何团队策略,那将是非常有价值的分享!指南针
我肯定有人对我不使用指南针感到不安。我知道,我知道。我应该是。但很明显我在这方面做得很慢。我喜欢在开始之前尽可能深入地理解事情,罗盘对我来说还是有点花哨。如果有人不知道什么是指南针,这是一个大的附加软件集国资委。这意味着,基本上,你不必写那些你可能不得不以同样的方式写一个又一个项目的东西。CSS3 mixins、grid helpers、sprite helpers、文件路径helpers等等。我的问题是我还没有准备好放弃所有的东西。我想写我自己的。我相信有一天我会放弃的,但它还没有到来。一些让我绊倒的小事情
这篇文章是从那篇标题开始的,然后就开始了。不过,嘿,我想我还是会把这些在学习过程中给我带来一些悲伤的小道消息写进去。
由于我编写了自己的CSS3 mixin,我可能有一个类似于这样的box shadow的mixin:

Setting the container with an inline style is all well and good, but unfortunately there is no inline style for pseudo elements. So we might end up with something like this:
Bummer.
There is a solution though! While we are setting the inline style for the container, we can set an inline style for border-color
它充满了合理的默认值,所以最标准的用法可以是:

Then in our code for the pseudo element, we\”ll specifically have it inherit the color:
.speech-bubble:after {content: \”\”;position: absolute;top: 100%;left: 20px;border-top: 20px solid black;border-top-color: inherit;border-left: 20px solid transparent;border-right: 20px solid transparent; }
或者如果我想更具体一些,我可以指定每个部分:
inherit
但是如果我想做多个box shadows呢?这个混音还没准备好。对于这些,我还准备了超级通用的mixin,它们是规范名:
border-top-color
仅此一个只要一个参数,任何我想给的。所以用法可以是:
***4***
,但这不起作用。所有的逗号都会把SASS搞糊涂。它会认为您试图将多个参数传递给只接受一个参数的mixin。你也不能在你要传递的值周围加引号,那是行不通的。答案是使用双帕伦斯技术:
***5***
另一件让我搞砸的事是试图在值中使用变量,而变量只是值的一部分。最基本的是,变量非常简单:
***6***
但是我试着做:
***7***
为了让它工作,你必须使用hash/方括号:
***8***
还有最后一件可能会让人困惑的事情。&字符在嵌套时有特殊的含义。它等于选择器直到那个点。例如:
***9***
变成:
***10***
你以前可能见过这样的例子。做这样简单的例子并不太好,但信不信由你,嵌套感觉很自然,你会喜欢它的。
但是回到那个&字符。
你不需要这样做:
***11***
这只是因为嵌套而暗示的,你不需要在那里使用&字符。只有当它不是后代选择器(空格)时才需要它。当您稍后在选择器中使用&时,事情会变得格外性感。例如,如果你使用Modernizr来检测多个背景:
***12***
这给了你一个非常清晰的方法来处理支持和不支持的情况,在保持代码在逻辑上嵌套在***13***语句中的同时,即使我已经说服您在本地工作、使用版本控制和使用预处理器,部署仍然是一个挥之不去的问题。如果您从实时编辑到现在在本地工作,那么您的工作流程实际上可能会在效率上倒退一步,并且当您要进行实时编辑时,必须手动将更改的文件上载到服务器。恐怕我没有一个很好的答案给你。
内图斯用\”完美的工作流程,\”但这依赖于GitHub提交后钩子命中了一个PHP文件***14***,该文件不能在我访问的任何服务器上工作,而且据我所知,共享主机很少允许这样做。
这是基于应用程序的云托管的真正亮点。像Heroku for Ruby或PHPFog for PHP这样的应用可以完美地工作在基于Git的版本控制工作流中。您可以使用它,这样一个命令用于推送到存储库,另一个命令用于实时部署,或者,当您推送到存储库时,它会自动启动。
但这些云主机并不适用于所有人。当我做代理工作的时候,绝大多数只是一些普通共享主机上的站点。您可以在这些服务器上安装Git,然后在将内容推送到存储库之后,SSH进入服务器,Git从那里拉出来。这更好,但仍然有点简陋,需要使用命令行。理想情况下,像GitTower这样的应用程序可以管理你的GitRepos,还可以处理FTP,在命令上上传文件,它知道这些文件已经过时了。
对于那些被困在FTP4上的工作流\”不怕命令行的东西\”,这看起来很有希望。
其他CSS预处理器已经清楚了,我选择了CSS作为我的CSS预处理器。但是少一点和手写笔呢?
LESS是我第一个尝试的,老实说,我仍然喜欢它。我很喜欢你写的所有类都可以作为mixin自动重用。例如:
***15***
这比SASS更有用、更简洁。但是有人告诉我,把类和mixin的概念混合在一起是有根本缺陷的。我不知道怎么做,但你已经知道了。如果有人想解释,我会急着听的。
当我仅仅使用标准的@keyframe动画语法就出现错误的时候,我对更少的内容感到厌烦。所以最终我不得不把这些东西分割成另一个文件,但是这些文件必须是.css,这样才不会触发错误,然后我也不能因为文件扩展名而@import它们(字面上包括内容)。也许他们已经修好了,不确定。
手写笔也不错,主要是因为它的灵活性。它不会像其他人那样对你大发雷霆。像大括号和分号之类的东西是可选的,不是必须的。虽然触控笔很好,很强大,很健壮,但我最终认为它背后的发展不足以给我灌输信心。它主要是一个家伙(TJ Holowaychuk)。
SASS最终胜出,因为它是最成熟的,最容易找到信息和帮助,似乎有最积极和稳健的发展,并有最少的

CSS关于预处理的思考 为WP2原创文章,链接:https://www.wp2.cn/css/css%e5%85%b3%e4%ba%8e%e9%a2%84%e5%a4%84%e7%90%86%e7%9a%84%e6%80%9d%e8%80%83/