您的位置:新葡亰496net > 新葡亰官网 > 新葡亰496net:less和stylus的安装使用和入门实践,

新葡亰496net:less和stylus的安装使用和入门实践,

发布时间:2019-09-17 06:19编辑:新葡亰官网浏览(151)

    浅谈 CSS 预处理器(一):为什么要使用预处理器?

    2017/01/22 · CSS · 预处理器

    本文作者: 伯乐在线 - CSS魔法 。未经作者许可,禁止转载!
    欢迎加入伯乐在线 专栏作者。

    前言

    你好,我是魔法哥。我是一名传统的前端开发者,我的很大一部分工作就是为各种类型的网页写 CSS,写了很多年。

    我从三年前开始接触并使用 CSS 预处理,如鱼得水,相见恨晚。因此,我感觉有必要写些文章来总结一下这方面的心得。如果你是一位还没有接触预处理器的 CSS 开发者,希望我的文章能够帮助你轻松开始!

    (注:本文的示例代码均采用 Stylus 作为 CSS 预处理语言。)

    1、LESS的官网:http://lesscss.org

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

    less 是基于CSS的一种 扩展技术
    .less 通过解析器 (比如koala)转换文件格式为CSS
    @ 变量名 值
    语法
    变量
    LESS 允许开发者自定义变量,变量可以在全局样式中使用,变量使得样式修改起来更加简单。
    我们可以从下面的代码了解变量的使用及作用:
    清单 3 LESS 文件
    @border-color : #b5bcc7;

    less 是基于CSS的一种 扩展技术
    .less 通过解析器 (比如koala)转换文件格式为CSS
    @ 变量名 值
    语法
    变量
    LESS 允许开发者自定义变量,变量可以在全局样式中使用,变量使得样式修改起来更加简单。
    我们可以从下面的代码了解变量的使用及作用:
    清单 3 LESS 文件
    @border-color : #b5bcc7;

    背景

    CSS 自诞生以来,基本语法和核心机制一直没有本质上的变化,它的发展几乎全是表现力层面上的提升。最开始 CSS 在网页中的作用只是辅助性的装饰,轻便易学是最大的需求;然而如今网站的复杂度已经不可同日而语,原生 CSS 已经让开发者力不从心。

    当一门语言的能力不足而用户的运行环境又不支持其它选择的时候,这门语言就会沦为 “编译目标” 语言。开发者将选择另一门更高级的语言来进行开发,然后编译到底层语言以便实际运行。

    于是,在前端领域,天降大任于斯人也,CSS 预处理器应运而生。而 CSS 这门古老的语言以另一种方式 “重新适应” 了网页开发的需求。

    2、Sass官网地址:http://sass-lang.com

    首先我们来简单介绍下什么是 CSS 预处理器,CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性,无需考虑浏览器的兼容性问题,例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧,可以让你的 CSS 更见简洁,适应性更强,代码更直观等诸多好处。

    .mythemes tableBorder{
    border : 1px solid @border-color;
    }
    经过编译生成的 CSS 文件如下:
    清单 4. CSS 文件
    .mythemes tableBorder {
    border: 1px solid #b5bcc7;
    }
    从上面的代码中我们可以看出,变量是 VALUE(值)级别的复用,可以将相同的值定义成变量统一管理起来。
    该特性适用于定义主题,我们可以将背景颜色、字体颜色、边框属性等常规样式进行统一定义,这样不同的主题只需要定义不同的变量文件就可以了。当然该特性也同样适用于 CSS RESET(重置样式表),在 Web 开发中,我们往往需要屏蔽浏览器默认的样式行为而需要重新定义样式表来覆盖浏览器的默认行为,这里可以使用 LESS 的变量特性,这样就可以在不同的项目间重用样式表,我们仅需要在不同的项目样式表中,根据需求重新给变量赋值即可。
    LESS 中的变量和其他编程语言一样,可以实现值的复用,同样它也有生命周期,也就是 Scope(变量范围,开发人员惯称之为作用域),简单的讲就是局部变量还是全局变量的概念,查找变量的顺序是先在局部定义中找,如果找不到,则查找上级定义,直至全局。下面我们通过一个简单的例子来解释 Scope。
    清单 5. LESS 文件
    新葡亰496net:less和stylus的安装使用和入门实践,预处理器。@width : 20px;
    #homeDiv {
    @width : 30px;
    #centerDiv{
    width : @width;// 此处应该取最近定义的变量 width 的值 30px
    }
    }
    #leftDiv {
    width : @width; // 此处应该取最上面定义的变量 width 的值 20px

    .mythemes tableBorder{
    border : 1px solid @border-color;
    }
    经过编译生成的 CSS 文件如下:
    清单 4. CSS 文件
    .mythemes tableBorder {
    border: 1px solid #b5bcc7;
    }
    从上面的代码中我们可以看出,变量是 VALUE(值)级别的复用,可以将相同的值定义成变量统一管理起来。
    该特性适用于定义主题,我们可以将背景颜色、字体颜色、边框属性等常规样式进行统一定义,这样不同的主题只需要定义不同的变量文件就可以了。当然该特性也同样适用于 CSS RESET(重置样式表),在 Web 开发中,我们往往需要屏蔽浏览器默认的样式行为而需要重新定义样式表来覆盖浏览器的默认行为,这里可以使用 LESS 的变量特性,这样就可以在不同的项目间重用样式表,我们仅需要在不同的项目样式表中,根据需求重新给变量赋值即可。
    LESS 中的变量和其他编程语言一样,可以实现值的复用,同样它也有生命周期,也就是 Scope(变量范围,开发人员惯称之为作用域),简单的讲就是局部变量还是全局变量的概念,查找变量的顺序是先在局部定义中找,如果找不到,则查找上级定义,直至全局。下面我们通过一个简单的例子来解释 Scope。
    清单 5. LESS 文件
    @width : 20px;
    #homeDiv {
    @width : 30px;
    #centerDiv{
    width : @width;// 此处应该取最近定义的变量 width 的值 30px
    }
    }
    #leftDiv {
    width : @width; // 此处应该取最上面定义的变量 width 的值 20px

    预处理器赋予我们的 “超能力”

    简单梳理一下,CSS 预处理器为我们带来了几项重要的能力,由浅入深排列如下。(不用在意你用到了多少,无论深浅,都是获益。)

    3、Stylus官网:http://learnboost.github.com/stylus

    不要再停留在石器时代了,下面让我们开始 CSS 预处理器之旅。

    }
    经过编译生成的 CSS 文件如下:
    清单 6. CSS 文件
    #homeDiv #centerDiv {
    width: 30px;
    }
    #leftDiv {
    width: 20px;
    }
    Mixins(混入)
    Mixins(混入)功能对用开发者来说并不陌生,很多动态语言都支持 Mixins(混入)特性,它是多重继承的一种实现,在 LESS 中,混入是指在一个 CLASS 中引入另外一个已经定义的 CLASS,就像在当前 CLASS 中增加一个属性一样。
    我们先简单看一下 Mixins 在 LESS 中的使用:
    清单 7. LESS 文件
    // 定义一个样式选择器
    .roundedCorners(@radius:5px) {
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
    border-radius: @radius;
    }
    // 在另外的样式选择器中使用
    #header {
    .roundedCorners;
    }
    #footer {
    .roundedCorners(10px);
    }
    经过编译生成的 CSS 文件如下:
    清单 8. CSS 文件
    #header {
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    }
    #footer {
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    }
    从上面的代码我们可以看出:Mixins 其实是一种嵌套,它允许将一个类嵌入到另外一个类中使用,被嵌入的类也可以称作变量,简单的讲,Mixins 其实是规则级别的复用。
    Mixins 还有一种形式叫做 Parametric Mixins(混入参数),LESS 也支持这一特性:
    清单 9. LESS 文件
    // 定义一个样式选择器
    .borderRadius(@radius){
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
    border-radius: @radius;
    }
    // 使用已定义的样式选择器
    #header {
    .borderRadius(10px); // 把 10px 作为参数传递给样式选择器
    }
    .btn {
    .borderRadius(3px);// // 把 3px 作为参数传递给样式选择器

    }
    经过编译生成的 CSS 文件如下:
    清单 6. CSS 文件
    #homeDiv #centerDiv {
    width: 30px;
    }
    #leftDiv {
    width: 20px;
    }
    Mixins(混入)
    Mixins(混入)功能对用开发者来说并不陌生,很多动态语言都支持 Mixins(混入)特性,它是多重继承的一种实现,在 LESS 中,混入是指在一个 CLASS 中引入另外一个已经定义的 CLASS,就像在当前 CLASS 中增加一个属性一样。
    我们先简单看一下 Mixins 在 LESS 中的使用:
    清单 7. LESS 文件
    // 定义一个样式选择器
    .roundedCorners(@radius:5px) {
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
    border-radius: @radius;
    }
    // 在另外的样式选择器中使用
    #header {
    .roundedCorners;
    }
    #footer {
    .roundedCorners(10px);
    }
    经过编译生成的 CSS 文件如下:
    清单 8. CSS 文件
    #header {
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    }
    #footer {
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    }
    从上面的代码我们可以看出:Mixins 其实是一种嵌套,它允许将一个类嵌入到另外一个类中使用,被嵌入的类也可以称作变量,简单的讲,Mixins 其实是规则级别的复用。
    Mixins 还有一种形式叫做 Parametric Mixins(混入参数),LESS 也支持这一特性:
    清单 9. LESS 文件
    // 定义一个样式选择器
    .borderRadius(@radius){
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
    border-radius: @radius;
    }
    // 使用已定义的样式选择器
    #header {
    .borderRadius(10px); // 把 10px 作为参数传递给样式选择器
    }
    .btn {
    .borderRadius(3px);// // 把 3px 作为参数传递给样式选择器

    文件切分

    页面越来越复杂,需要加载的 CSS 文件也越来越大,我们有必要把大文件切分开来,否则难以维护。传统的 CSS 文件切分方案基本上就是 CSS 原生的 @import 指令,或在 HTML 中加载多个 CSS 文件,这些方案通常不能满足性能要求。

    CSS 预处理器扩展了 @import 指令的能力,通过编译环节将切分后的文件重新合并为一个大文件。这一方面解决了大文件不便维护的问题,另一方面也解决了一堆小文件在加载时的性能问题。

    五、Sass、LESS和Stylus的语法

    我们将会从语法、变量、嵌套、混入(Mixin)、继承、导入、函数和操作符等方面分别对这三个框架进行比较介绍。

    }
    经过编译生成的 CSS 文件如下:
    清单 10. CSS 文件
    #header {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    }
    .btn {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    }
    我们还可以给 Mixins 的参数定义一人默认值,如
    清单 11. LESS 文件
    .borderRadius(@radius:5px){
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
    border-radius: @radius;
    }
    .btn {
    .borderRadius;
    }
    经过编译生成的 CSS 文件如下:
    清单 12. CSS 文件
    .btn {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    }
    像 JavaScript 中 arguments一样,Mixins 也有这样一个变量:@arguments。@arguments 在 Mixins 中具是一个很特别的参数,当 Mixins 引用这个参数时,该参数表示所有的变量,很多情况下,这个参数可以省去你很多代码。
    清单 13. LESS 文件
    .boxShadow(@x:0,@y:0,@blur:1px,@color:#000){
    -moz-box-shadow: @arguments;
    -webkit-box-shadow: @arguments;
    box-shadow: @arguments;
    }
    #header {
    .boxShadow(2px,2px,3px,#f36);
    }
    经过编译生成的 CSS 文件如下:
    清单 14. CSS 文件
    #header {
    -moz-box-shadow: 2px 2px 3px #FF36;
    -webkit-box-shadow: 2px 2px 3px #FF36;
    box-shadow: 2px 2px 3px #FF36;
    }
    Mixins 是 LESS 中很重要的特性之一,这里也写了很多例子,看到这些例子你是否会有这样的疑问:当我们拥有了大量选择器的时候,特别是团队协同开发时,如何保证选择器之间重名问题?如果你是 java 程序员或 C 程序员,我猜你肯定会想到命名空间 Namespaces,LESS 也采用了命名空间的方法来避免重名问题,于是乎 LESS 在 mixins 的基础上扩展了一下,看下面这样一段代码:
    清单 15. LESS 文件
    #mynamespace {
    .home {...}
    .user {...}
    }
    这样我们就定义了一个名为 mynamespace 的命名空间,如果我们要复用 user 这个选择器的时候,我们只需要在需要混入这个选择器的地方这样使用就可以了。#mynamespace > .user。
    嵌套的规则
    在我们书写标准 CSS 的时候,遇到多层的元素嵌套这种情况时,我们要么采用从外到内的选择器嵌套定义,要么采用给特定元素加 CLASS 或 ID 的方式。在 LESS 中我们可以这样写:
    清单 16. HTML 片段
    <div id="home">
    <div id="top">top</div>
    <div id="center">
    <div id="left">left</div>
    <div id="right">right</div>
    </div>
    </div>
    清单 17. LESS 文件
    #home{
    color : blue;
    width : 600px;
    height : 500px;
    border:outset;
    #top{
    border:outset;
    width : 90%;
    }
    #center{
    border:outset;
    height : 300px;
    width : 90%;
    #left{
    border:outset;
    float : left;
    width : 40%;
    }
    #right{
    border:outset;
    float : left;
    width : 40%;
    }
    }
    }
    经过编译生成的 CSS 文件如下:
    清单 18. CSS 文件
    #home {
    color: blue;
    width: 600px;
    height: 500px;
    border: outset;
    }
    #home #top {
    border: outset;
    width: 90%;
    }
    #home #center {
    border: outset;
    height: 300px;
    width: 90%;
    }
    #home #center #left {
    border: outset;
    float: left;
    width: 40%;
    }
    #home #center #right {
    border: outset;
    float: left;
    width: 40%;
    }
    从上面的代码中我们可以看出,LESS 的嵌套规则的写法是 HTML 中的 DOM 结构相对应的,这样使我们的样式表书写更加简洁和更好的可读性。同时,嵌套规则使得对伪元素的操作更为方便。
    清单 19. LESS 文件
    a {
    color: red;
    text-decoration: none;
    &:hover {// 有 & 时解析的是同一个元素或此元素的伪类,没有 & 解析是后代元素
    color: black;
    text-decoration: underline;
    }
    }
    经过编译生成的 CSS 文件如下:
    清单 20. CSS 文件
    a {
    color: red;
    text-decoration: none;
    }
    a:hover {
    color: black;
    text-decoration: underline;
    }
    运算及函数
    在我们的 CSS 中充斥着大量的数值型的 value,比如 color、padding、margin 等,这些数值之间在某些情况下是有着一定关系的,那么我们怎样利用 LESS 来组织我们这些数值之间的关系呢?我们来看这段代码:
    清单 21 . LESS 文件
    @init: #111111;
    @transition: @init*2;
    .switchColor {
    color: @transition;
    }
    经过编译生成的 CSS 文件如下:
    清单 22. CSS 文件
    .switchColor {
    color: #222222;
    }
    上面的例子中使用 LESS 的 operation 是 特性,其实简单的讲,就是对数值型的 value(数字、颜色、变量等)进行加减乘除四则运算。同时 LESS 还有一个专门针对 color 的操作提供一组函数。下面是 LESS 提供的针对颜色操作的函数列表:
    lighten(@color, 10%); // return a color which is 10% *lighter* than @color
    darken(@color, 10%); // return a color which is 10% *darker* than @color
    saturate(@color, 10%); // return a color 10% *more* saturated than @color
    desaturate(@color, 10%);// return a color 10% *less* saturated than @color
    fadein(@color, 10%); // return a color 10% *less* transparent than @color
    fadeout(@color, 10%); // return a color 10% *more* transparent than @color
    spin(@color, 10); // return a color with a 10 degree larger in hue than @color
    spin(@color, -10); // return a color with a 10 degree smaller hue than @color
    PS: 上述代码引自 LESS CSS 官方网站,详情请见
    使用这些函数和 JavaScript 中使用函数一样。
    清单 23 LESS 文件
    init: #f04615;
    #body {
    background-color: fadein(@init, 10%);
    }
    经过编译生成的 CSS 文件如下:
    清单 24. CSS 文件
    #body {
    background-color: #f04615;
    }
    从上面的例子我们可以发现,这组函数像极了 JavaScript 中的函数,它可以被调用和传递参数。这些函数的主要作用是提供颜色变换的功能,先把颜色转换成 HSL 色,然后在此基础上进行操作,LESS 还提供了获取颜色值的方法,在这里就不举例说明了。
    LESS 提供的运算及函数特性适用于实现页面组件特性,比如组件切换时的渐入渐出。
    Comments(注释)
    适当的注释是保证代码可读性的必要手段,LESS 对注释也提供了支持,主要有两种方式:单行注释和多行注释,这与 JavaScript 中的注释方法一样,我们这里不做详细的说明,只强调一点:LESS 中单行注释 (// 单行注释 ) 是不能显示在编译后的 CSS 中,所以如果你的注释是针对样式说明的请使用多行注释。
    LESS VS SASS
    同类框架还有 SASS 与 LESS 相比,两者都属于 CSS 预处理器,功能上大同小异,都是使用类似程序式语言的方式书写 CSS, 都具有变量、混入、嵌套、继承等特性,最终目的都是方便 CSS 的书写及维护。
    LESS 和 SASS 互相促进互相影响,相比之下 LESS 更接近 CSS 语法

    }
    经过编译生成的 CSS 文件如下:
    清单 10. CSS 文件
    #header {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    }
    .btn {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    }
    我们还可以给 Mixins 的参数定义一人默认值,如
    清单 11. LESS 文件
    .borderRadius(@radius:5px){
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
    border-radius: @radius;
    }
    .btn {
    .borderRadius;
    }
    经过编译生成的 CSS 文件如下:
    清单 12. CSS 文件
    .btn {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    }
    像 JavaScript 中 arguments一样,Mixins 也有这样一个变量:@arguments。@arguments 在 Mixins 中具是一个很特别的参数,当 Mixins 引用这个参数时,该参数表示所有的变量,很多情况下,这个参数可以省去你很多代码。
    清单 13. LESS 文件
    .boxShadow(@x:0,@y:0,@blur:1px,@color:#000){
    -moz-box-shadow: @arguments;
    -webkit-box-shadow: @arguments;
    box-shadow: @arguments;
    }
    #header {
    .boxShadow(2px,2px,3px,#f36);
    }
    经过编译生成的 CSS 文件如下:
    清单 14. CSS 文件
    #header {
    -moz-box-shadow: 2px 2px 3px #FF36;
    -webkit-box-shadow: 2px 2px 3px #FF36;
    box-shadow: 2px 2px 3px #FF36;
    }
    Mixins 是 LESS 中很重要的特性之一,这里也写了很多例子,看到这些例子你是否会有这样的疑问:当我们拥有了大量选择器的时候,特别是团队协同开发时,如何保证选择器之间重名问题?如果你是 java 程序员或 C 程序员,我猜你肯定会想到命名空间 Namespaces,LESS 也采用了命名空间的方法来避免重名问题,于是乎 LESS 在 mixins 的基础上扩展了一下,看下面这样一段代码:
    清单 15. LESS 文件
    #mynamespace {
    .home {...}
    .user {...}
    }
    这样我们就定义了一个名为 mynamespace 的命名空间,如果我们要复用 user 这个选择器的时候,我们只需要在需要混入这个选择器的地方这样使用就可以了。#mynamespace > .user。
    嵌套的规则
    在我们书写标准 CSS 的时候,遇到多层的元素嵌套这种情况时,我们要么采用从外到内的选择器嵌套定义,要么采用给特定元素加 CLASS 或 ID 的方式。在 LESS 中我们可以这样写:
    清单 16. HTML 片段
    <div id="home">
    <div id="top">top</div>
    <div id="center">
    <div id="left">left</div>
    <div id="right">right</div>
    </div>
    </div>
    清单 17. LESS 文件
    #home{
    color : blue;
    width : 600px;
    height : 500px;
    border:outset;
    #top{
    border:outset;
    width : 90%;
    }
    #center{
    border:outset;
    height : 300px;
    width : 90%;
    #left{
    border:outset;
    float : left;
    width : 40%;
    }
    #right{
    border:outset;
    float : left;
    width : 40%;
    }
    }
    }
    经过编译生成的 CSS 文件如下:
    清单 18. CSS 文件
    #home {
    color: blue;
    width: 600px;
    height: 500px;
    border: outset;
    }
    #home #top {
    border: outset;
    width: 90%;
    }
    #home #center {
    border: outset;
    height: 300px;
    width: 90%;
    }
    #home #center #left {
    border: outset;
    float: left;
    width: 40%;
    }
    #home #center #right {
    border: outset;
    float: left;
    width: 40%;
    }
    从上面的代码中我们可以看出,LESS 的嵌套规则的写法是 HTML 中的 DOM 结构相对应的,这样使我们的样式表书写更加简洁和更好的可读性。同时,嵌套规则使得对伪元素的操作更为方便。
    清单 19. LESS 文件
    a {
    color: red;
    text-decoration: none;
    &:hover {// 有 & 时解析的是同一个元素或此元素的伪类,没有 & 解析是后代元素
    color: black;
    text-decoration: underline;
    }
    }
    经过编译生成的 CSS 文件如下:
    清单 20. CSS 文件
    a {
    color: red;
    text-decoration: none;
    }
    a:hover {
    color: black;
    text-decoration: underline;
    }
    运算及函数
    在我们的 CSS 中充斥着大量的数值型的 value,比如 color、padding、margin 等,这些数值之间在某些情况下是有着一定关系的,那么我们怎样利用 LESS 来组织我们这些数值之间的关系呢?我们来看这段代码:
    清单 21 . LESS 文件
    @init: #111111;
    @transition: @init*2;
    .switchColor {
    color: @transition;
    }
    经过编译生成的 CSS 文件如下:
    清单 22. CSS 文件
    .switchColor {
    color: #222222;
    }
    上面的例子中使用 LESS 的 operation 是 特性,其实简单的讲,就是对数值型的 value(数字、颜色、变量等)进行加减乘除四则运算。同时 LESS 还有一个专门针对 color 的操作提供一组函数。下面是 LESS 提供的针对颜色操作的函数列表:
    lighten(@color, 10%); // return a color which is 10% *lighter* than @color
    darken(@color, 10%); // return a color which is 10% *darker* than @color
    saturate(@color, 10%); // return a color 10% *more* saturated than @color
    desaturate(@color, 10%);// return a color 10% *less* saturated than @color
    fadein(@color, 10%); // return a color 10% *less* transparent than @color
    fadeout(@color, 10%); // return a color 10% *more* transparent than @color
    spin(@color, 10); // return a color with a 10 degree larger in hue than @color
    spin(@color, -10); // return a color with a 10 degree smaller hue than @color
    PS: 上述代码引自 LESS CSS 官方网站,详情请见
    使用这些函数和 JavaScript 中使用函数一样。
    清单 23 LESS 文件
    init: #f04615;
    #body {
    background-color: fadein(@init, 10%);
    }
    经过编译生成的 CSS 文件如下:
    清单 24. CSS 文件
    #body {
    background-color: #f04615;
    }
    从上面的例子我们可以发现,这组函数像极了 JavaScript 中的函数,它可以被调用和传递参数。这些函数的主要作用是提供颜色变换的功能,先把颜色转换成 HSL 色,然后在此基础上进行操作,LESS 还提供了获取颜色值的方法,在这里就不举例说明了。
    LESS 提供的运算及函数特性适用于实现页面组件特性,比如组件切换时的渐入渐出。
    Comments(注释)
    适当的注释是保证代码可读性的必要手段,LESS 对注释也提供了支持,主要有两种方式:单行注释和多行注释,这与 JavaScript 中的注释方法一样,我们这里不做详细的说明,只强调一点:LESS 中单行注释 (// 单行注释 ) 是不能显示在编译后的 CSS 中,所以如果你的注释是针对样式说明的请使用多行注释。
    LESS VS SASS
    同类框架还有 SASS 与 LESS 相比,两者都属于 CSS 预处理器,功能上大同小异,都是使用类似程序式语言的方式书写 CSS, 都具有变量、混入、嵌套、继承等特性,最终目的都是方便 CSS 的书写及维护。
    LESS 和 SASS 互相促进互相影响,相比之下 LESS 更接近 CSS 语法

    模块化

    把文件切分的思路再向前推进一步,就是 “模块化”。一个大的 CSS 文件在合理切分之后,所产生的这些小文件的相互关系应该是一个树形结构。

    树形的根结节一般称作 “入口文件”,树形的其它节点一般称作 “模块文件”。入口文件通常会依赖多个模块文件,各个模块文件也可能会依赖其它更末端的模块,从而构成整个树形。

    以下是一个简单的示例:

    entry.styl ├─ base.styl │ ├─ normalize.styl │ └─ reset.styl ├─ layout.styl │ ├─ header.styl │ │ └─ nav.styl │ └─ footer.styl ├─ section-foo.styl ├─ section-bar.styl └─ ...

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    entry.styl
    ├─ base.styl
    │   ├─ normalize.styl
    │   └─ reset.styl
    ├─ layout.styl
    │   ├─ header.styl
    │   │   └─ nav.styl
    │   └─ footer.styl
    ├─ section-foo.styl
    ├─ section-bar.styl
    └─ ...

    (入口文件 entry.styl 在编译时会引入所需的模块,生成 entry.css,然后被页面引用。)

    如果你用过其它拥有模块机制的编程语言,应该已经深有体会,模块化是一种非常好的代码组织方式,是开发者设计代码结构的重要手段。模块可以很清晰地实现代码的分层、复用和依赖管理,让 CSS 的开发过程也能享受到现代程序开发的便利。

    1.Sass语法

    语法

    选择符嵌套

    选择符嵌套是文件内部的代码组织方式,它可以让一系列相关的规则呈现出层级关系。在以前,如果要达到这个目的,我们只能这样写:

    CSS

    .nav {margin: auto /* 水平居中 */; width: 1000px; color: #333;} .nav li {float: left /* 水平排列 */; width: 100px;} .nav li a {display: block; text-decoration: none;}

    1
    2
    3
    .nav {margin: auto /* 水平居中 */; width: 1000px; color: #333;}
        .nav li {float: left /* 水平排列 */; width: 100px;}
            .nav li a {display: block; text-decoration: none;}

    这种写法需要我们手工维护缩进关系,当上级选择符发生变化时,所有相关的下级选择符都要修改;此外,把每条规则写成一行也不易阅读,为单条声明写注释也很尴尬(只能插在声明之间了)。

    在 CSS 预处理语言中,嵌套语法可以很容易地表达出规则之间的层级关系,为单条声明写注释也很清晰易读:

    CSS

    .nav margin: auto // 水平居中 width: 1000px color: #333 li float: left // 水平排列 width: 100px a display: block text-decoration: none

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .nav
        margin: auto  // 水平居中
        width: 1000px
        color: #333
        li
            float: left  // 水平排列
            width: 100px
            a
                display: block
                text-decoration: none

    Sass3.0版本开始使用的是标准的CSS语法,和SCSS可以说是一样的。这样Sass代码转换成CSS代码变得更容易。默认Sass使用“.scss”扩展名。Sass语法规则可以像CSS那样书写:

    在使用 CSS 预处理器之前最重要的是理解语法,幸运的是基本上大多数预处理器的语法跟 CSS 都差不多。

    变量

    在变更出现之前,CSS 中的所有属性值都是 “幻数”。你不知道这个值是怎么来的、它的什么样的意义。有了变量之后,我们就可以给这些 “幻数” 起个名字了,便于记忆、阅读和理解。

    接下来我们会发现,当某个特定的值在多处用到时,变量就是一种简单而有效的抽象方式,可以把这种重复消灭掉,让你的代码更加 DRY。

    我们来比较一下以下两段代码:

    CSS

    /* 原生 CSS 代码 */ strong { color: #ff4466; font-weight: bold; } /* ... */ .notice { color: #ff4466; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    /* 原生 CSS 代码 */
    strong {
    color: #ff4466;
    font-weight: bold;
    }
     
    /* ... */
     
    .notice {
    color: #ff4466;
    }

    CSS

    // 用 Stylus 来写 $color-primary = #ff4466 strong color: $color-primary font-weight: bold /* ... */ .notice color: $color-primary

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // 用 Stylus 来写
    $color-primary = #ff4466
     
    strong
    color: $color-primary
    font-weight: bold
     
    /* ... */
     
    .notice
    color: $color-primary

    你可能已经意识到了,变量让开发者更容易实现网站视觉风格的统一,也让 “换肤” 这样的需求变得更加轻松易行。

    /*style.sass新版语法规则*/

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

    运算

    光有变量还是不够的,我们还需要有运算。如果说变量让值有了意义,那么运算则可以让值和值建立关联。有些属性的值其实跟其它属性的值是紧密相关的,CSS 语法无法表达这层关系;而在预处理语言中,我们可以用变量和表达式来呈现这种关系。

    举个例子,我们需要让一个容器最多只显示三行文字,在以前我们通常是这样写的:

    CSS

    .wrapper { overflow-y: hidden; line-height: 1.5; max-height: 4.5em; /* = 1.5 x 3 */ }

    1
    2
    3
    4
    5
    .wrapper {
    overflow-y: hidden;
    line-height: 1.5;
    max-height: 4.5em;  /* = 1.5 x 3 */
    }

    大家可以发现,我们只能用注释来表达 max-height 的值是怎么来的,而且注释中 3 这样的值也是幻数,还需要进一步解释。未来当行高或行数发生变化的时候,max-height 的值和注释中的算式也需要同步更新,维护起来很不方便。

    接下来我们用预处理语言来改良一下:

    CSS

    .wrapper $max-lines = 3 $line-height = 1.5 overflow-y: hidden line-height: $line-height max-height: unit($line-height * $max-lines, 'em')

    1
    2
    3
    4
    5
    6
    7
    .wrapper
    $max-lines = 3
    $line-height = 1.5
     
    overflow-y: hidden
    line-height: $line-height
    max-height: unit($line-height * $max-lines, 'em')

    乍一看,代码行数似乎变多了,但代码的意图却更加清楚了——不需要任何注释就把整件事情说清楚了。在后期维护时,只要修改那两个变量就可以了。

    值得一提的是,这种写法还带来另一个好处。$line-height 这个变量可以是 .wrapper 自己定义的局部变量(比如上面那段代码),也可以从更上层的作用域获取:

    CSS

    $line-height = 1.5 // 全局统一行高 body line-height: $line-height .wrapper $max-lines = 3 max-height: unit($line-height * $max-lines, 'em') overflow-y: hidden

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    $line-height = 1.5  // 全局统一行高
     
    body
    line-height: $line-height
     
    .wrapper
    $max-lines = 3
     
    max-height: unit($line-height * $max-lines, 'em')
    overflow-y: hidden

    这意味着 .wrapper 可以向祖先继承行高,而不需要为这个 “只显示三行” 的需求把自己的行高写死。有了运算,我们就有能力表达属性与属性之间的关联,它令我们的代码更加灵活、更加 DRY。

    h1{

    下面是这二者的语法:

    函数

    把常用的运算操作抽象出来,我们就得到了函数。

    开发者可以自定义函数,预处理器自己也内置了大量的函数。最常用的内置函数应该就是颜色的运算函数了吧!有了它们,我们甚至都不需要打开 Photoshop 来调色,就可以得到某个颜色的同色系变种了。

    举个例子,我们要给一个按钮添加鼠标悬停效果,而最简单的悬停效果就是让按钮的颜色加深一些。我们写出的 CSS 代码可能是这样的:

    CSS

    .button { background-color: #ff4466; } .button:hover { background-color: #f57900; }

    1
    2
    3
    4
    5
    6
    .button {
    background-color: #ff4466;
    }
    .button:hover {
    background-color: #f57900;
    }

    我相信即使是最资深的视觉设计师,也很难分清 #ff4466#f57900 这两种颜色到底有什么关联。而如果我们的代码是用预处理语言来写的,那事情就直观多了:

    CSS

    .button $color = #ff9833 background-color: $color &:hover background-color: darken($color, 20%)

    1
    2
    3
    4
    5
    6
    .button
    $color = #ff9833
     
    background-color: $color
    &:hover
    background-color: darken($color, 20%)

    此外,预处理器的函数往往还支持默认参数、具名实参、arguments 对象等高级功能,内部还可以设置条件分支,可以满足复杂的逻辑需求。

    color:#936;

    h1 {

    Mixin

    Mixin 是 CSS 预处理器提供的又一项实用功能。Mixin 的形态和用法跟函数十分类似——先定义,然后在需要的地方调用,在调用时可以接受参数。它与函数的不同之处在于…………

    ……

    ……

    1 赞 1 收藏 评论

    background-color:#333;

    color: #0982C1;

    关于作者:CSS魔法

    新葡亰496net 1

    百姓网前端工程师,移动 Web UI 框架 CMUI 作者,自称 “披着前端工程师外衣的设计师”。 个人主页 · 我的文章 · 12 ·     

    新葡亰496net 2

    }

    }

    正如你所看到的,在Sass样式中,这样的代码是在简单不过的了。

    你注意到了,这是一个再普通不过的,不过 Sass 同时也支持老的语法,就是不包含花括号和分号的方式:

    重要的一点是,Sass也同时支持老的语法,老的语法和常规的CSS语法略有不同,他需要严格的语法,任何的缩进和字符的错误都会造成样式的编译错 误。Sass可以省略大括号({})和分号(;),完全依靠严格的缩进和格式化代码,而且文件使用“.sass”扩展名,他的语法类似于:

    h1

    /*style.sass*/

    color: #0982c1

    h1

    而 Stylus 支持的语法要更多样性一点,它默认使用 .styl 的文件扩展名,下面是 Stylus 支持的语法:

    color:#936

    h1 {

    background-color: #333

    color: #0982C1;

    2.LESS语法

    }

    LESS是CSS的一种扩展形式,它并没有阉割CSS的功能,而是在现有的CSS语法上,添加了很多额外的功能。就语法规则而言,LESS和Sass一样,都是使用CSS的标准语法,只是LESS的源文件的扩展名是“.less”,其基本语法类似于:

    h1

    /*style.less*/

    color: #0982C1;

    h1 {

    h1

    color: #963;

    color #0982C1

    background-color: #333;

    你也可以在同一个样式单中使用不同的变量,例如下面的写法也不会报错:

    }

    h1 {

    3.Stylus语法

    color #0982c1

    Stylus的语法花样多一些,它的文件扩展名是“.styl”,Stylus也接受标准的CSS语法,但是他也像Sass老的语法规则,使用缩进控制,同时Stylus也接受不带大括号({})和分号的语法,如下所示:

    }

    /*style.styl*/

    h2

    /*类似于CSS标准语法*/

    font-size: 1.2em

    h1 {

    变量

    color: #963;

    你可以在 CSS 预处理器中声明变量,并在整个样式单中使用,支持任何类型的变量,例如颜色、数值(不管是否包括单位)、文本。然后你可以任意引用该变量。

    background-color:#333;

    Sass 的变量必须是 $ 开始,然后变量名和值使用冒号隔开,跟 CSS 的属性一致:

    }

    $mainColor: #0982c1;

    /*省略大括号({})*/

    $siteWidth: 1024px;

    h1

    $borderStyle: dotted;

    color: #963;

    body {

    background-color: #333;

    color: $mainColor;

    /*省略大括号({})和分号(;)*/

    border: 1px $borderStyle $mainColor;

    h1

    max-width: $siteWidth;

    color:#963

    }

    background-color:#333

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

    在Stylus样式中,你也可以在同一个样式文件中使用不同的语法规则,下面这样的写法也不会报错:

    @mainColor: #0982c1;

    /*style.styl*/

    @siteWidth: 1024px;

    h1 {

    @borderStyle: dotted;

    color  #963

    body {

    }

    color: @mainColor;

    h2

    border: 1px @borderStyle @mainColor;

    font-size:1.2em

    max-width: @siteWidth;

    六、Sass、LESS和Stylus特性

    }

    这三款CSS预处理器语言具有一些相同的特性,例如:变量、混入、嵌套、函数等。在这一节中,我们依次来对比一下这三款CSS预处理器语言各种特性的异同之处,以及使用方法。

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

    1.变量(Variables)

    mainColor = #0982c1

    如果你是一个开发人员,变量应该是你最好朋友之一。在CSS预处理器语言中你也可以声明变量,并在整个样式表中使用。CSS预处理器语言支持任何变量(例如:颜色、数值、文本)。然后你可以在任意地方引用变量。

    siteWidth = 1024px

    a)Sass的变量

    $borderStyle = dotted

    Sass声明变量必须是“$”开头,后面紧跟变量名和变量值,而且变量名和变量值需要使用冒号(:)分隔开。就像CSS属性设置一样:

    body

    /*声明变量*/

    color mainColor

    $mainColor: #963;

    border 1px $borderStyle mainColor

    $siteWidth: 1024px;

    max-width siteWidth

    $borderStyle: dotted;

    上面的三种不同的 CSS 预处理器的写法,最终都将产生相同的结果:

    /*调用变量*/                              |  /*转译出来的CSS*/

    body {

    ------------------------------------------ ------------------------------

    color: #0982c1;

    body {                                    |  body {

    border: 1px dotted #0982c1;

    color: $mainColor;                      |    color: #963;

    max-width: 1024px;

    border:1px $borderStyle $mainColor;    |    border:1px dotted #963;

    }

    max-width: $siteWidth;                  |    max-width: 1024px;

    你可以想象,加入你的 CSS 中使用了某个颜色的地方多达数十次,那么要修改颜色时你必须找到这数十次的地方并一一修改,而有了 CSS 预处理器,修改一个地方就够了!

    }                                        |  }

    嵌套

    b)LESS的变量

    如果我们需要在CSS中相同的 parent 引用多个元素,这将是非常乏味的,你需要一遍又一遍地写 parent。例如:

    LESS样式中声明变量和调用变量和Sass一样,唯一的区别就是变量名前面使用的是“@”字符:

    section {

    /*声明变量*/

    margin: 10px;

    @mainColor: #963;

    }

    @siteWidth: 1024px;

    section nav {

    @borderStyle: dotted;

    height: 25px;

    /*调用变量*/                            |  /*转译出来的CSS*/

    }

    ---------------------------------------- -------------------------------

    section nav a {

    body {                                  |  body {

    color: #0982C1;

    color: @mainColor;                    |    color:#963;

    }

    border:1px @borderStyle @mainColor;  |    border:1px dotted #963;

    section nav a:hover {

    max-width: @siteWidth;                |    max-width:1024px;

    text-decoration: underline;

    }                                      |  }

    }

    c)Stylus的变量

    而如果用 CSS 预处理器,就可以少些很多单词,而且父子节点关系一目了然。我们这里提到的三个 CSS 框架都是允许嵌套语法:

    Stylus样式中声明变量没有任何限定,你可以使用“$”符号开始。结尾的分号(;)可有可无,但变量名和变量值之间的等号(=)是需要的。有一 点需要注意的是,如果我们使用“@”符号开头来声明(0.22.4)变量,Stylus会进行编译,但其对应的值并不会赋值给变量。换句话说,在 Stylus中不要使用“@”符号开头声明变量。Stylus中调用变量的方法和LESS、Sass是完全相同的。

    section {

    /*声明变量*/

    margin: 10px;

    mainColor = #963;

    nav {

    siteWidth = 1024px;

    height: 25px;

    $borderStyle = dotted;

    a {

    /*调用变量*/                            |    /*转译出来的CSS*/

    color: #0982C1;

    ---------------------------------------- --------------------------------

    &:hover {

    body                                    | body {

    text-decoration: underline;

    color mainColor                      |  color: #963;

    }

    border 1px $borderStyle mainColor    |  border:1px dotted #963

    }

    max-width siteWidth                  |  max-width:1024px;

    }

    | }

    }

    Stylus还有一个独特功能,不需要分配值给变量就可以定义引用属性:

    最终生成的 CSS 结果是:

    /*水平垂直居中*/                    |  /*转译出来的CSS*/

    section {

    ------------------------------------ ------------------------------------

    margin: 10px;

    #logo                              |  #logo {

    }

    position  absolute                |    position:absolute;

    section nav {

    top  50%                          |    top:50%;

    height: 25px;

    left  50%                        |    left:50%;

    }

    width  w = 150px                  |    width:150px;

    section nav a {

    height  h = 80px                  |    height:80px;

    color: #0982C1;

    margin-left  -(w / 2)            |    margin-left:-75px;

    }

    margin-top  -(h / 2)                |    margin-top:-40px;

    section nav a:hover {

    |  }

    text-decoration: underline;

    从上面的代码中我们可以看出,CSS预处理器语言中的变量是值级别的重复使用,可以将相同的值定义成变量统一管理起来。

    }

    CSS预处理器语言中变量的特性适用于定义主题(也就是我们常说的换肤),我们可以将背景颜色、字体颜色、边框属性等常规样式统一定义,这样不同的主题只需要定义不同的变量文件就可以。

    非常之方便!

    2.作用域(Scope)

    Mixins (混入)

    CSS预处理器语言中的变量和其他程序语言一样,可以实现值的复用,同样它也存在生命周期,也就是Scope(变量范围,开发人员习惯称之为作用 域),简单点讲就是局部变量还是全局变量的概念,查找变量的顺序是先在局部定义中找,如果找不到,则查找上级定义,直至全局。下面我们通过一个简单的例子 来解释这三款CSS预处理器的作用域使用。

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

    a)Sass的作用域

    Sass 的混入语法:

    Sass中作用域在这三款预处理器是最差的,可以说在Sass中是不存在什么全局变量。具体来看下面的代码:

    @mixin error($borderWidth: 2px) {

    /*Sass样式*/

    border: $borderWidth solid #F00;

    $color: black;

    color: #F00;

    .scoped {

    }

    $bg: blue;

    .generic-error {

    $color: white;

    padding: 20px;

    color: $color;

    margin: 4px;

    background-color:$bg;

    @ include error();

    }

    }

    .unscoped {

    .login-error {

    color:$color;

    left: 12px;

    }

    position: absolute;

    先看转译出来的CSS样式:

    top: 20px;

    .scoped {

    @ include error(5px);

    color:white;/*是白色*/

    }

    background-color:blue;

    Less CSS 的混入语法:

    }

    .error(@borderWidth: 2px) {

    .unscoped {

    border: @borderWidth solid #F00;

    color:white;/*白色(无全局变量概念)*/

    color: #F00;

    }

    }

    示例明显的告诉我们,在Sass样式中定义变量,调用变量是没有全局变量一个概念存在,因此在Sass中定义了相同变量名时,在调用之时千万要多加小心,不然会给你的样式带来错误。

    .generic-error {

    b)LESS的作用域

    padding: 20px;

    LESS中的作用域和其他程序语言中的作用域非常的相同,他首先会查找局部定义的变量,如果没有找到,会像冒泡一样,一级一级往下查找,直到根为止,同样上面的例子,我们来看看他在LESS下所起的变化。

    margin: 4px;

    /*LESS样式*/

    .error();

    @color: black;

    }

    .scoped {

    .login-error {

    @bg: blue;

    left: 12px;

    @color: white;

    position: absolute;

    color: @color;

    top: 20px;

    background-color:@bg;

    .error(5px);

    }

    }

    .unscoped {

    Stylus 的混入语法:

    color:@color;

    error(borderWidth= 2px) {

    }

    border: borderWidth solid #F00;

    转译出来的CSS样式:

    color: #F00;

    .scoped {

    }

    color:white;/*白色(调用了局部变量)*/

    .generic-error {

    background-color:blue;

    padding: 20px;

    }

    margin: 4px;

    .unscoped {

    error();

    color:black;/*黑色(调用了全局变量)*/

    }

    }

    .login-error {

    c)Stylus的作用域

    left: 12px;

    Stylus虽然起步比较晚,但其作用域的特性和LESS一样,可以支持全局变量和局变量。会向上冒泡查找,直到根为止。

    position: absolute;

    3.混合(Mixins)

    top: 20px;

    Mixins是CSS预处理器中语言中最强大的特性,简单点来说,Mixins可以将一部分样式抽出,作为单独定义的模块,被很多选择器重复使用。 平时你在写样式时肯定有碰到过,某段CSS样式经常要用到多个元素中,这样你就需要重复的写多次。在CSS预处理器语言中,你可以为这些公用的CSS样式 定义一个Mixin,然后在你CSS需要使用这些样式的地方直接调用你定义好的Mixin。这是一个非常有用的特性,Mixins被当作一个公认的选择 器,还可以在Mixins中定义变量或者默认参数。

    error(5px);

    a)Sass的混合

    }

    Sass样式中声明Mixins时需要使用“@mixin”,然后后面紧跟Mixins的名,他也可以定义参数,同时可以给这个参数设置一个默认值,但参数名是使用“$”符号开始,而且和参数值之间需要使用冒号(:)分开。

    最终它们都将编译成如下的 CSS 样式:

    在选择器调用定义好的Mixins需要使用“@include”,然后在其后紧跟你要调用的Mixins名。不过在Sass中还支持老的调用方法,就是使用加号“ ”调用Mixins,在“ ”后紧跟Mixins名。

    .generic-error {

    一起来看个简单的例子,比如说在你的Sass样式中定义了一个名叫“error”的Mixin,这个“error”设置了一个参数“$borderWidth”,在没特别定义外,这个参数的默认值设置为“2px”:

    padding: 20px;

    /*声明一个Mixin叫作“error”*/

    margin: 4px;

    @mixin error($borderWidth:2px){

    border: 2px solid #f00;

    border:$borderWidth solid #f00;

    color: #f00;

    color: #f00;

    }

    }

    .login-error {

    /*调用error Mixins*/

    left: 12px;

    .generic-error {

    position: absolute;

    @include error();/*直接调用error mixins*/

    top: 20px;

    }

    border: 5px solid #f00;

    .login-error {

    color: #f00;

    @include error(5px);/*调用error mixins,并将参数$borderWidth的值重定义为5px*/

    }

    }

    继承

    b)LESS的混合

    当我们需要为多个元素定义相同样式的时候,我们可以考虑使用继承的做法。例如我们经常需要:

    在LESS中,混合是指将定义好的“ClassA”中引入另一个已经定义的“Class”,就像在当前的“Class”中增加一个属性一样。

    p,

    不过LESS样式中声明Mixins和Sass声明方法不一样,他更像CSS定义样式,在LESS可以将Mixins看成是一个类选择器,当然 Mixins也可以设置参数,并给参数设置默认值。不过设置参数的变量名是使用“@”开头,同样参数和默认参数值之间需要使用冒号(:)分隔开。

    ul,

    正如Sass混合是的示例,同样在LESS样式中定义一个名叫“error”的Mixin,这个“error”设置了一个参数“@borderWidth”,在没有特别定义外,这个参数的默认值是“2px”:

    ol {

    /*声明一个Mixin叫作“error”*/

    }

    .error(@borderWidth:2px){

    在 Sass 和 Stylus 我们可以这样写:

    border:@borderWidth solid #f00;

    .block {

    color: #f00;

    margin: 10px 5px;

    }

    padding: 2px;

    /*调用error Mixins*/

    }

    .generic-error {

    p {

    .error();/*直接调用error mixins*/

    @extend .block;

    }

    border: 1px solid #EEE;

    .login-error {

    }

    .error(5px);/*调用error mixins,并将参数@borderWidth的值重定义为5px*/

    ul, ol {

    }

    @extend .block;

    c)Stylus的混合

    color: #333;

    Stylus中的混合和前两款CSS预处理器语言的混合略有不同,他可以不使用任何符号,就是直接声明Mixins名,然后在定义参数和默认值之间用等号(=)来连接。

    text-transform: uppercase;

    /*声明一个Mixin叫作“error”*/

    }

    error(borderWidth=2px){

    在这里首先定义 .block 块,然后让 p 、ul 和 ol 元素继承 .block ,最终生成的 CSS 如下:

    border:borderWidth solid #f00;

    .block, p, ul, ol {

    color: #f00;

    margin: 10px 5px;

    }

    padding: 2px;

    /*调用error Mixins*/

    }

    .generic-error {

    p {

    error();/*直接调用error mixins*/

    border: 1px solid #EEE;

    }

    }

    .login-error {

    ul, ol {

    error(5px);/*调用error mixins,并将参数$borderWidth的值重定义为5px*/

    color: #333;

    }

    text-transform: uppercase;

    三个示例都将会转译成相同的CSS代码:

    }

    .generic-error {

    在这方面 Less 表现的稍微弱一些,更像是混入写法:

    border: 2px solid #f00;

    .block {

    color:#f00;

    margin: 10px 5px;

    }

    padding: 2px;

    .login-error {

    }

    border:5px solid #f00;

    p {

    color: #f00;

    .block;

    }

    border: 1px solid #EEE;

    4.嵌套(Nesting)

    }

    CSS预处理器语言中的嵌套指的是在一个选择器中嵌套另一个选择器来实现继承,从而减少代码量,并且增加了代码的可读性。比如说,我们在CSS中多 个元素有一个相同的父元素,那么写样式会变得很乏味,我们需要一遍一遍的在每个元素前写这个父元素,除非给特定的元素添加类名“class”或者ID。

    ul, ol {

    section {

    .block;

    margin:10px;

    color: #333;

    }

    text-transform: uppercase;

    section nav {

    }

    height:25px;

    生成的 CSS 如下:

    }

    .block {

    section nav a {

    margin: 10px 5px;

    color: #0982c1;

    padding: 2px;

    }

    }

    section nav a:hover {

    p {

    text-decoration: underline;

    margin: 10px 5px;

    }

    padding: 2px;

    相反,使用CSS预处理器语言的嵌套特性,我们可以在父元素的大括号({})里写这些元素。同时可以使用“&”符号来引用父选择器。对于Sass、LESS和Stylus这三款CSS预处理器语言的嵌套选择器来说,他们都具有相同的语法:

    border: 1px solid #EEE;

    section {

    }

    margin:10px;

    ul,

    nav {

    ol {

    height:25px;

    margin: 10px 5px;

    a {

    padding: 2px;

    color:#0982c1;

    color: #333;

    &:hover {

    text-transform: uppercase;

    text-decoration:underline;

    }

    }

    你所看到的上面的代码中,.block 的样式将会被插入到相应的你想要继承的选择器中,但需要注意的是优先级的问题。

    }

    导入 (Import)

    }

    很多 CSS 开发者对导入的做法都不太感冒,因为它需要多次的 HTTP 请求。但是在 CSS 预处理器中的导入操作则不同,它只是在语义上包含了不同的文件,但最终结果是一个单一的 CSS 文件,如果你是通过 @ import "file.css"; 导入 CSS 文件,那效果跟普通的 CSS 导入一样。注意:导入文件中定义的混入、变量等信息也将会被引入到主样式文件中,因此需要避免它们互相冲突。

    }

    reset.css:

    上面的预处理器转译出来的CSS代码和我们开始展示的CSS代码是相同的,非常的方便吧!

    body {

    5.继承(Inheritance)

    background: #EEE;

    对于熟悉CSS的同学来说,对于属性的继承并不陌生。平时在写CSS样式常碰到多个元素应用相同的样式时,我们在CSS中通常都是这样写:

    }

    p,ul,ol{/*样式写在这里*/}

    main.xxx:

    这样做非常的好,但往往我们需要给单独元素添加另外的样式,这个时候我们就需要把其中选择器单独出来写样式,如此一来我们维护样式就相当的麻烦。为了应对这个问题,CSS预处理器语言可以从一个选择继承另个选择器下的所有样式。

    @ import "reset.css";

    a)Sass和Stylus的继承

    @ import "file.{type}";

    Sass和Stylus的继承是把一个选择器的所有样式继承到另个选择器上。在继承另个选择器的样式时需要使用“@extend”开始,后面紧跟被继承的选择器:

    p {

    .block {

    background: #0982C1;

    margin: 10px 5px;

    }

    padding: 2px;

    最终生成的 CSS:

    }

    @ import "reset.css";

    p {

    body {

    @extend .block;/*继承.block选择器下所有样式*/

    background: #EEE;

    border: 1px solid #eee;

    }

    }

    p {

    ul,ol {

    background: #0982C1;

    @extend .block; /*继承.block选择器下所有样式*/

    }

    color: #333;

    颜色函数

    text-transform: uppercase;

    CSS 预处理器一般都会内置一些颜色处理函数用来对颜色值进行处理,例如加亮、变暗、颜色梯度等。

    }

    Sass:

    上面的代码转译成CSS:

    lighten($color, 10%);

    .block,p,ul,ol {

    darken($color, 10%);

    margin: 10px 5px;

    saturate($color, 10%);

    padding:2px;

    desaturate($color, 10%);

    }

    grayscale($color);

    p {

    complement($color);

    border: 1px solid #eee

    invert($color);

    }

    mix($color1, $color2, 50%);

    ul,ol {

    上面只是简单列了 Sass 的一些基本颜色处理函数,完整的列表请看 Sass Documentation.

    color:#333;

    下面是一个具体的例子:

    text-transform:uppercase;

    $color: #0982C1;

    }

    h1 {

    b)LESS的继承

    background: $color;

    LESS支持的继承和Sass与Stylus不一样,他不是在选择器上继承,而是将Mixins中的样式嵌套到每个选择器里面。这种方法的缺点就是在每个选择器中会有重复的样式产生。

    border: 3px solid darken($color, 50%);

    .block {

    }

    margin: 10px 5px;

    Less CSS:

    padding: 2px;

    lighten(@color, 10%);

    }

    darken(@color, 10%);

    p {

    saturate(@color, 10%);

    .block;/*继承.block选择器下所有样式*/

    desaturate(@color, 10%);

    border: 1px solid #eee;

    spin(@color, 10);

    }

    spin(@color, -10);

    ul,ol {

    mix(@color1, @color2);

    .block; /*继承.block选择器下所有样式*/

    LESS 完整的颜色函数列表请看 LESS Documentation.

    color: #333;

    LESS 使用颜色函数的例子:

    text-transform: uppercase;

    @color: #0982C1;

    }

    h1 {

    转译出来的CSS代码:

    background: @color;

    .block {

    border: 3px solid darken(@color, 50%);

    margin: 10px 5px;

    }

    padding:2px;

    Stylus:

    }

    lighten(color, 10%);

    p {

    darken(color, 10%);

    margin: 10px 5px;

    saturate(color, 10%);

    padding:2px;

    desaturate(color, 10%);

    border: 1px solid #eee

    完整的颜色函数列表请阅读 Stylus Documentation.

    }

    实例:

    ul,ol {

    color = #0982C1

    margin: 10px 5px;

    h1

    padding:2px;

    background color

    color:#333;

    border 3px solid darken(color, 50%)

    text-transform:uppercase;

    运算符

    }

    你可以直接在 CSS 预处理器中进行样式的计算,例如:

    正如所看到的,上面的代码“.block”的样式将会被插入到相应的你要继承的选择器中,但需要注意的是优先级的问题。

    body {

    6.运算符(Operations)

    margin: (14px/2);

    CSS预处理器语言还具有运算的特性,其简单的讲,就是对数值型的Value(如:数字、颜色、变量等)进行加减乘除四则运算。这样的特性在CSS样式中是想都不敢想的,但在CSS预处理器语言中对样式做一些运算一点问题都没有了,例如:

    top: 50px 100px;

    @base_margin: 10px;

    right: 100px - 50px;

    @double_margin: @base_margin * 2;

    left: 10 * 10;

    @full_page: 960px;

    }

    @half_page: @full_page / 2;

    一些跟具体浏览器相关的处理

    @quarter_page: (@full_page / 2) / 2;

    这是宣传使用预处理的原因之一,并且是一个很好的理由,这样可以节省的大量的时间和汗水。创建一个mixin来处理不同浏览器的CSS写法是很简单的,节省了大量的重复工作和痛苦的代码编辑。

    上面代码是LESS的运算示例,声明一下,在取得“@quarter_page”变量时,我们可以直接除以4,但是在这里,我们只是想演示一下圆括号组成的“运算顺序”(这个运算顺序小学生也知道)。在复合型运算中,小括号也是很有必要的,例如:

    Sass

    border: (@width / 2) solid #000;

    @mixin border-radius($values) {

    Sass在数字运算上要比LESS更专业,他可以直接换算单位了。Sass可以处理无法识别的度量单位,并将其输出。这个特性很明显是一个对未来的尝试——证明W3C作出的一些改变。

    -webkit-border-radius: $values;

    Stylus的运算是三款预处理器语言中最强大的一款,他拥有其他程序语言一样的运算功能,简单点的加减乘除,复杂的有关系运算、逻辑运算等。受限于篇幅,感兴趣的同学可以到官网上仔细阅读。

    -moz-border-radius: $values;

    7.颜色函数

    border-radius: $values;

    颜色函数是CSS预处理器语言中内置的颜色函数功能,这些功能可以对颜色进行处理,例如颜色的变亮、变暗、饱和度控制、色相控制,渐变颜色等处理十分的方便。

    }

    a)Sass颜色函数

    div {

    lighten($color, 10%); /* 返回的颜色在$color基础上变亮10% */

    @ include border-radius(10px);

    darken($color, 10%);  /* 返回的颜色在$color基础上变暗10% */

    }

    saturate($color, 10%);  /* 返回的颜色在$color基础上饱和度增加10% */

    Less CSS

    desaturate($color, 10%); /* 返回的颜色在$color基础上饱和度减少10% */

    .border-radius(@values) {

    grayscale($color);  /* 返回$color的灰度色*/

    -webkit-border-radius: @values;

    complement($color); /* 返回$color的补色 */

    -moz-border-radius: @values;

    invert($color);    /* 返回$color的反相色 */

    border-radius: @values;

    mix($color1, $color2, 50%); /* $color1 和 $color2 的 50% 混合色*/

    }

    这只是Sass中颜色函数的一个简单列表,更多详细的介绍可以阅读Sass文档。

    div {

    颜色函数可以运用到任何一个元素上,只要其有颜色的属性,下面是一个简单的例子:

    .border-radius(10px);

    $color: #0982C1;

    }

    h1 {

    Stylus

    background: $color;

    border-radius(values) {

    border: 3px solid darken($color, 50%);/*边框颜色在$color的基础上变暗50%*/

    -webkit-border-radius: values;

    }

    -moz-border-radius: values;

    b)LESS颜色函数

    border-radius: values;

    lighten(@color, 10%); /* 返回的颜色在@color基础上变亮10% */

    }

    darken(@color, 10%);  /* 返回的颜色在@color基础上变暗10%*/

    div {

    saturate(@color, 10%);  /* 返回的颜色在@color基础上饱和度增加10% */

    border-radius(10px);

    desaturate(@color, 10%); /* 返回的颜色在@color基础上饱和度降低10%*/

    }

    spin(@color, 10);  /* 返回的颜色在@color基础上色调增加10 */

    编译结果:

    spin(@color, -10); /* 返回的颜色在@color基础上色调减少10 */

    div {

    mix(@color1, @color2); /* 返回的颜色是@color1和@color2两者的混合色 */

    -webkit-border-radius: 10px;

    LESS的完整颜色函数功能,请阅读LESS文档。

    -moz-border-radius: 10px;

    下面是LESS中如何使用一个颜色函数的简单例子:

    border-radius: 10px;

    @color: #0982C1;

    }

    h1 {

    3D文本

    background: @color;

    要生成具有 3D 效果的文本可以使用 text-shadows ,唯一的问题就是当要修改颜色的时候就非常的麻烦,而通过 mixin 和颜色函数可以很轻松的实现:

    border: 3px solid darken(@color, 50%);

    Sass

    }

    @mixin text3d($color) {

    c)Stylus的颜色函数

    color: $color;

    lighten(color, 10%); /* 返回的颜色在'color'基础上变亮10% */

    text-shadow: 1px 1px 0px darken($color, 5%),

    darken(color, 10%);  /* 返回的颜色在'color'基础上变暗10% */

    2px 2px 0px darken($color, 10%),

    saturate(color, 10%);  /* 返回的颜色在'color'基础上饱和度增加10% */

    3px 3px 0px darken($color, 15%),

    desaturate(color, 10%); /*新葡亰496net, 返回的颜色在'color'基础上饱和度降低10% */

    4px 4px 0px darken($color, 20%),

    有关于Stylus的颜色函数介绍,请阅读Stylus文档。

    4px 4px 2px #000;

    下面是Stylus颜色函数的一个简单实例:

    }

    color = #0982C1

    h1 {

    h1

    font-size: 32pt;

    background color

    @ include text3d(#0982c1);

    border 3px solid darken(color, 50%)

    }

    从上面展示的部分颜色函数可以告诉我们,Sass、LESS和Stylus都具有强大的颜色函数功能,功能特性上都大同小异,只是在使用方法上略有不同。而且他们都具有相同的一个目的,就是方便操作样式中的颜色值。

    Less CSS

    8.导入(Import)

    .text3d(@color) {

    在CSS中,并不喜欢用@import来导入样式,因为这样的做法会增加http的请求。但是在CSS预处理器中的导入(@import)规则和 CSS的有所不同,它只是在语义上导入不同的文件,但最终结果是生成一个CSS文件。如果你是通赤“@import ‘file.css’”导入“file.css”样式文件,那效果跟普通CSS导入样式文件一样。注意:导入文件中定义了变量、混合等信息也将会被引入到 主样式文件中,因此需要避免他们的相互冲突。

    color: @color;

    Sass、LESS和Stylus三款CSS预处理器语言,导入样式的方法都是一样:

    text-shadow: 1px 1px 0px darken(@color, 5%),

    被导入文件的样式:

    2px 2px 0px darken(@color, 10%),

    /* file.{type} */

    3px 3px 0px darken(@color, 15%),

    body {

    4px 4px 0px darken(@color, 20%),

    background: #EEE;

    4px 4px 2px #000;

    }

    }

    需要导入样式的文件:

    span {

    @import "reset.css";

    font-size: 32pt;

    @import "file.{type}";

    .text3d(#0982c1);

    p {

    }

    background: #0982C1;

    Stylus

    }

    text3d(color)

    转译出来的CSS代码:

    color: color

    @import "reset.css";

    text-shadow: 1px 1px 0px darken(color, 5%), 2px 2px 0px darken(color, 10%), 3px 3px 0px darken(color, 15%), 4px 4px 0px darken(color, 20%), 4px 4px 2px #000

    body {

    span

    background: #EEE;

    font-size: 32pt

    }

    text3d(#0982c1)

    p {

    生成的 CSS

    background: #0982C1;

    span {

    }

    font-size: 32pt;

    9.注释(Comment)

    color: #0982c1;

    CSS预处理器语言中的注释是比较基础的一部分,这三款预处理器语言除了具有标准的CSS注释之外,还具有单行注释,只不过单行注释不会被转译出来。

    text-shadow: 1px 1px 0px #097bb7,

    a)Sass、LESS和Stylus的多行注释

    2px 2px 0px #0875ae,

    多行注释和CSS的标准注释,他们可以输出到CSS样式中,但在Stylus转译时,只有在“compress”选项未启用的时候才会被输出来。

    3px 3px 0px #086fa4,

    /*

    4px 4px 0px #07689a,

    *我是注释

    4px 4px 2px #000;

    */

    }

    body

    效果图:

    padding 5px

    列 (Columns)

    b)Sass、LESS和Stylus的单行注释

    使用数值操作和变量可以很方便的实现适应屏幕大小的布局处理。

    单行注释跟JavaScript语言中的注释一样,使用双斜杠(//),但单行注释不会输出到CSS中。

    Sass

    //我是注释

    $siteWidth: 1024px;

    @mainColor:#369;//定义主体颜色

    $gutterWidth: 20px;

    在Stylus中除了以上两种注释之外,他还有一种注释,叫作多行缓冲注释。这种注释跟多行注释类似,不同之处在于始的时候,这里是”/*!”。这个相当于告诉Stylus压缩的时候这段无视直接输出。

    $sidebarWidth: 300px;

    /*!

    body {

    *给定数值合体

    margin: 0 auto;

    */

    width: $siteWidth;

    add(a, b)

    }

    a b

    .content {

    上面从九个常用的特性对Sass、LESS和Stylus三款CSS预处理器语言的使用做了对比,在某些特性上可以说是一模一样,而有一些特性上功 能其实一样,只是在部分书写规则上有所不同。当然有些特性是完全不同。在这里几是从使用方法上做为一个比较,主要目的是让大家经过对比之后,使自己选择哪 一款CSS预处理器语言有所方向和帮助。

    float: left;

    七、CSS预处理器的高级应用

    width: $siteWidth - ($sidebarWidth $gutterWidth);

    我们知道,Sass、LESS和Stylus都具有变量、混合、嵌套、函数和作用域等特性,但这些特性都是一些普通的特性。其实除了这些特性之外, 他们还拥有一些很有趣的特性有助于我们的开发,例如条件语句、循环语句等。接下来,我们同样从使用上来对比一下这三款CSS预处理器语言在这方面应用又有 何不同异同。

    }

    a)条件语句

    .sidebar {

    说到编程,对于编程基本控制流,大家并不会感到陌生,除了循环就是条件了。条件提供了语言的可控制,否则就是纯粹的静态语言。提供的条件有导入、混合、函数以及更多。在编程语言中常见的条件语句:

    float: left;

    if/else if/else

    margin-left: $gutterWidth;

    if表达式满足(true)的时候执行后面语然块,否则,继续后面的else if或else。

    width: $sidebarWidth;

    在这三款css3预处理器语言中都具有这种思想,只不过LESS中表达的方式略有不现,接下来我们依次看看他们具体如何使用。

    }

    Sass的条件语句

    Less CSS

    Sass样式中的条件语句和其他编程语言的条件语句非常相似,在样式中可以使用“@if”来进行判断:

    @siteWidth: 1024px;

    p {

    @gutterWidth: 20px;

    @if 1 1 == 2 { border: 1px solid;  }

    @sidebarWidth: 300px;

    @if 5 < 3      { border: 2px dotted; }

    body {

    @if null      { border: 3px double; }

    margin: 0 auto;

    }

    width: @siteWidth;

    编译出来的CSS:

    }

    p {

    .content {

    border: 1px solid;

    float: left;

    }

    width: @siteWidth - (@sidebarWidth @gutterWidth);

    在Sass中条件语句还可以和@else if、@else配套使用:

    }

    $type: monster;

    .sidebar {

    p {

    float: left;

    @if $type == ocean {

    margin-left: @gutterWidth;

    color: blue;

    width: @sidebarWidth;

    } @else if $type == matador {

    }

    color: red;

    Stylus

    } @else if $type == monster {

    siteWidth = 1024px;

    color: green;

    gutterWidth = 20px;

    } @else {

    sidebarWidth = 300px;

    color: black;

    body {

    }

    margin: 0 auto;

    }

    width: siteWidth;

    转译出来的CSS:

    }

    p {color:green;}

    .content {

    Stylus的条件语句

    float: left;

    Stylus的条件语句的使用和其他编程的条件语句使用基本类似,不同的是他可以在样式去省略大括号({}):

    width: siteWidth - (sidebarWidth gutterWidth);

    box(x, y, margin = false)

    }

    padding y x

    .sidebar {

    if margin

    float: left;

    margin y x

    margin-left: gutterWidth;

    body

    width: sidebarWidth;

    box(5px, 10px, true)

    }

    Stylus同样可以和else if、else配套使用:

    实际效果

    box(x, y, margin-only = false)

    body {

    if margin-only

    margin: 0 auto;

    margin y x

    width: 1024px;

    else

    }

    padding y x

    .content {

    Stylus除了这种简单的条件语句应用之外,他还支持后缀条件语句。这就意味着if和unless(熟悉Ruby程序语言的用户应该都知道unless条件,其基本上与if相反,本质上是“(!(expr))”)当作操作符;当右边表达式为真的时候执行左边的操作对象。

    float: left;

    例如,我们定义了negative()来执行一些基本的检查。下面我们使用块式条件:

    width: 704px;

    negative(n)

    }

    unless n is a 'unit'

    .sidebar {

    error('无效数值')

    float: left;

    if n < 0

    margin-left: 20px;

    yes

    width: 300px;

    else

    }

    no

    错误报告

    接下来,我们利用后缀条件让我们的方法简洁:

    如果你经常 CSS 你会发现很难找到 CSS 中错误的地方,这也是预处理框架的好处,它会报告错误,你可以从这篇文章中学习如何让 CSS 框架错误报告。

    negative(n)

    注释

    error('无效数值') unless n is a 'unit'

    以上三种框架都支持形如 的多行注释以及 // 的单行注释。

    return yes if n < 0

    no

    当然,我们可以更进一步。如这个“n < 0 ? yes : no”可以用布尔代替:“n < 0”。后缀条件适合于大多数的单行语句。如“@import,@charset”混合书写等。当然,下面所示的属性也是可以的:

    pad(types = margin padding, n = 5px)

    padding unit(n, px) if padding in types

    margin unit(n, px) if margin in types

    body

    pad()

    body

    pad(margin)

    body

    apply-mixins = true

    pad(padding, 10) if apply-mixins

    上面代码转译出来的CSS:

    body {

    padding: 5px;

    margin: 5px;

    }

    body {

    margin: 5px;

    }

    body {

    padding: 10px;

    }

    LESS的条件语句

    LESS的条件语句使用有些另类,他不是我们常见的关键词if和else if之类,而其实现方式是利用关键词“when”。

    .mixin (@a) when (@a >= 10) {

    background-color: black;

    }

    .mixin (@a) when (@a < 10) {

    background-color: white;

    }

    .class1 { .mixin(12) }

    .class2 { .mixin(6) }

    转译出来的CSS:

    .class1 {

    background-color: black;

    }

    .class2 {

    background-color: white;

    }

    利用When以及<、>、=、<=、>=是十分简单和方便的。LESS并没有停留在这里,而且提供了很多类型检查函数来辅助条件表达式,例如:iscolor、isnumber、isstring、iskeyword、isurl等等。

    .mixin (@a) when (iscolor(@a)) {

    background-color: black;

    }

    .mixin (@a) when (isnumber(@a)) {

    background-color: white;

    }

    .class1 { .mixin(red) }

    .class2 { .mixin(6) }

    转译出来的CSS

    .class1 {

    background-color: black;

    }

    .class2 {

    background-color: white;

    }

    另外,LESS的条件表达式同样支持AND和OR以及NOT来组合条件表达式,这样可以组织成更为强大的条件表达式。需要特别指出的一点是,OR在LESS中并不是or关键词,而是用,来表示or的逻辑关系。

    .smaller (@a, @b) when (@a > @b) {

    background-color: black;

    }

    .math (@a) when (@a > 10) and (@a < 20) {

    background-color: red;

    }

    .math (@a) when (@a < 10),(@a > 20) {

    background-color: blue;

    }

    .math (@a) when not (@a = 10)  {

    background-color: yellow;

    }

    .math (@a) when (@a = 10)  {

    background-color: green;

    }

    .testSmall {.smaller(30, 10) }

    .testMath1 {.math(15)}

    .testMath2 {.math(7)}

    .testMath3 {.math(10)}

    转译出来的CSS

    .testSmall {

    background-color: black;

    }

    .testMath1 {

    background-color: red;

    background-color: yellow;

    }

    .testMath2 {

    background-color: blue;

    background-color: yellow;

    }

    .testMath3 {

    background-color: green;

    }

    b)循环语句

    Sass和Stylus还支持for循环语句,而LESS并没支持for循环语句,但值得庆幸的是,在LESS中可以使用When来模拟出for循环的特性。

    Sass的循环语句

    Sass中使用for循环语句需要使用@for,并且配合“from”和“through”一起使用,其基本语法:

    @for $var from through {语句块}

    我们来看一个简单的例子:

    @for $i from 1 through 3 {

    .item-#{$i} { width: 2em * $i; }

    }

    转译出来的CSS代码:

    .item-1 {  width: 2em; }

    .item-2 {  width: 4em; }

    .item-3 {  width: 6em; }

    在Sass中循环语句除了@for语句之外,还有@each语句和@while语句

    @each循环语法:

    @each $var in {语句块}

    来看个简单的实例:

    @each $animal in puma, sea-slug, egret, salamander {

    .#{$animal}-icon {

    background-image: url('#{$animal}.png');

    }

    }

    转译出来的CSS

    .puma-icon {  background-image: url('puma.png'); }

    .sea-slug-icon {  background-image: url('sea-slug.png'); }

    .egret-icon {  background-image: url('gret.png'); }

    .salamander-icon {  background-image: url('salamander.png') }

    @while循环使用和其他编程语言类似:

    $i: 6;

    @while $i > 0 {

    .item-#{$i} { width: 2em * $i; }

    $i: $i - 2;

    }

    转译出来的CSS

    .item-6 {  width: 12em; }

    .item-4 {  width: 8em; }

    .item-2 {  width: 4em; }

    Stylus的循环语句

    在Stylus样式中通过for/in对表达式进行循环,形式如下:

    for [, ] in

    例如:

    body

    for num in 1 2 3

    foo num

    转译出来CSS

    body {

    foo: 1;

    foo: 2;

    foo: 3;

    }

    下面这个例子演示了如何使用:

    body

    fonts = Impact Arial sans-serif

    for font, i in fonts

    foo i font

    转译出来的CSS

    body {

    foo: 0 Impact;

    foo: 1 Arial;

    foo: 2 sans-serif;

    }

    LESS的循环语句

    在LESS语言中并没有现在的循环语句,可是像其条件语句一样,通过when来模拟出他的循环功能。

    .loopingClass (@index) when (@index > 0) {

    .myclass {

    z-index: @index;

    }

    // 递归

    .loopingClass(@index - 1);

    }

    // 停止循环

    .loopingClass (0) {}

    // 输出

    .loopingClass (3);

    转译出的CSS

    .myclass {z-index: 3;}

    .myclass {z-index: 2;}

    .myclass {z-index: 1;}

    相比之下,Sass和Stylus对条件语句和循环语句的处理要比LESS语言强大。因为他们具有真正的语言处理能力。

    综上所述,我们对Sass、LESS和Stylus做一个简单的对比总结:

    三者都是开源项目;

    Sass诞生是最早也是最成熟的CSS预处理器,有Ruby社区和Compass支持;Stylus早期服务器Node JS项目,在该社区得到一定支持者;LESS出现于2009年,支持者远超于Ruby和Node JS社区;

    Sass和LESS语法较为严谨、严密,而Stylus语法相对散漫,其中LESS学习起来更快一些,因为他更像CSS的标准;

    Sass和LESS相互影响较大,其中Sass受LESS影响,已经进化到了全面兼容CSS的SCSS;

    Sass和LESS都有第三方工具提供转译,特别是Sass和Compass是绝配;

    Sass、LESS和Stylus都具有变量、作用域、混合、嵌套、继承、运算符、颜色函数、导入和注释等基本特性,而且以“变量”、“混合”、“嵌套”、“继承”和“颜色函数”称为五大基本特性,各自特性实现功能基本相似,只是使用规则上有所不同;

    Sass和Stylus具有类似于语言处理的能力,比如说条件语句、循环语句等,而LESS需要通过When等关键词模拟这些功能,在这一方面略逊一层;

    上面是CSS预处理器语言中的Sass、LESS和Stylus在某些方面的对比,相对于CSS来说,上面都是CSS预处理器语言的优点?那么他有没有缺点呢?

    万物都有阴阳两极,有圆就有缺,CSS预处理器语言也逃避不了这个宿命。个人感觉CSS预处理器语言那是程序员的玩具,想通过编程的方式跨界解决 CSS的问题。可以CSS应该面临的问题一个也少不了,只是增加了一个编译过程而已,简单来说CSS预处理器语言较CSS玩法变得更高级了,但同时降低了 自己对最终代码的控制力。更致命的是提高了门槛,首先是上手门槛,其次是维护门槛,再来是团队整体水平和规范的门槛。这也造成了初学学习成本的昂贵。

    全文从Sass、LESS和Stylus的背景介绍、安装步骤、转译方法、语法规则、基本特性和高级应用六个方面对目前世面上流行的三款CSS预处 理器语法做了一个对比。他们各有各的优势,也各有各的劣势。现在我们又回到当初提的问题“我应该选择哪种CSS预处理器?”。不知道你是否可以做出选择?

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:新葡亰496net:less和stylus的安装使用和入门实践,

    关键词:

上一篇:与超酷例子,css3硬件加速

下一篇:没有了