前言
Sass,Syntactically Awesome StyleSheets。
Sass 是对 CSS 的扩展,让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能, 并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好, 同时也让你能够快速开始小型项目, 特别是在搭配 Compass 样式库一同使用时。
安装
1、下载安装ruby
2、安装好ruby后,再ruby命令行中输入gem install sass
语法
变量
sass中可以定义变量,方便统一修改和维护。1
2
3
4
5
6
7$fontStack: Helvetica, sans-serif;
$primaryColor: #333;
body {
font-family: $fontStack;
color: $primaryColor;
}
嵌套
sass可以进行选择器的嵌套,表示层级关系,看起来很优雅整齐。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none`;
}
}`。
导入
sass中如导入其他sass文件,最后编译为一个css文件,优于纯css的@import
。1
2
3
4
5
6
7
8
9// reset.scss
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
1 | @import 'reset'; |
mixin
sass中可用mixin定义一些代码片段,且可传参数,方便日后根据需求调用。从此处理css3的前缀兼容轻松便捷。1
2
3
4
5
6
7
8
9@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);
}
扩展/继承
sass可通过@extend
来实现代码组合声明,使代码更加优越简洁。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20.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;
}
运算
sass可进行简单的加减乘除运算等1
2
3
4
5
6
7
8
9
10
11.container { width: 100%; }
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
aside[role="complimentary"] {
float: right;
width: 300px / 960px * 100%;
}
颜色
sass中集成了大量的颜色函数,让变换颜色更加简单。1
2
3
4
5
6
7
8$linkColor: #08c;
a {
text-decoration:none;
color:$linkColor;
&:hover{
color:darken($linkColor,10%);
}
}
&表示当前元素
伪类和伪元素在CSS中是常用的一种方式,比如最常见的是链接的伪类或者说伪元素:after和:before的使用。大家常看到的就是清除浮动的clearfix:1
2
3
4
5
6
7
8
9
10
11
12.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
overflow:hidden;
}
.clearfix {
*zoom: 1;
}
那么在Sass中,使用&会变得更简单,更方便:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17$lte-ie: true !default;
.clearfix {
@if $lte-ie {
*zoom: 1;
}
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
overflow: hidden;
}
}
&不止用于和伪类的结合,还可以用于多类选择器、后代选择器、相邻兄弟选择器、媒体查询中的嵌套等。
2016.07.30补
Sass编码错误
ruby环境sass编译中文出现Syntax error: Invalid GBK character。
解决办法如下:打开ruby中sass的安装目录,在其中找到engine.rb。在engine.rb中所有的require XXX
之后,添加
1 | Encoding.default_external = Encoding.find('utf-8') |
PS:小编的engine.rb的路径为D:\Program Files\Ruby23-x64\lib\ruby\gems\2.3.0\gems\sass-3.4.22\lib\sass\engine.rb
scss自动编译为css
如果希望某一个scss文件或者相应的文件夹下面文件修改后,自动进行编译,那么可以使用侦听命令。
1、侦听文件1
sass --watch --style compressed style.scss:style.css
2、侦听文件夹1
sass --watch --style compressed scss:css
3、封装为脚本
为了避免每次运行都敲命令,我们把上述命令分装为脚本scss.bat。1
sass --watch --style compressed scss:css
海哥哥封装了不一样的scss-wap.bat,其中的参数至今没有看懂,可以实现同样的效果。1
2
3
4@echo off
sass -C -t compressed --watch scss:css
rem sass -C -t compact --watch scss:css
pause
该命令的含义为:
书签
sass安装
http://www.w3cplus.com/sassguide/install.html
SASS用法指南
http://www.ruanyifeng.com/blog/2012/06/sass.html
sass入门
http://www.w3cplus.com/sassguide/
SASS 初学者入门
http://www.oschina.net/translate/the-absolute-beginners-guide-to-sass
Sass参考手册
http://sass.bootcss.com/docs/sass-reference/
SassMeister在线调试
http://www.sassmeister.com/
ruby环境sass编译中文出现Syntax error: Invalid GBK character错误解决方法
http://www.tuicool.com/articles/f2YVRv
http://www.cnblogs.com/zhidong123/p/3902270.html
SASS的安装和转换为CSS的方法
http://www.cnblogs.com/52css/archive/sass-how-to-install-and-use.html
前端之Sass/Scss实战笔记
http://www.tuicool.com/articles/iERVJbB
http://segmentfault.com/a/1190000003742313