前端重构Sass的相关使用（笔记一）

最新推荐文章于 2025-09-12 14:39:04 发布

转载最新推荐文章于 2025-09-12 14:39:04 发布 · 103 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/blackagenl/p/4316763.html

文章标签：

#前端 #ViewUI

本文介绍了Sass与SCSS这两种流行的CSS预处理器，并通过实例展示了它们如何通过嵌套、变量定义、混合与样式继承等功能简化前端开发流程。

随着Sass与Less的使用越来越多，相比越来越多的前端攻城师都体会到它们的优越性。前端由于一部分工作都是在Html,Css中的编码进行的。好的工具在开发的过程中对效率值的贡献尤为重要。使用Sass有一段时间。在这里也做一个分享。让更多需要的人快乐的编码。

Sass,Less,Scss 都是一些什么东西？

简单的理解来说，它们都属于对原有CSS的扩展。能够更加方便的书写样式规则，强化了Css原有的功能。Sass,Scss 都是来自同一个妈。

Sass 有两种语法规则(syntaxes),目前新的语法规则（从 Sass 3开始）被称为 “SCSS”( 时髦的css（SassyCSS）),它是css3语法的的拓展级，就是说每一个语法正确的CSS3文件也是合法的SCSS文件，SCSS文件使用.scss作为拓展名。

基本语法参考：

而Less比较特殊，功能大体上差不多。在前端导入less.js也能在客户端解析link中的.less文件。基于Dom解析与渲染速度，个人不太赞同这种做法。Less也有服务器端版本。因为篇幅原因，在这里就不做介绍了。有兴趣的同学可以去参考这里。 http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/

Sass 新语法中添加了很多很有意思的东西，变量、混合、嵌套、样式继承等。辐射到周边的Compass应用能够对生成的样式表文件进行压缩、合并，减小服务器带宽、加速界面响应速度。通过几个简单的例子，介绍一下这些非常实用的功能。

嵌套

/* 生成代码 */ nav ul{ margin: 0; padding: 0; list-style: none; } nav li{ display: inline-block; } /* SCSS语法 */ nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } }

变量定义

$blue : #1875e7;　 div { color : $blue; }

混合

@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); }

样式继承

.message { border: 1px solid #ccc; padding: 10px; color: #333; } .success { @extend .message; border-color: green; } .error { @extend .message; border-color: red; }

进阶功能介绍，Css常用开发功能雪碧图与文件合并压缩。请参考笔记二（待更新）

转载于:https://www.cnblogs.com/blackagenl/p/4316763.html