选择分类
  • 云瑞原创
  • Mockups
  • Ui Kits
  • 背景纹理
  • 图标
  • 平面图形
  • 探索
  • 笔刷
  • 图层样式
  • PPT模版
  • 影视素材
  • 教程
  • C4D资源
  • PS动作
  • 常用3D资源
  • 字体
  • 网站模板
  • LR预设
  • 设计学院

还没使用CSS预处理器?你OUT了

CSS既是一个美妙的创新也是一个不可错过的机会。它通过把表现和结构分离来改进网页设计的过程。但是,CSS有也许多限制。曾写过CSS的人都知道,做一个最简单的网站时,CSS会有很多重复的地方,导致很多覆盖问题,覆盖应用多了,代码逻辑就一团糟了。CSS不符合编码最佳实践,它的代码逻辑常常阻碍了设计和开发过程。

值得庆幸的是, CSS预处理器为我们提供很多理想的功能。有许多不同的CSS预处理器的,最流行是SASS和LESS。他们有两个不同点,但不是密切关注特定预处理器之间的显著差异,我们将看看如何在一般的CSS预处理器可以改变你对CSS的编写方式。

Not Using CSS Preprocessors? You Should Be.
Image by Naiara Abaroa

什么是CSS预处理器?

简单地说, CSS预处理器和单独的CSS相比,语言更丰富,功能更强大,而且它能插入到CSS中作为普通的CSS用。

正如其名称所暗示的, CSS预处理器能对一个文本文件进行处理,并输出正确的CSS。确切的说,该文本文件取依赖于单独的预处理程序,但两者SASS和LESS是CSS的一个超级集合。他们已经包含在CSS规范以及附加功能所有的东西。其中的一个主要好处是,如果你懂CSS ,你已经可以写有效LESS和SASS ,你只需要学习一些额外的技巧。

变量, Mixins, 和 函数

CSS不包括的变量。任何熟悉编码的人都了解变量的使用。变量允许Web开发人员值赋给一个变量名,然后可以在整个样式表使用。如果您需要更改该值,你只需要在一个地方改变它,而不是改所有的CSS。

Not Using CSS Preprocessors? You Should Be.
Image by Chris Michel

Mixins稍微复杂一些。它们允许一个类被嵌入在另一个类中,然后可以在整个样式表中使用它的属性,在大致相同的方式中作为一个变量。函数多,虽然有一些限制,但你会找到任何其他的编程语言中用的类似函数。

它会让你的CSS更简单

“不要重复自己”是现代编码的基本最佳实践之一。与单纯的CSS这几乎是不可能做到的,但SASS,LESS和其他的,变量,mixins,以及函数允许开发人员一次编写,并利用它们在其整个样式表。

CSS 预处理器将会节省你的时间

Not Using CSS Preprocessors? You Should Be.
Image by Mario Bieh

CSS编写和维护方式的低效率,占用了大量的开发时间。使用CSS预处理器大大简化了编写可读性和可维护性,这意味着开发人员和设计人员有更多的时间工作,去做真正重要的东西,比如使网站看起来体验更好的工作。

如果你一直在回避的CSS预处理器,也许是时候看看了。它们将节省您的时间,对于已经很熟悉CSS的人来说,学习起来也很简单。

TAG

云瑞设计小程序
云瑞设计小程序

微信扫一扫
手机使用更方便!

云瑞设计订阅号
云瑞设计订阅号

关注我们的微信订阅号,不错过任何福利。