less和sass的介绍和差异

● 混入(Mixins)——class中的class;

● 参数混入——可以传递参数的class,就像函数一样;

● 嵌套规则——Class中嵌套class,从而减少重复的代码;

● 运算——CSS中用上数学;

● 颜色功能——可以编辑颜色;

● 名字空间(namespace)——分组样式,从而可以被调用;

● 作用域——局部修改样式;

● JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

LESS和Sass的主要不同就是他们的实现方式,LESSS是基于JavaScript,所以,是在客户端处理的。

另一方面,Sass是基于Ruby的,然后是在服务器端处理的。很多开发者不会选择LESS因为JavaScript引擎需要额外的时间来处理代码然后输出修改过的CSS到浏览器。关于这个有很多种方式,我选择的是只在开发环节使用LESS。一旦我完成了开发,我就复制然后粘贴LESS输出的到一个压缩器,然后到一个单独的CSS文件来替代LESS文件。另一个选择是使用LESS.app来编译和压缩你的LESS文件。两个选择都将最小化你的样式输出,从而避免由于用户的浏览器不支持JavaScript而可能引起的任何问题。尽管这不大可能,但终归是有可能的。

LESS Is More

介绍

在你的项目中引入LESS很简单:

1.下载less.js;

2.创建一个文件来放你的样式,比如style.less;

3.添加以下代码到你的HTML的<head>中:


1

2

<link rel="stylesheet/less" type="text/css" href="styles.less">

<script src="less.js" type="text/javascript"></script>

请注意link的rel属性。你需要在属性值的最后面使用/less以使LESS起作用。然后在link后面引入scirpt也是必须的。如果你在用HTML5语法——为什么不用呢?——你可以省去type=”text/css”和type=”text/javascript”。

其实也有一个服务器端的LESS版本。在服务器上安装LESS的最简单的办法就是使用Node Package Manager (NPM,一看就知道是基于Node.js的)。

变量

如果你是个开发者,变量应该是你最好的朋友。如果你要重复的使用一个信息(本例中就是color),将它设置为一个变量就可以。这样,你就可以保证自己的一致性并可能减少滚动代码来查找颜色值、复制、粘贴等繁琐的工作了。你甚至可以加或者减一些你需要渲染的HEX值到这些颜色上面。看下例子:


1

2

3

@blue: #00c;

@light_blue: @blue + #333;

@dark_blue: @blue - #333;

如果我们将这些样式应用到3个div上面,我们就可以看到由加上和减掉的HEX值形成的渐变的效果:

从@light_blue到@blue到@dark_blue的渐变效果

关于变量在LESS和Sass中的唯一区别就是,LESS用@,Sass用$。同时还有一些作用域上的差别,我后面会提到。

混入(mixin)

偶尔,我们会创建一些会在样式表中重复使用的样式规则。没有人会阻止你在一个HTML的元素中使用多个class,但是你可以用LESS,在样式表中完成。为了描述这一点,我写了一点儿例子:


1

2

3

4

5

6

7

8

9

10

11

.border {

    border-top: 1px dotted #333;

}

article.post {

    background: #eee;

    .border;

}

ul.menu {

    background: #ccc;

    .border;

}

这可以给到你与你在两个元素中分别添加.bordered class同样的效果——而且仅仅在样式表中就完成了。而且它工作的很好:

文字和无序列表都被用上了边框样式

在Sass中,你要在样式规则前面添加@mixin声明,规定它是个嵌套。然后,通过@include来调用它:


1

2

3

4

5

6

7

8

9

10

11

@mixin border {

    border-top: 1px dotted #333;

}

article.post {

    background: #eee;

    @include border;

}

ul.menu {

    background: #ccc;

    @include border;

}

参数混入

就像在CSS中有函数功能一样,这些对于那些在现在的CSS工作中多余的工作非常有用。最好和最有用的例子就是我们正在经历的从CSS2到CSS3过渡过程中的很多浏览器私有前缀。Nettuts+有一篇Jeffrey Way写的很赞的视频和文章,内容是包含着由有用的参数组成的文件,他们涵盖了大部分使用各个浏览器私有前缀的CSS3属性。例如,在他们的格式中,一个简单的处理圆角的mixin是这样的:


1

2

3

4

5

.border-radius( @radius: 3px ) {

-webkit-border-radius: @radius;

-moz-border-radius: @radius;

border-radius: @radius;

}

在这个例子中,.border-radius有个默认的3px的圆角,但是你可以使用你需要的任何值。.border-radius(10px)将会生成半径为10px的圆角。

Sass中的语法很像LESS,只是使用$声明变量,然后使用前面提到的@mixin和@include来调用。

选择器继承

这个东西LESS并没有提供。通过这个功能,你可以将一个选择器附加到已经预先定义的选择器上,而无需再使用逗号将两者分开的写法了:


1

2

3

4

5

6

7

8

9

10

11

.menu {

    border: 1px solid #ddd;

}

.footer {

    @extend .menu;

}

/* 上面的写法规则和下面的效果是一样的: */

.menu, .footer {

    border: 1px solid #ddd;

}

嵌套规则

在css中嵌套class和ID是避免你的样式干扰或者被别的样式干扰的唯一方法了。但是这可能会很凌乱。使用一个类似于#site-body .post .post-header h2 的选择器毫无吸引力而且会占用大量不必要的空格。使用LESS,你可以嵌套id、class以及标签。对于前面提到的例子,你可以这样写:


1

2

3

4

5

6

7

8

9

10

11

#site-body { …

    .post { …

        .post-header { …

            h2 { … }

            a { …

                &amp;:visited { … }

                &amp;:hover { … }

            }

        }

    }

}

上面的代码最终和上面的例子(那一长串的选择器)的效果一样,但是要更容易阅读和理解的多,而且它占用很少的空间。你也可以通过&来引用元素样式到他们的伪元素上,该功能类似于JavaScript中的this。

运算

这可能是你所期望的:使用数字或者变量在你的样式表中实现数学运算!


1

2

3

4

5

@base_margin: 10px;

@double_margin: @base_margin * 2;

@full_page: 960px;

@half_page: @full_page / 2;

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

声明下,我也意识到我可以除以4来获得@quarter_page变量,但是这里我只是想要演示下圆括号组成“运算顺序”在这里也是可以用的。在使用简写的规则中,小括号也是必须的,比如 border: (@width / 2) solid #000。

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


1

2

3

4

5

/* Sass */

2in + 3cm + 2pc = 3.514in

/* LESS */

2in + 3cm + 2pc = Error

Color函数

在文章开头,我提到了LESS如何帮我在编码过程中处理围绕着一个调色板。对此贡献最大的一部分就是颜色函数。加入你用一个标准的蓝色贯穿到你的样式中,然后你想要在表单中用这个蓝色来做一个渐变的按钮。你可以打开Photoshop或者其它的编辑器来获取一个比蓝色较浅的或者较暗的HEX色值来作为渐变色。或者,你可以只是使用LESS中的颜色函数。


1

2

3

4

5

6

7

8

9

10

11

12

@blue: #369;

.submit {

    padding: 5px 10px;

    border: 1px solid @blue;

    background: -moz-linear-gradient(top, lighten(@blue, 10%), @blue 100%); /*Moz*/

    background: -webkit-gradient(linear, center top, center bottom, from(lighten(@blue, 10%)), color-stop(100%, @blue)); /*Webkit*/

    background: -o-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*Opera*/

    background: -ms-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*IE 10+*/

    background: linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*W3C*/

    color: #fff;

    text-shadow: 0 -1px 1px rgba(0,0,0,0.4);

}

lighten函数很明显就是用百分比值来减轻颜色,在这个例子中,它将减轻这个基础的蓝色的10%。这种方法可以让我们变化的元素或者其它任何元素的颜色值——只是简单的改变基础颜色而已。这对于主题(模板)来说非常有用。而且,如果你使用参数功能,像上面提到的,你还可以更简单的应用到一些浏览器私有前缀的声明中,比如:.linear-gradient(lighten(@blue), @blue, 100%);。

嗯,最终的效果的确很赞:

很赞的渐变的、基于变量的”Submit”按钮

还有很多其它的色彩函数,比如变暗或者调整颜色的饱和度,甚至你可以旋转色盘来使用其它颜色。我建议亲自尝试下你能想出的(用法)。

Sass貌似有更多的选项——但我并不需要这么多。我个人最常用的还是lighten和darken。如果你想了解更多,可以看一下这篇很详细的介绍

条件语句与控制

这是一个的确很赞的东东,也是另一个LESS不支持的功能。使用 Sass,你可以使用if { } else { } 条件语句,以及for { }循环。它甚至支持 and、 or和 not,以及 <、 >、 <=、 >= 和 == 等操作符。


1

2

3

4

5

6

7

8

9

10

11

12

13

/* Sample Sass "if" statement */

@if lightness($color) &gt; 30% {

    background-color: #000;

} @else {

    background-color: #fff;

}

/* Sample Sass "for" loop */

@for $i from 1px to 10px {

    .border-#{i} {

    border: $i solid blue;

    }

}

名字空间(Namespaces)

名字空间可以用于组织我们的CSS到另一个档次,我们可以将一些公用的样式分组,然后在用的时候直接使用。例如,如果我们创建了一个名为default的样式分组,我们就可以在用到的时候直接从该组中调用。


1

2

3

4

5

6

7

8

#defaults {

    .nav_list () {

        list-style: none;

        margin: 0; padding: 0;

    }

    .button () { … }

    .quote () { … }

}

然后,在我们的代码中,如果我们正好在一个nav元素中使用了ul元素,我们就会想到我们需要default样式。那么我们就可以简单的调用它,它也会被直接应用。


1

2

3

nav ul {

    #defaults &gt; .nav_list;

}

作用域

作用域是编程中的标配,LESS中也是。如果你在你样式表的root级声明一个变量,它在整个文档中都是可以用的。然而,如果你在一个选择器,比如id或者class中,重新定义了这个变量,那么,它就只能在这个选择器中可用了——当然是重新定义后的新值。


1

2

3

4

5

6

7

8

@color: #00c; /* 蓝色 */

#header {

    @color: #c00; /* red */

    border: 1px solid @color; /* 红色边框 */

}

#footer {

    border: 1px solid @color; /* 蓝色边框 */

}

因为我们在#header中重新定义了color变量,变量的值将会是不同的而且只会在该选择器中有效。它之前或者之后的所有地方,如果没有被重新定义,都会保持那个原始的值。

作用域在Sass中稍有不同。在上面的代码中,当@color变量变为红色后,代码中,此处之后的该变量的值,将会被重写(成为红色)。

注释

这一部分比较基础。LESS中允许两种注释写法。标准的CSS注释,/* comment */,是有效的,而且能够通过处理并正确输出。当行注释,// comment,同样可以用但是不能够通过处理也不能被输出,然后,结果是,“无声的”。

导入

导入也相当符合标准。标准的 @import: ‘classes.less’; 处理的很好。然而,如果你想要导入其它的LESS文件,那么文件的扩展名是可选的,所以 @import ‘classes’; 也是可行的。如果你想要导入一些无需LESS处理的内容,你可以使用 .css 扩展 (比如, @import: ‘reset.css’;)。

字符串插入

字符串也是可以用于变量中的,然后通过@{name}来调用。


1

2

@base_url : ‘http://www.qianduan.net‘;

background-image: url("@{base_url}/images/background.png");

转义(Escaping)

可能偶尔会需要引入一个CSS中非法或者LESS无法识别的值。通常是一些IE的hack。要避免抛出异常并破坏LESS,你将需要避开它们。


1

2

3

4

5

6

7

8

.class {

    filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=20)";

}

/*实际上将会输出下面的代码: */

.class {

    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);

}

JavaScript 赋值

这是LESS中我最中意的部分:在样式表中使用Javascript——相当精彩。你可以使用表达式,也可以参考环境方向来使用反单引号。


1

2

3

4

5

6

7

8

@string: `‘howdy‘.toUpperCase()`; /* @string 变成 ‘HOWDY‘ */

/* 你也可以使用前面提到的插值: */

@string: ‘howdy‘;

@var: ~`‘@{string}‘.topUpperCase()`; /* 变为 ‘HOWDY‘ */

/* 获取文档的信息 */

@height = `document.body.clientHeight`;

输出格式

然而LESS并没有输出设置,而Sass提供4中输出选项:nested, compact, compressed 和 expanded。

时间: 2024-10-05 03:44:03

less和sass的介绍和差异的相关文章

SASS用法介绍

SASS用法介绍 SASS是一种CSS预处理器提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 安装SASS SASS需要ruby支持,还需要gem,gem是ruby的包管理工具,ruby 1.9.1是自带gem的,如果是用1.8版本的话,需要另外安装.如果是windows的话,需要安装rubygems. SASS一般会和Compass一起使用,这个也可以用gem来安装. Ruby安装完之后,运行 gem install sass --pre gem insta

动态样式语言Sass&amp;Less介绍与区别

一. Sass/Scss&Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,语法跟css一样(但多了些功能),比css好写,而且更容易阅读.Sass语法类似与Haml,属于缩排语法(makeup),用意就是为了快速写Html和Css. Less一种动态样式语言. 将CSS赋予了动态语言的特性,如变量,继承,运算, 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),也可一在服务端运行 (

Linux MySQL差异备份技巧

MSSQL差异备份使用技巧 15 Apr 2013 所谓的差异备份,就是只备份最近一次备份之后到此次备份之前所增加的那一部分数据.打个比方我第N次备份后数据库存放的内容是ABCD,然后我第N+1次 备份的时候使用差异备份,此时数据库的存放的内容是ABCDEFG.那么我差异备份的结果就是EFG,只备份增加量.都明白了我们就开始讲点有用的东西 啦,嘿嘿~~为什么要用差异备份呢?因为规模点的网站数据库一般有几十M甚至,那么你备份出来的数据就有几十M,然后你从WEB上打开个几十M内容文件的 话……估计要

Sass学习笔记--什么是sass

CSS 预处理器 "CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用. 可以在 CSS 中使用变量.简单的逻辑程序.函数,等等在编程语言中的一些基本特性,使得CSS 更加简洁.适应性更强.可读性更佳,更易于维护. Sass官方介绍(http://sass-lang.com/) Sass is the most mature, stable, and powerful professional grade CSS extension

CSS——sass &amp; compass

好的代码习惯:应该是注释占用整个篇幅的2/3. 慕课网学习笔记:(http://www.imooc.com/learn/364) 1.理论基础: sass_Syntactically Awesome StyleSheets sass如同锤子,compass如同锤子,而css如同锤子和钉子完美应用的产品. sass和compass的好处: 使用sass和compass可以写出更优秀的css: 解决css编写过程中的痛点问题,如精灵图合图问题: 有效组织样式.图片.字体等项目元素. 2.sass的安

thinkphp架构

模块: Common是一个特殊的公共模块,访问所有子模块之前都会首先加载Common模块配置文件( Conf/config.php )和公共函数文件( Common/function.php ). 但Common模块本身不能通过URL直接访问. 配置禁止访问的模块的方法: 'MODULE_DENY_LIST' => array('Common','Runtime','Api') 配置允许访问的模块: 'MODULE_ALLOW_LIST' => array('Home','Admin','Us

EventUtil——跨浏览器的事件对象

前言:什么是EventUtil? 在JavaScript中,DOM0级.DOM2级与旧版本IE(8-)为对象添加事件的方法不同 为了以跨浏览器的方式处理事件,需要编写一段“通用代码”,即跨浏览器的事件处理程序 习惯上,这个方法属于一个名为EventUtil的对象 编写并使用该对象后,可保证处理事件的代码能在大多数浏览器下一致的运行 本文将围绕着EventUtil对象展开,并提供该通用对象代码以作参考分享 文章主要内容参考书籍为<JavaScript高级程序设计>([美]Nicholas C.Z

相机标定:关于用Levenberg-Marquardt算法在相机标定中应用

LM算法在相机标定的应用共有三处. (1)单目标定或双目标定中,在内参固定的情况下,计算最佳外参.OpenCV中对应的函数为findExtrinsicCameraParams2. (2)单目标定中,在内外参都不固定的情况下,计算最佳内外参.OpenCV中对应的函数为calibrateCamera2. (3)双目标定中,在左右相机的内外参及左右相机的位姿都不固定的情况下,计算最佳的左右相机的内外参及最佳的左右相机的位姿矩阵.OpenCV中对应的函数为stereoCalibrate. 本文文阅读前提

《转》CSS元素水平垂直居中方法总结(主要对大漠以及张鑫旭博客所述方法进行了归纳)

转自大地Dudy的CSS元素水平垂直居中方法总结(主要对大漠以及张鑫旭博客所述方法进行了归纳) 本文主要是对主流居中方法进行了归纳,有些地方甚至就是把别人的代码直接复制过来的,没有什么自己的东西,除了大漠以及张鑫旭的方法外,还有来自司徒正美.怿飞博客的几个方法 以下方法,由于测试环境的原因,IE系列只测试了IE9和IE6,以下所说的IE的支持性只是相对于IE9和IE6来说的: 一.元素的水平垂直居中: 第一种方法: <!doctype html> <html lang="en&