前沿 :  第一次写不够成熟,可能描述有所错误,还请大家修改指正,我会对已完成的文章进行修改。

一、什么是CSS预处理器

  CSS预处理器定义了一种新的语言,基本的思想是用一种专门的编程语言,开发者只需要使用这种语言进行编码工作,减少枯燥无味的CSS代码的编写过程的同时,它能让你的CSS具备更加简洁、适应性更强、可读性更加、层级关系更加明显、更易于代码的维护等诸多好处。

  CSS预处理器种类繁多,本次就以Sass、Less、Stylus进行比较。

二、语法

  在使用CSS预处理器之前最重要的是了解语法,我只写过stylus,就从网上找了下另外两种语法的格式,与大家对比分享。

  首先Sass和Less都是用的是标准的CSS语法,因此你可以很方便的把已完成的CSS代码转为预处理器识别的代码,Sass默认使用 .sass扩展名,而Less默认使用.Less扩展名。

一下是两者的语法

/* style.scss or style.less */
h1 {
color: #0982C1;
}

你注意到Sass同时也支持老语法,就是不包含花括号和分号的书写格式。

/* style.sass */
h1
color: #0982c1

然而Stylus支持的语法就更多样性,它默认使用.styl的文件扩展名,下面是Stylus语法。

/* style.styl */
h1 {
color: #0982C1;
} /* omit brackets */
h1
color: #0982C1; /* omit colons and semi-colons */
h1
color #0982C1

三、变量

  你可以在CSS预处理中声明变量,并在整个样式单中使用,支持任何类型的变量,例如:颜色、数值(是否包含单位)、文本。然后你可以任意的调取和使用该变量。Sass的变量是必须$开始,然后变量名和值要冒号隔开,跟CSS属性书写格式一致。

$mainColor: #0982c1;
$siteWidth: 1024px;
$borderStyle: dotted; body {
color: $publicColor;
border: 1px $borderStyle $mainColor;
max-width: $siteWidth;
}

而Less的变量名使用@符号开始:

@mainColor: #0982c1;
@siteWidth: 1024px;
@borderStyle: dotted; body {
color: @publicColor;
border: 1px @borderStyle @mainColor;
max-width: @siteWidth;
}

  Stylus对变量名没有任何限定,你可以是$开始,也可以是任意字符,而且与变量值之间可以用冒号、空格隔开,需要注意的是 Stylus (0.22.4) 将会编译 @ 开始的变量,但其对应的值并不会赋予该变量,换句话说,在 Stylus 的变量名不要用 @ 开头。  

mainColor = #0982c1
siteWidth = 1024px
$borderStyle = dotted body
color mainColor
border 1px $borderStyle mainColor
max-width siteWidth

上面三种不同的CSS写法,最终将会生成相同结果:

body {
color: #0982c1;
border: 1px dotted #0982c1;
max-width: 1024px;
}

  最容易体现它的好处的是,假设你在CSS中使用同一种颜色数十次,如果你要修改显色,需要找到并修改十次相同的代码,而有了CSS预处理器,修改一个地方就够了。

四、嵌套

  如果你需要在CSS中相同的parent引用多个元素,你需要一遍一遍的去写parent。例如:

section {
margin: 10px;
}
section nav {
height: 25px;
}
section nav a {
color: #0982C1;
}
section nav a:hover {
text-decoration: underline;
}

然而如果用CSS预处理器,就可以少些很多单词,而且父节点关系一目了然。

section {
margin: 10px; nav {
height: 25px; a {
color: #0982C1; &:hover {
text-decoration: underline;
}
}
}
}

stylus还可省略花括号,书写更加方便,根据个人喜好还可删除中间冒号。

section
margin: 10px;
nav
height: 25px;
a
color: #0982C1;
&:hover
text-decoration: underline;

最终生成CSS结果是:

section {
margin: 10px;
}
section nav {
height: 25px;
}
section nav a {
color: #0982C1;
}
section nav a:hover {
text-decoration: underline;
}

目前了解就这些,若有描述不正确地方还请大家指正,后续还会更新。

注:参考  张鑫旭Stylue中文文档http://www.zhangxinxu.com/jq/stylus/selectors.php

      开源中国社区:https://www.oschina.net/question/12_44255

比较三个 CSS 预处理器:Sass、LESS 和 Stylus(上)的更多相关文章

  1. 为您详细比较三个 CSS 预处理器(框架):Sass、LESS 和 Stylus

    CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...

  2. 详细比较三个 CSS 预处理器(框架):Sass、LESS 和 Stylus

    [大伽说]如何运维千台云服务器 »   CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.L ...

  3. 三个 CSS 预处理器(框架):Sass、LESS 和 Stylus

    CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...

  4. CSS预处理器Sass、LESS 和 Stylus

    CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...

  5. CSS预处理器——Sass、LESS和Stylus实践

    CSS(Cascading Style Sheet)被译为级联样式表,做为一名前端从业人员来说,这个专业名词并不陌生,在行业中通常称之为“风格样式表(Style Sheet)”,它主要是用来进行网页风 ...

  6. css预处理器sass学习

    SASS 叫做css预处理器,他的基本思想是用一门专门的编程语言来进行页面样式的设计,然后在编译成正常的css文件. Sass的用法 安装 sass是用ruby语言写的,所以我们在安装sass之前要先 ...

  7. 比较三个 CSS 预处理器:Sass、LESS 和 Stylus(下)

    五.Mixins (混入) Mixins 有点像是函数或者是宏,当你某段 CSS 经常需要在多个元素中使用时,你可以为这些共用的 CSS 定义一个 Mixin,然后你只需要在需要引用这些 CSS 地方 ...

  8. 关于前端CSS预处理器Sass的小知识!

    前面的话   "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...

  9. CSS预处理器Sass(Scss)、Less、Stylus

    CSS 预处理编译器能让我成程序化其的方式编写CSS代码,可以引入CSS中没有的变量.条件.函数等特性,从而让代码更简单易维护,但一般按预处理器语法编写的代码无法直接在浏览器中运行,需用通过工具比如g ...

随机推荐

  1. POJ3268 Silver Cow Party Dijkstra最短路

    Description One cow from each of N farms (1 ≤ N ≤ 1000) conveniently numbered 1..N is going to atten ...

  2. python 密码学编程 -- 2

    接上一篇随笔 ******************************************************************** * quote : "http://i ...

  3. 关于个人编辑器sublime text3使用指南

    用过了好多编辑器,前些年用的zend studio,phpstorm近两年转为nodepad++(因为写的语言种类比较多了,shell,python,php,前端等),相对于nodepad++,  s ...

  4. 【学习OpenCV】——2.4对图像进行平滑处理

    作者基于WIN10+VS2015+OpenCV3.0.0 (本人在学习的时候参考了xiahouzuoxin 的有关文章,在此感谢 ) 图像平滑与图像模糊是同一概念,主要用于图像的去噪.平滑要使用滤波器 ...

  5. LinkQueue(链队列)

    关于Node.h,请参考LinkStack #include"Node.h" template<typename ElemType> class LinkQueue { ...

  6. 【head first python】学习计划

    1 初识Python:人人都爱列表 2 共享你的代码:函数模块 3 文件与异常:处理错误 4 持久存储:数据保存到文件 5 推导数据:处理数据! 6 定制数据对象:打包代码与数据 7 Web开发:集成 ...

  7. 浅尝Java(二、代码折叠插件的使用)

    主题:eclipse代码折叠插件的使用. 工作中在使用eclipse开发Java项目时,我们会写很多if,for循环啊什么的,这使得我们的项目代码会有很多很多行.写完后要想检查或者查看,就要从头一行一 ...

  8. MATLAB批量读入图片

    %% import pictures, and save into images{img_num} function [images, img_num, vertical_border] = impo ...

  9. Java开发工具(Eclipse中内容辅助键的使用)

    * A:Alt+/ 起提示作用* B:main+alt+/,syso+alt+/,给出其他提示* C:补充输出语句,选中需要输出的部分,alt+/选择最后一项即可* C:定义自己的alt + / * ...

  10. php创建多级目录完整封装类操作

    创建多级目录函数中调用创建指定下的指定文件的函数: public function create_dir($dir,$mode=0777) { return is_dir($dir) or ($thi ...