动态样式语言Sass&Less

最新推荐文章于 2024-06-13 10:45:00 发布

anihasiyou

最新推荐文章于 2024-06-13 10:45:00 发布

阅读量1.2k

点赞数

分类专栏： Web前端/javascript/jQuery 文章标签：动态样式语言 Sass Less

本文链接：https://blog.csdn.net/anihasiyou/article/details/22409843

版权

Web前端/javascript/jQuery 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

LESS is More , Than CSS 中文官网，下载地址

什么是LESSCSSLESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。LESSCSS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。

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

下载less.js;
创建一个文件来放你的样式，比如style.less;
添加以下代码到你的HTML的<head>中:

<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”。

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

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而可能引起的任何问题。尽管这不大可能，但终归是有可能的。

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.app、SimpleLess、CodeKit.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;
  }
}

参考：http://www.kekaku.com/webdevelop/1052

http://www.alixixi.com/web/a/2011092874079.shtml

anihasiyou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态样式语言Sass&Less

LESS is More , Than CSS 中文官网，下载地址什么是LESSCSSLESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。LESSCSS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。在你的项目中引入LESS很简单：下载l
复制链接

扫一扫