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

一. Sass/Scss&Less是什么?

Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,语法跟css一样(但多了些功能),比css好写,而且更容易阅读。Sass语法类似与Haml,属于缩排语法(makeup),用意就是为了快速写Html和Css。

Less一种动态样式语言. 将CSS赋予了动态语言的特性,如变量,继承,运算, 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),也可一在服务端运行 (借助 Node.js)。less英文站需要翻墙,也可以访问中文站

Sass与Scss有什么差别

Sass原先跟Haml一样的缩排语法,对于写惯Css的前端来说是很不直观的,也不能将原来的Css加到Sass里面,因此Sass改良了语法,Sass 3就变成了Scss(Sassy CSS)。与原来的语法兼容,只是用{}取代了原来的缩进。

Sass

.content
  margin:10px auto
  h1
    font-size:24px;

Scss

.content{
  margin:10px auto
  h1{
    font-size:24px;
  }
}

二. Sass/Scss&Less区别?

1.Sass是基于Ruby的,是在服务端处理的,而Less是需要引入less.js来处理Less代码输出Css到浏览器,也可以在开发环节使用Less,然后编译成Css文件,直接放到项目中,也有 Less.appSimpleLessCodeKit.app这样的工具,也有在线编译地址。

2.变量符不一样,less是@,而Scss是$,而且变量的作用域也不一样,后面会讲到。

3.输出设置,Less没有输出设置,Sass提供4中输出选项:nested, compact, compressed 和 expanded。

4.Sass支持条件语句,可以使用if{}else{},for{}循环等等。而Less不支持。

/* Sample Sass "if" statement */
 
@if lightness($color) > 30% {
  background-color: #000;
} @else {
  background-color: #fff;
}
 
/* Sample Sass "for" loop */
@for $i from 1 to 10 {
  .border-#{$i} {
    border: #{$i}px solid blue;
  }
}

三. Sass/Scss&Less的共同特征

1.变量

允许我们单独定义通用的样式,这样可以在css中调用。

Less 变量

@color:#4d926f;
#header{
  color:@color;
}
h2{
  color:@color;
}

Scss 变量

$color:#4d926f;
#header{
  color:$color;
}
h2{
  color:$color;
}

编译后的css

#header{color:#4d926f;}
h2{color:#4d926f;}

2.混合

混合可以将一个定义好的class A轻松的引入到另一个class B中,从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用,就像使用函数一样。

Less 混合

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}
 
#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(11px);
}

Scss 混合

@mixin rounded-corners ($radius: 5px) {
  border-radius: $radius;
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
}
 
#header {
  @include rounded-corners;
}
#footer {
  @include rounded-corners(11px);
}

编译后的css

#header{
  border-radius:5px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
}
#footer{
  border-radius:11px;
  -webkit-border-radius:11px;
  -moz-border-radius:11px;
}

3.嵌套

我们可以在一个选择器中嵌套另一个选择器来实现继承,这样很大程度减少了代码量,并且代码看起来更加的清晰。

Less 嵌套

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

Scss 嵌套

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

编译后的css

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

3.函数&运算

运算提供了加,减,乘,除操作;我们可以做属性值和颜色的运算,这样就可以实现属性值之间的复杂关系。

Less 函数运算

@the-border: 1px;
@base-color: #111;
@red:        #842210;
#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer {
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

Scss-函数运算

$the-border: 1px;
$base-color: #111;
$red:        #842210;
#header {
  color: $base-color * 3;
  border-left: $the-border;
  border-right: $the-border * 2;
}
#footer {
  color: $base-color + #003300;
  border-color: desaturate($red, 10%);
}

编译后的css

#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}
#footer {
  color: #114411;
  border-color: #7d2717;
}

4.color函数

提供了一系列的颜色运算函数. 颜色会先被转化成 HSL 色彩空间, 然后在通道级别操作:

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 */

Scss同样也支持color函数,只需要将@改为$即可。

5.作用域

Less-作用域

@color: #00c; /* 蓝色 */
#header {
  @color: #c00; /* red */
  border: 1px solid @color; /* 红色边框 */
}
#footer {
  border: 1px solid @color; /* 蓝色边框 */
}

Less-作用域编译后

#header{border:1px solid #cc0000;}
#footer{border:1px solid #0000cc;}

scss-作用域

$color: #00c; /* 蓝色 */
#header {
  $color: #c00; /* red */
  border: 1px solid $color; /* 红色边框 */
}
#footer {
  border: 1px solid $color; /* 蓝色边框 */
}

Less-作用域编译后

#header{border:1px solid #c00}
#footer{border:1px solid #c00}

我们可以看出来,less和scss中的变量会随着作用域的变化而不一样,上面的例子能很好的解释这点。

6.Importing

文件引入

Less-import

@import "lib.less";
@import "lib";

在Scss中,也是可以import。

scss-import

//需要被 import 的文件必须以 _开头命名,如 _rounded.scss
@import "rounded";

四. Sass/Scss安装

Scss的安装需要Ruby环境

$ gem install sass

安装后就可以直接编译Sass了

$ sass --watch style.scss:style.css

还有一个利器就是大名顶顶的Compass,后面我会用一篇博文来介绍下。

五. Less安装使用

1.在客户端使用

引入你的 .less 样式文件的时候要设置 rel 属性值为 “stylesheet/less”:

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

然后在Less官网下载 less.js, 在 中引入:

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

注意你的less样式文件一定要在引入less.js前先引入。

2.在服务端安装使用

* 安装

在服务器端安装 LESS 的最简单方式就是通过 npm(node 的包管理器), 像这样:

$ npm install less

如果你想下载最新稳定版本的 LESS,可以尝试像下面这样操作:

$ npm install [email protected]

* 使用

在命令行下使用

你可以在终端调用 LESS 解析器:

$ lessc styles.less

上面的命令会将编译后的 CSS 传递给 stdout, 你可以将它保存到一个文件中:

$ lessc styles.less > styles.css

如何你想将编译后的 CSS 压缩掉,那么加一个 -x 参数就可以了.

还有些编译工具上面也有讲过,那些更加的方便。

参考资料

http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/

http://www.lesscss.org

http://www.lesscss.net

http://sass-lang.com

VIA:iUX Blog,转载时请注明出处

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

时间: 2024-10-25 00:00:31

动态样式语言Sass&Less介绍与区别的相关文章

Less (一种动态样式语言)

Less (一种动态样式语言). LESS是一种由Alexis Sellier设计的动态层叠样式表语言,受Sass所影响,同时也影响了 Sass的新语法:SCSS. LESS是开源的,其第一个版本由Ruby写成,但在后续的版本当中,Ruby逐渐被替换为JavaScript.受益于JavaScript,LESS 可以在客户端上运行(IE6+.Webkit.Firefox),也可以在服务端运行(Node.js.Rhino). 在语法方面,LESS与CSS较为接近,一个合法的CSS代码段本身也是一段合

Web前端一种动态样式语言-- Less

变量 变量允许我们单独定义一系列通用的样式,然后在需要的时候去调用.所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了. // LESS @color: #4D926F; #header { color: @color; } h2 { color: @color; } /* 生成的 CSS */ #header { color: #4D926F; } h2 { color: #4D926F; } 混合 混合可以将一个定义好的class A轻松的引入到另一个class B中,从而简单实现

动态样式语言—LESS基础知识

CSS是一门非程序式语言,缺少逻辑性,不便于维护 LESS在CSS现有语法的基础上,为CSS加入程序式语言的特性 引入了变量.混入.运算.函数等功能,大大简化CSS的编写,降低了CSS的维护成本 LESS包含一套语法和一个解析器,用户用它的语法生成样式规则,这些规则通过解析器后生成CSS文件 1.变量 以{}划分作用域,变量从里往外进行查找 @width : 20px; #homeDiv { @width : 30px; #centerDiv{ width : @width;// 此处应该取最近

less 动态样式语言

1.less的介绍 Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量.Mixin.函数等特性,使 CSS 更易维护和扩展. 2.less需要编译才能被浏览器解析 浏览器本身只能解析css文件,对于less无法解析. 要么对less进行编译,让他在node环境下转换成对应的css文件. 要么引入less后再引用对应的js文件 <link rel="stylesheet/less" type="text/css" href="st

js里==和===的区别 以及sass与less的区别 (精解版)

js里==和===有什么区别 ==:运算符称作相等,用来检测两个操作数是否相等,这里的相等定义的非常宽松,可以允许进行类型转换===:用来检测两个操作数是否严格相等1.对于zhidaostring,number等基础类型,==和===是有区别的内不同类型间比较,==之比较“转化成同一类型后的容值”看“值”是否相等,===如果类型不同,其结果就是不等同类型比较,直接进行“值”比较,两者结果一样2.对于Array,Object等高级类型,==和===是没有区别的3.基础类型与高级类型,==和===是

编译型语言、解释型语言、静态类型语言、动态类型语言概念与区别

最近在研究Python和Erlang.反复提到动态类型语言.动态语言.解释型语言这些概念.这些概念很生涩,在这里做一个总结. 编译型语言和解释型语言 1.编译型语言 需通过编译器(compiler)将源代码编译成机器码,之后才能执行的语言.一般需经过编译(compile).链接(linker)这两个步骤.编译是把源代码编译成机器码,链接是把各个模块的机器码和依赖库串连起来生成可执行文件. 优点:编译器一般会有预编译的过程对代码进行优化.因为编译只做一次,运行时不需要编译,所以编译型语言的程序执行

【转载】编译型语言、解释型语言、静态类型语言、动态类型语言概念与区别

编译型语言和解释型语言 1.编译型语言 需通过编译器(compiler)将源代码编译成机器码,之后才能执行的语言.一般需经过编译(compile).链接(linker)这两个步骤.编译是把源代码编译成机器码,链接是把各个模块的机器码和依赖库串连起来生成可执行文件. 优点:编译器一般会有预编译的过程对代码进行优化.因为编译只做一次,运行时不需要编译,所以编译型语言的程序执行效率高.可以脱离语言环境独立运行. 缺点:编译之后如果需要修改就需要整个模块重新编译.编译的时候根据对应的运行环境生成机器码,

强悍的 CSS 扩展语言 -- Sass

<div class = 'testBorder'> <p> <input/> </p> </div> 假设上面这 3 个 DOM 元素有这样的需求, div 去边框, p 显示边框, input 只显示底部边框, 而且统一用 !important 关键字提高样式的优先权: 如果手写纯 CSS 会是这样: .testBorder{ border:none !important; } .testBorder p{ border:1px solid

less和sass的介绍和差异

● 混入(Mixins)——class中的class: ● 参数混入——可以传递参数的class,就像函数一样: ● 嵌套规则——Class中嵌套class,从而减少重复的代码: ● 运算——CSS中用上数学: ● 颜色功能——可以编辑颜色: ● 名字空间(namespace)——分组样式,从而可以被调用: ● 作用域——局部修改样式: ● JavaScript 赋值——在CSS中使用JavaScript表达式赋值. LESS和Sass的主要不同就是他们的实现方式,LESSS是基于JavaScr