Sass是css的制作框架的开发工具，，增加了一些规则、变量、继承和函数等特性。Sass可生成良好格式，易于组织与维护的CSS代码。
1、Sass的文件后缀有两种：scss和sass。
前者与css文件编写时的格式一般，使用大括号和分号；后者则不使用。具体表象如下
//文件后缀名为sass的语法
body
background: #eee
font-size:12px
p
background: #0982c1
//文件后缀名为scss的语法
body {
background: #eee;
font-size:12px;
}
p{
background: #0982c1;
} 2、导入
在Sass文件中导入（@import）Sass文件和css文件编译之后是有所不同的，前者会随着Sass文件一同被编译成css文件，而后者则是在编译后的css文件中导入（@import）后者。
被导入sass文件a.scss：
//a.scss
//-------------------------------
body {
background: #eee;
}
需要导入样式的sass文件b.scss：
@import "reset.css";
@import "a";
p{
background: #0982c1;
}
转译出来的b.css样式：
@import "reset.css";
body {
background: #eee;
}
p{
background: #0982c1;
}
saaa的变量都是以$开头、符号后面便是变量名，接着后面变是以“：”为分界符变量值。
普通变量
定义之后可以在全局范围内使用。
//sass style
//-------------------------------
$fontSize: 12px;
body{
font-size:$fontSize;
}
//css style
//-------------------------------
body{
font-size:12px;
}
默认变量
sass的默认变量仅需要在值后面加上!default即可。
//sass style
//-------------------------------
$baseLineHeight: 1.5 !default;
body{
line-height: $baseLineHeight;
}
//css style
//-------------------------------
body{
line-height:1.5;
}
sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可
//sass style
//-------------------------------
$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
line-height: $baseLineHeight;
}
//css style
//-------------------------------
body{
line-height:2;
}
可以看出现在编译后的line-height为2，而不是我们默认的1.5。默认变量的价值在进行组件化开发的时候会非常有用。
此外还有特殊变量，多值变量（map，list），以及全局变量（！global）
4、嵌套（Nesting）
sass的嵌套有两种：一种是选择器嵌套另一种是属性嵌套。（我们一般使用的都是选择器嵌套）
选择器嵌套
所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强了sass文件的结构性和可读性。
在选择器嵌套中，可以使用&表示父元素选择器
//sass style
//-------------------------------
#top_nav{
line-height: 40px;
text-transform: capitalize;
background-color:#333;
li{
float:left;
}
a{
display: block;
padding: 0 10px;
color: #fff;
&:hover{
color:#ddd;
}
}
}
//css style
//-------------------------------
#top_nav{
line-height: 40px;
text-transform: capitalize;
background-color:#333;
}
#top_nav li{
float:left;
}
#top_nav a{
display: block;
padding: 0 10px;
color: #fff;
}
#top_nav a:hover{
color:#ddd;
}
属性嵌套
所谓属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头。拿个官网的实例看下：
//sass style
//-------------------------------
.fakeshadow {
border: {
style: solid;
left: {
width: 4px;
color: #888;
}
right: {
width: 2px;
color: #ccc;
}
}
}
//css style
//-------------------------------
.fakeshadow {
border-style: solid;
border-left-width: 4px;
border-left-color: #888;
border-right-width: 2px;
border-right-color: #ccc;
}
默认@at-root只会跳出选择器嵌套，而不能跳出@media或@support，如果要跳出这两种，则需使用@at-root (without: media)，@at-root (without: support)。这个语法的关键词有四个：all（表示所有），rule（表示常规css），media（表示media），support（表示support，因为@support目前还无法广泛使用，所以在此不表）。我们默认的@at-root其实就是@at-root (without:rule)。
5、混合（mixin）
使用@mixin声明混合，可以传递参数，参数名以$开头，多个参数以逗号分开，声明的@mixin通过@include来调用。
无参数mixin
//sass style
//-------------------------------
@mixin center-block {
margin-left:auto;
margin-right:auto;
}
.demo{
@include center-block;
}
//css style
//-------------------------------
.demo{
margin-left:auto;
margin-right:auto;
}
//sass style //------------------------------- @mixin opacity($opacity:50) { opacity: $opacity / 100; filter: alpha(opacity=$opacity); } //css style //------------------------------- .opacity{ @include opacity; //参数使用默认值 } .opacity-80{ @include opacity(80); //传递参数 }多个参数mixin
调用时可直接传入值，如
@include传入参数的个数小于@mixin定义参数的个数，则按照顺序表示，后面不足的使用默认值，如不足的没有默认值则报错。除此之外还可以选择性的传入参数，使用参数名与值同时传入。//sass style //------------------------------- @mixin horizontal-line($border:1px dashed #ccc, $padding:10px){ border-bottom:$border; padding-top:$padding; padding-bottom:$padding; } .imgtext-h li{ @include horizontal-line(1px solid #ccc); } .imgtext-h--product li{ @include horizontal-line($padding:15px); } //css style //------------------------------- .imgtext-h li { border-bottom: 1px solid #cccccc; padding-top: 10px; padding-bottom: 10px; } .imgtext-h--product li { border-bottom: 1px dashed #cccccc; padding-top: 15px; padding-bottom: 15px; }多组值参数mixin
如果一个参数可以有多组值，如box-shadow、transition等，那么参数则需要在变量后加三个点表示，如
$variables...。//sass style //------------------------------- //box-shadow可以有多组值，所以在变量参数后面添加... @mixin box-shadow($shadow...) { -webkit-box-shadow:$shadow; box-shadow:$shadow; } .box{ border:1px solid #ccc; @include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3)); } //css style //------------------------------- .box{ border:1px solid #ccc; -webkit-box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3); box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3); }
多个参数mixin
调用时可直接传入值，如@include传入参数的个数小于@mixin定义参数的个数，则按照顺序表示，后面不足的使用默认值，如不足的没有默认值则报错。除此之外还可以选择性的传入参数，使用参数名与值同时传入。
//sass style
//-------------------------------
@mixin horizontal-line($border:1px dashed #ccc, $padding:10px){
border-bottom:$border;
padding-top:$padding;
padding-bottom:$padding;
}
.imgtext-h li{
@include horizontal-line(1px solid #ccc);
}
.imgtext-h--product li{
@include horizontal-line($padding:15px);
}
//css style
//-------------------------------
.imgtext-h li {
border-bottom: 1px solid #cccccc;
padding-top: 10px;
padding-bottom: 10px;
}
.imgtext-h--product li {
border-bottom: 1px dashed #cccccc;
padding-top: 15px;
padding-bottom: 15px;
}
多组值参数mixin
如果一个参数可以有多组值，如box-shadow、transition等，那么参数则需要在变量后加三个点表示，如$variables...。
//sass style
//-------------------------------
//box-shadow可以有多组值，所以在变量参数后面添加...
@mixin box-shadow($shadow...) {
-webkit-box-shadow:$shadow;
box-shadow:$shadow;
}
.box{
border:1px solid #ccc;
@include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));
}
//css style
//-------------------------------
.box{
border:1px solid #ccc;
-webkit-box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);
box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);
}
在sass中使用@extend来继承另一个选择器的所有样式。
//sass style
//-------------------------------
h1{
border: 4px solid #ff9aa9;
}
.speaker{
@extend h1;
border-width: 2px;
}
//css style
//-------------------------------
h1,.speaker{
border: 4px solid #ff9aa9;
}
.speaker{
border-width: 2px;
}占位选择器相比较继承的优势在于，不调用时就不会有任何多余的文件，避免了在基础文件中预定义了很多样式。
//sass style
//-------------------------------
%ir{
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
%clearfix{
@if $lte7 {
*zoom: 1;
}
&:before,
&:after {
content: "";
display: table;
font: 0/0 a;
}
&:after {
clear: both;
}
}
#header{
h1{
@extend %ir;
width:300px;
}
}
.ir{
@extend %ir;
}
//css style
//-------------------------------
#header h1,
.ir{
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
#header h1{
width:300px;
}sass定义的函数都以@function开头
//sass style
//-------------------------------
$baseFontSize: 10px !default;
$gray: #ccc !defualt;
// pixels to rems
@function pxToRem($px) {
@return $px / $baseFontSize * 1rem;
}
body{
font-size:$baseFontSize;
color:lighten($gray,10%);
}
.test{
font-size:pxToRem(16px);
color:darken($gray,10%);
}
//css style
//-------------------------------
body{
font-size:10px;
color:#E6E6E6;
}
.test{
font-size:1.6rem;
color:#B3B3B3;
}参考网站：http://www.w3cplus.com/sassguide/syntax.html
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
