SASS简介
2015-11-16 12:08
197 查看
变量
sass中可以定义变量,方便统一修改和维护。//sass style //----------------------------------- $fontStack: Helvetica, sans-serif; $primaryColor: #333; body { font-family: $fontStack; color: $primaryColor; }
//css style //----------------------------------- body { font-family: Helvetica, sans-serif; color: #333; }
嵌套
sass可以进行选择器的嵌套,表示层级关系,看起来很优雅整齐。//sass style //----------------------------------- nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } }
//css style //----------------------------------- nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; }
导入
sass中如导入其他sass文件,最后编译为一个css文件,优于纯css的@import
//sass style //----------------------------------- // _reset.scss html, body, ul, ol { margin: 0; padding: 0; }
//sass style //----------------------------------- // base.scss @import 'reset'; body { font-size: 100% Helvetica, sans-serif; background-color: #efefef; }
//css style //----------------------------------- html, body, ul, ol { margin: 0; padding: 0; } body { background-color: #efefef; font-size: 100% Helvetica, sans-serif; }
mixin
sass中可用mixin定义一些代码片段,且可传参数,方便日后根据需求调用。从此处理css3的前缀兼容轻松便捷。//sass style //----------------------------------- @mixin box-sizing ($sizing) { -webkit-box-sizing:$sizing; -moz-box-sizing:$sizing; box-sizing:$sizing; } .box-border{ border:1px solid #ccc; @include box-sizing(border-box); }
//css style //----------------------------------- .box-border { border: 1px solid #ccc; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
扩展/继承
sass可通过@extend来实现代码组合声明,使代码更加优越简洁。
//sass style //----------------------------------- .message { border: 1px solid #ccc; padding: 10px; color: #333; } .success { @extend .message; border-color: green; } .error { @extend .message; border-color: red; } .warning { @extend .message; border-color: yellow; }
//css style //----------------------------------- .message, .success, .error, .warning { border: 1px solid #cccccc; padding: 10px; color: #333; } .success { border-color: green; } .error { border-color: red; } .warning { border-color: yellow; }
运算
sass可进行简单的加减乘除运算等//sass style //----------------------------------- .container { width: 100%; } article[role="main"] { float: left; width: 600px / 960px * 100%; } aside[role="complimentary"] { float: right; width: 300px / 960px * 100%; }
//css style //----------------------------------- .container { width: 100%; } article[role="main"] { float: left; width: 62.5%; } aside[role="complimentary"] { float: right; width: 31.25%; }
颜色
sass中集成了大量的颜色函数,让变换颜色更加简单。//sass style //----------------------------------- $linkColor: #08c; a { text-decoration:none; color:$linkColor; &:hover{ color:darken($linkColor,10%); } }
//css style //----------------------------------- a { text-decoration: none; color: #0088cc; } a:hover { color: #006699; }
相关文章推荐
- 浅谈Scalable inference for Correlated Topic Models(ScaCTM)编译过程
- 欢迎使用CSDN-markdown编辑器
- myeclipse删除工程后出现Could not publish to the server
- js漂浮窗口广告
- 找xpath好用的工具(Firefox插件)
- 安卓中关于图片从网络获取,压缩,上传,下载,缩略图,缓存的一些处理总结(二)
- Activity的四种launchMode
- gulp使用
- android动画
- wtl学习开篇
- StackExchange.Redis 使用
- mysql_navicat-permium 在Mac下破解方法
- Yii2.0高级框架数据库增删改查的一些操作
- pdsh的安装以及使用
- CNKI学术趋势和万方数据知识服务平台的知识脉络分析
- iOS菜鸟之FMDB的二次封装简单易用
- hdu 2544 练习floyd
- 编写一个程序,要求用户输入最多10个高尔夫成绩,并将其存储在一个数组中。 程序允许用户提早结束输入,并在一行上显示所有成绩,然后报告平均成绩。 请使用3个数组处理函数来分别进行输入、显示和计算
- guava event
- PHP判断ajax请求:HTTP_X_REQUESTED_WITH