Sass、Less和Stylus
1、背景介绍
1.Sass背景介绍
Sass是对CSS(层叠样式表)的语法的一种扩充,诞生于2007年,最早也是最成熟的一款CSS预处理器语言,它可以使用变量、常量、嵌套、混 入、函数等功能,可以更有效有弹性的写出CSS。
其实现在的Sass已经有了两套语法规则:一个依旧是用缩进作为分隔符来区分代码块的;另一套规则和CSS一样采用了大括号({})作为分隔符。后一种语法规则又名SCSS,在Sass3之后的版本都支持这种语法规则。
注:Sass官网地址:<http://sass-lang.com/>
2.LESS的背景介绍
2009年开源的一个项目,受Sass的影响较大,但又使用CSS的语法,让大部分开发者和设计师更容易上手。LESS提供了多种方式能平滑的将写 好的代码转化成标准的CSS代码,在很多流行的框架和工具中已经能经常看到LESS的身影了(例如Twitter的Bootstrap框架就使用了 LESS)。
Alexis开发了LESS并提供了类似CSS的书写功能。
注:LESS的官网:<http://lesscss.org/>
3.Stylus背景介绍
Stylus,2010年产生,来自于Node.JS <http://caibaojian.com/t/javascript>社区,主要用来给Node项目进行CSS预处理支持,在此社区之内有一定支持者,在广泛的意义上人气还完全不如Sass和LESS。
Stylus被称为是一种革命性的新语言,提供一个高效、动态、和使用表达方式来生成CSS,以供浏览器使用。Stylus同时支持缩进和CSS常规样式书写规则。
注:Stylus官网:<http://learnboost.github.com/stylus>
2、安装
1.Sass的安装
Sass是Ruby语言写的,但是两者的语法没有关系。必须先安装Ruby,然后再安装Sass。
Ruby安装文件下载好后,可以按应用软件安装步骤进行安装Ruby。在安装过程中,个人建议将其安装在C盘下,在安装过程中选择第二个选项,如下图所示:
Ruby安装完成后,在开始菜单中找到新安装的Ruby,并启动Ruby的Command控制面板,如下图所示:
在启动的Ruby命令控制面板中输入下面的命令:
gem install sass
输入上面命令,回车后就会自动安装Sass: 这样Sass就安装成功了,也就可以使用了。
2.LESS的安装
LESS的安装和Sass安装有所不同,他不需要依赖于Ruby环境,就能直接安装使用。不过LESS安装分为两种:客户端和服务器端安装。
a)客户端安装:
我们可以直接在客户端使用“.less”(LESS源文件),只需要在官网 <http://lesscss.org/>载一个javascript <http://caibaojian.com/t/javascript>脚本文件主“less.js <http://caibaojian.com/t/javascript>”,然后在我们需要引入LESS源文件的html <http://caibaojian.com/t/html>的<head>中加入如下代码:
<link rel="stylesheet/less" type="text/css" href="文件路径/styles.less">
<script src="文件路径/less.js" type="text/javascript"></script>
需要注意的是:在引入“.less”文件中,“link”的“rel”属性要设置为“stylesheet/less”。还有更重要的一点需要注意的是:LESS源文件一定要在“less.js”引入之前引入,这样才能保证LESS源文件正确编译解析。
b)服务器端安装
LESS在服务器端的使用主要是借助于LESS的编译器,将LESS源文件编译生成最终的CSS文件,目前常用的方式是利用node的包管理器 (npm)安装LESS,安装成功后就可以在Node环境中对LESS文件进行编译。如此一来,LESS在服务器的安装和Sass的安装有点相似,不同之 处是他们需依赖的环境不一样,LESS需要的是Node JS环境,而Sass需要的是Ruby环境,为了让大家能更清晰的知道如何在服务器端安装LESS,此处简单的过一下安装过程(本文演示的是在 Window7下的安装方法)。
首先到Node Js的官网下载 <http://nodejs.org/download>一个适合Windows系统的安装文件,此处下载的是“node-v0.8.20-x86.msi”:
在启动的Node Js的Command控制面板直接输入下面的命令:
$ npm install less
如果您想下载最新稳定版本的LESS,还可以尝试在Node JS的Command控制面板输入:
$ npm install less@latest
3.Stylus的安装
Stylus的安装和LESS在服务器端的安装很相似,同样依赖于Node JS的环境,也就是说也要先安装Node Js(如果安装Node JS请参考前面的介绍)。唯一不同的是在Node JS的Command控制面板输入的命令不一样:
$ npm install stylus
然后,就会自动下载安装最新的stylus库:
Sass、Less和Stylus的更多相关文章
- less,sass,stylus配置和应用教程及三者比较
less,sass,stylus配置和应用教程及三者比较 Less 1. 定义: Less是CSS预处理语言,在css基础之上增加了诸如变量,混合(mix),继承,运算,函数等功能,LESS既可以运 ...
- css预处理器 sass和stylus对比以及常用功能
在众多的css预处理器语言中,sass和stylus算是十分优秀的两个.本文主要针对两者的常用功能做个简单的对比分析.在对比中了解二者的差异,同时帮助大家更好的掌握这两种预处理语言. 本文涉及到的sa ...
- 对比学习sass和stylus的常用功能
在众多的css预处理器语言中,sass和stylus算是十分优秀的两个.本文主要针对两者的常用功能做个简单的对比分析.在对比中了解二者的差异,同时帮助大家更好的掌握这两种预处理语言.本文涉及到的sas ...
- emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点
摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...
- 分享15款很实用的 Sass 和 Compass 工具
Sass 是 CSS 的扩展,增加了嵌套规则,变量,混入功能等很多更多.它简化了组织和维护 CSS 代码的成本.Compass 是一个开源的 CSS 框架,使得使用 CSS3 和流行的设计模式比以往任 ...
- 学习笔记总结---关于sass
今天跟大家共同分享交流一下关于sass的知识点: sass的产生: css不是一种编程语言,我们可以用它开发网页样式,但不能用它进行编程.它没有常量,变量,也没有条件语句,只是对属性一行行的描述,资料 ...
- 20个编写现代 CSS 代码的建议
明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较 ...
- web前端学习部落22群 明白何谓Margin Collapse
明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较 ...
- 20个编写现代CSS代码的建议
明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较 ...
- BOOTSTRAP定制
1.补充:栅格系统中调整列的位置/顺序 (1)方法1:偏移量(col-*-offset-*) (2)方法2:对列进行push/pull操作 col-lg-pull-1 ~ ...
随机推荐
- RazorEngine性能研究(反射的延深)
先说下结论 1)RazorEngine 确实很慢,编译过程特别慢,编译过后仍不适合大量重复调用的情况(一次调用可以接受). 2 ) RazorEngine 和 asp.net mvc 里的Razo ...
- 【转载】poj 1276 Cash Machine 【凑钱数的问题】【枚举思路 或者 多重背包解决】
转载地址:http://m.blog.csdn.net/blog/u010489766/9229011 题目链接:http://poj.org/problem?id=1276 题意:机器里面共有n种面 ...
- maven setting.xml 存放位置导致deply失败,显示没有权限401错误
settings.xml存在于两个地方: 1.安装的地方:$M2_HOME/conf/settings.xml 2.用户的目录:${user.home}/.m2/settings.xml 我只在mav ...
- Whitewidow:SQL 漏洞自动扫描工具
Whitewidow 是一个开源的 SQL 漏洞自动扫描器,可用通过文件列表运行,或者从 Google 爬取并发现有潜在漏洞的网站. 这个工具支持自动格式化文件.随机用户代理.IP 地址.服务器信息. ...
- NLP-特征选择
文本分类之特征选择 1 研究背景 对于高纬度的分类问题,我们在分类之前一般会进行特征降维,特征降维的技术一般会有特征提取和特征选择.而对于文本分类问题,我们一般使用特征选择方法. 特征提取:PCA.线 ...
- iframe标签的子父页面调用函数和属性
在使用iframe标签时,总想通过子页面调用父页面的一些方法和属性.今天终于发现了. 1在父页面写一个函数 //让子页面来调用此方法,控制导航栏 function childfunc(){ alert ...
- http post上传文件
php.ini中关于文件上传的配置指令: file_uploads = On //是否接受上传的文件 upload_tmp_dir //临时文件保持目录 ...
- Java 接口与继承 道至简第六章发表阅读笔记
一.继承条件下的构造方法调用 class Grandparent { public Grandparent() { System.out.println("GrandParent Creat ...
- 2018.7.26 学会说NO,拒绝道德绑架。
一.领导交给你一项不属于你工作范围的工作,是否需要拒绝,你可以考虑以下问题: 1.这是与我核心能力相关的工作吗?是,接受:否,进入下一条: 2.它能帮助我拓展我核心能力的边界,或是我感兴趣的吗?是,接 ...
- Codeforces Round #242 (Div. 2)C(找规律,异或运算)
一看就是找规律的题.只要熟悉异或的性质,可以秒杀. 为了防止忘记异或的规则,可以把异或理解为半加运算:其运算法则相当于不带进位的二进制加法. 一些性质如下: 交换律: 结合律: 恒等律: 归零律: 典 ...