问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
less/sass相对于直接写css有什么优势？好的方面。css
#contextMenu {
#contextMenu ul {
border-radius: 3
text-align:
background: #
color: #666;
#contextMenu ul li:first-child {
border-radius: 3px 3px 0 0;
#contextMenu ul li:last-child {
border-radius: 0 0 3px 3
#contextMenu ul li {
line-height: 20
#contextMenu ul li:hover {
background-color: #eaf8
#contextMenu {
background: #
border-radius: 3
color: #666;
text-align:
line-height: 20
&:first-child {
border-radius: 3px 3px 0 0;
&:last-child {
border-radius: 0 0 3px 3
background-color: #eaf8
了解学习less sass，但实际项目中还是直接写css，如果样式代码可以复用的不是很多的话，但从代码量(行数)来看less/sass并不比css少。
我觉得一点特别好，嵌套书写看上去很清爽，一块内容的样式层级特别清晰。但是使用less/sass对浏览器而言还要多一步解析成css的操作。
你们项目中写样式直接写css还是写less/sass/stylus得多呢，谈谈你们的看法呗？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
说说我目前用的最多的吧
支持变量定义
支持“模板函数”（自己定义的名称。。。），比如有些CSS需要做兼容前缀的话，你可以这样使用一个模板函数定义一下，调用的时候传入正常值就可以了。会自动生成前缀的CSS
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
光是能少打字就让我再回不去了
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
// 支持循环
@for $i from 0 to 20 {
&.trans-#{$i} {
transform: translateX(-$i * 25 + %);
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
先回答你第一个问题，我个人所见，在学生中直接写css的多；而我在职的朋友用的less/sass/stylus多。从不同角度来说：
1.刚刚接触的时候：哇，我少敲好多代码啊，以后就用这个了。
2.做个单页应用或者简单的小程序：妈呦，我怎么引用这么多，代码复用度不高啊，我怎么还用less/sass/stylus（可是你已经回不去了，真的蛮好用的）
3.在维护大项目：产品经理又要改这改那，我怎么找啊。诶，我定义一个变量咯，替换一下等等；（说实话，你代码明显更加工整，就像老师改作业一样，看着这么整洁，要找哪个bug或者改什么很轻快，看着不会烦）
同步到新浪微博
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：转自：&的博客/wangpenghui522/p/5467560.html&
高级程度排名：
SCSS&(变量+混入+继承+函数+条件判断+语法同css+嵌套+for+if+工具库Compass)&&&&SASS&(变量+混入+继承+函数+条件判断+缩排语法)&&&LESS&(嵌套+变量+混入)&&&CSS&(纯静态)
一. Sass/Scss、Less是什么?
Sass (Syntactically Awesome Stylesheets)是一种动态样式语言，Sass语法属于缩排语法，比css多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。
Sass与Scss是什么关系?
Sass的缩排语法，对于写惯css前端的web开发者来说很不直观，也不能将css代码加入到Sass里面，因此sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。
Less也是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量，继承，运算， 函数. &Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行 (借助 Node.js)。
二. Sass/Scss与Less区别
1.编译环境不一样
Sass的安装需要Ruby环境，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件，直接放到项目中，也有 Less.app、SimpleLess、CodeKit.app这样的工具，也有在线编译地址。
2.变量符不一样，Less是@，而Scss是$，而且变量的作用域也不一样。
4 width:@m;
5 height:200
6 bordeR:1px solid #ff0;
9 /** 最终效果 **/
11 width: 200
12 height: 200
13 bordeR: 1px solid #ff0;
15 /* 结论：less有局部和全局变量的概念 */
Less-作用域
@color: #00c; /* 蓝色 */
@color: #c00; /* red */
border: 1px solid @ /* 红色边框 */
border: 1px solid @ /* 蓝色边框 */
Less-作用域编译后
#header{border:1px solid #cc0000;}
#footer{border:1px solid #0000}
+++--------------------------------------------------+++
scss-作用域
$color: #00c; /* 蓝色 */
$color: #c00; /* red */
border: 1px solid $ /* 红色边框 */
border: 1px solid $ /* 蓝色边框 */
Sass-作用域编译后
#header{border:1px solid #c00}
#footer{border:1px solid #c00}
我们可以看出来，less和scss中的变量会随着作用域的变化而不一样（ 有待验证160804 ）。
3.输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded。
输出样式的风格可以有四种选择，默认为nested
nested：嵌套缩进的css代码
expanded：展开的多行css代码
compact：简洁格式的css代码
compressed：压缩后的css代码
4.Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。
/* Sample Sass &if& statement */
@if lightness($color) & 30% {
/* Sample Sass &for& loop */
@for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}
&5. 引用外部CSS文件
scss引用的外部文件命名必须以_开头, 如下例所示:其中_test1.scss、_test2.scss、_test3.scss文件分别设置的h1 h2 h3。文件名如果以下划线_开头的话，Sass会认为该文件是一个引用文件，不会将其编译为css文件.
// 源代码：
@import "_test1.scss";
@import "_test2.scss";
@import "_test3.scss";
// 编译后：
font-size: 17
font-size: 17
font-size: 17
Less引用外部文件和css中的@import没什么差异。
6.Sass和Less的工具库不同
Sass有工具库Compass, 简单说，Sass和Compass的关系有点像Javascript和jQuery的关系,Compass是Sass的工具库。在它的基础上，封装了一系列有用的模块和模板，补充强化了Sass的功能。
Less有UI组件库Bootstrap,Bootstrap是web前端开发中一个比较有名的前端UI组件库，Bootstrap的样式文件部分源码就是采用Less语法编写。
不管是Sass，还是Less，都可以视为一种基于CSS之上的高级语言，其目的是使得CSS开发更灵活和更强大，Sass的功能比Less强大,基本可以说是一种真正的编程语言了，Less则相对清晰明了,易于上手,对编译环境要求比较宽松。考虑到编译Sass要安装Ruby,而Ruby官网在国内访问不了,个人在实际开发中更倾向于选择Less(目前在研究怎么使用sass160804 haley注)。
阅读(...) 评论()SASS用法指南 - 阮一峰的网络日志
SASS用法指南
学过的人都知道，它不是一种编程语言。
你可以用它开发网页样式，但是没法用它编程。也就是说，CSS基本上是设计师的工具，不是程序员的工具。在程序员眼里，CSS是一件很麻烦的东西。它没有变量，也没有条件语句，只是一行行单纯的描述，写起来相当费事。
很自然地，有人就开始为CSS加入编程元素，这被叫做（css preprocessor）。它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。
各种"CSS预处理器"之中，我自己最喜欢，觉得它有很多优点，打算以后都用它来写CSS。下面是我整理的用法总结，供自己开发时参考，相信对其他人也有用。
============================================
SASS用法指南
作者：阮一峰
一、什么是SASS
是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。
本文总结了SASS的主要用法。我的目标是，有了这篇文章，日常的一般使用就不需要去看了。
二、安装和使用
SASS是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样使用。只是必须先，然后再安装SASS。
假定你已经安装好了Ruby，接着在命令行输入下面的命令：
　　gem install sass
然后，就可以使用了。
SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。
下面的命令，可以在屏幕上显示.scss文件转化的css代码。（假设文件名为test。）
　　sass test.scss
如果要将显示结果保存成文件，后面再跟一个.css文件名。
　　sass test.scss test.css
SASS提供四个的选项：
　　* nested：嵌套缩进的css代码，它是默认值。
　　* expanded：没有缩进的、扩展的css代码。
　　* compact：简洁格式的css代码。
　　* compressed：压缩后的css代码。
生产环境当中，一般使用最后一个选项。
　　sass --style compressed test.sass test.css
你也可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。
　　// watch a file
　　sass --watch input.scss:output.css
　　// watch a directory
　　sass --watch app/sass:public/stylesheets
SASS的官方网站，提供了一个。你可以在那里，试运行下面的各种例子。
三、基本用法
SASS允许使用变量，所有变量以$开头。
　　$blue : #1875e7;　
　　　color : $
如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
　　$side :
　　.rounded {
　　　　border-#{$side}-radius: 5
3.2 计算功能
SASS允许在代码中使用算式：
　　body {
　　　　margin: (14px/2);
　　　　top: 50px + 100
　　　　right: $var
SASS允许选择器嵌套。比如，下面的CSS代码：
　　div h1 {
　　　　color :
可以写成：
　　　　hi {
　　　　　　color:
属性也可以嵌套，比如border-color属性，可以写成：
　　　　border: {
　　　　　　color:
注意，border后面必须加上冒号。
在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：
　　　　&:hover { color: #ffb3 }
SASS共有两种注释风格。
标准的CSS注释 /* comment */ ，会保留到编译后的文件。
单行注释 // comment，只保留在SASS源文件中，编译后被省略。
在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。
　　　　重要注释！
四、代码的重用
SASS允许一个选择器，继承另一个选择器。比如，现有class1：
　　.class1 {
　　　　border: 1px solid #
class2要继承class1，就要使用@extend命令：
　　.class2 {
　　　　@extend .class1;
　　　　font-size:120%;
Mixin有点像C语言的宏（macro），是可以重用的代码块。
使用@mixin命令，定义一个代码块。
　　@mixin left {
　　　　float:
　　　　margin-left: 10
使用@include命令，调用这个mixin。
mixin的强大之处，在于可以指定参数和缺省值。
　　@mixin left($value: 10px) {
　　　　float:
　　　　margin-right: $
使用的时候，根据需要加入参数：
　　　　@include left(20px);
下面是一个mixin的实例，用来生成浏览器前缀。
　　@mixin rounded($vert, $horz, $radius: 10px) {
　　　　border-#{$vert}-#{$horz}-radius: $
　　　　-moz-border-radius-#{$vert}#{$horz}: $
　　　　-webkit-border-#{$vert}-#{$horz}-radius: $
使用的时候，可以像下面这样调用：
　　#navbar li { @include rounded(top, left); }
　　#footer { @include rounded(top, left, 5px); }
4.3 颜色函数
SASS提供了一些内置的颜色函数，以便生成系列颜色。
　　lighten(#cc3, 10%)
// #d6d65c
　　darken(#cc3, 10%)
　　grayscale(#cc3) // #808080
　　complement(#cc3) // #33c
4.4 插入文件
@import命令，用来插入外部文件。
　　@import "path/filename.scss";
如果插入的是.css文件，则等同于css的import命令。
　　@import "foo.css";
五、高级用法
5.1 条件语句
@if可以用来判断：
　　　　@if 1 + 1 == 2 { border: 1 }
　　　　@if 5 < 3 { border: 2 }
配套的还有@else命令：
　　@if lightness($color) > 30% {
　　　　background-color: #000;
　　} @else {
　　　　background-color: #
5.2 循环语句
SASS支持for循环：
　　@for $i from 1 to 10 {
　　　　.border-#{$i} {
　　　　　　border: #{$i}
也支持while循环：
　　$i: 6;
　　@while $i > 0 {
　　　　.item-#{$i} { width: 2em * $i; }
　　　　$i: $i - 2;
each命令，作用与for类似：
　　@each $member in a, b, c, d {
　　　　.#{$member} {
　　　　　　background-image: url("/image/#{$member}.jpg");
5.3 自定义函数
SASS允许用户编写自己的函数。
　　@function double($n) {
　　　　@return $n * 2;
　　#sidebar {
　　　　width: double(5px);
软件的性能分析，往往需要查看 CPU 耗时，了解瓶颈在哪里。
软件开发（尤其是商业软件）离不开项目管理，Issue 是最通用的管理工具之一。
全文搜索属于最常见的需求，开源的 Elasticsearch （以下简称 Elastic）是目前全文搜索引擎的首选。
开发者最需要的，就是一个顺手的开发环境。当前位置：&&&&&&
前端用LESS的还是SASS的多
这个问题本不想回答，因为没有任何意义，见问得人多了，就说两句。这个问题就好比靓女和丑女的区别，她们不会因为外貌而失去自有的功能。那么Sass和LESS是一样的，只是CSS预处理器中的一种而以。对于国内使用哪一种多的，我想没有做过统计的人是无法回答。前段时间我在weibo上做了一个初略的统计，喜欢LESS的同学多于喜欢Sass的同学。但对于我个人的观点来说：１、LESS环境较Sass简单２、有同学说LESS使用较Sass简单３、相对而言，国内前端团队使用LESS的同学会略多于Sass４、从功能出发，Sass较LESS略强大一些５、Sass在市面上有一些成熟的框架，比如说Compass，而且有很多框架也在使用Sass，比如说Foundation６、就国外讨论的热度来说，Sass绝对优于LESS７、就学习教程来说，Sass的教程要优于LESS。在国内LESS集中的教程是LESS中文官网，而Sass的中文教程，慢慢在国内也较为普遍。最后，你自己使用哪一种，不应该根据国内对哪一种使用的人多来做出发参考，而是哪种更适合自己的团队。
&&上一篇：下一篇：&&
业务咨询：
招聘热线：028-
传真：028-
地址:成都市人民南路四段成科西路三号省计算机应用研究中心B栋一楼
欢迎PR>=5的网站与我们交换友情链接(网站制作、网站建设类网络公司站点，联系QQ：)
(C) 四川方法数码科技有限公司
四川方法创享科技有限公司
成公网备字第[]号
蜀ICP备号 川B2-
川公网安备 25号