sass语法入门
前言转载请注明出处：www.tangshuang.net
【本文受版权保护】【本文受版权保护】本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】【未经授权禁止转载】本书是直接copy别人的内容，你可以在【原创内容，转载请注明出处】这里原创内容，盗版必究。读到原文，感谢原作者写出如此出色的入门语【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】法介绍，花20分钟，就可以掌握基本的使用本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】方法。
【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net【作者：唐霜】本文版权归作者所有，未经授权不得转载。之所以要copy过来，是因为原文的知识体本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。系不够便于快速检索。我博客的书目形式左侧【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】有文章索引，阅读和查阅的时候非常方便，所【原创内容，转载请注明出处】【本文受版权保护】以为了我自己使用方便，我把它转载过来，以【作者：唐霜】【版权所有】唐霜 www.tangshuang.net备日后查阅方便。
著作权归作者所有，禁止商业用途转载。【本文受版权保护】原创内容，盗版必究。【作者：唐霜】【转载请注明来源】文件后缀名转载请注明出处：www.tangshuang.net
【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】【未经授权禁止转载】sass有两种后缀名文件：一种后缀名为s原创内容，盗版必究。【作者：唐霜】ass，不使用大括号和分号；另一种就是我【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。们这里使用的scss文件，这种和我们平时转载请注明出处：www.tangshuang.net【本文受版权保护】写的css文件格式差不多，使用大括号和分著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】号。而本教程中所说的所有sass文件都指【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】后缀名为scss的文件。在此也建议使用后著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】缀名为scss的文件，以避免sass后缀【作者：唐霜】本文作者：唐霜，转载请注明出处。名的严格格式要求报错。
【作者：唐霜】原创内容，盗版必究。【原创不易，请尊重版权】//文件后缀名为sass的语法
body
background: #eee
font-size:12pxp
background: #0982c1
//文件后缀名为scss的语法
body {
background: #eee;
font-size:12px;
}
p{
background: #0982c1;
}
导入本文版权归作者所有，未经授权不得转载。
转载请注明出处：www.tangshuang.net【作者：唐霜】著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netsass的导入(【版权所有，侵权必究】@import)规则和CSS的有所不同，编译时会将著作权归作者所有，禁止商业用途转载。@import的scss文件合并进来只生成一个CSS文【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net件。但是如果你在sass文件中导入css【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】文件如@import 'reset.css'，那效果跟普通CSS导入样式文件一样，导【转载请注明来源】本文版权归作者所有，未经授权不得转载。入的css文件不会合并到编译后的文件中，【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】而是以@import方式存在。【本文受版权保护】
所有的sass导入文件都可以忽略后缀名著作权归作者所有，禁止商业用途转载。.scss。一般来说基础的文件命名方法以_开头，如_mixin.scss。这种文件在导入的时候可以不写下划线，可【原创不易，请尊重版权】【原创内容，转载请注明出处】写成@import "mixin"。著作权归作者所有，禁止商业用途转载。
被导入sass文件a.scss：未经授权，禁止复制转载。
未经授权，禁止复制转载。【作者：唐霜】【未经授权禁止转载】//a.scss
//-------------------------------
body {
background: #eee;
}
需要导入样式的sass文件b.scss：
著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。@import "reset.css";
@import "a";
p {
background: #0982c1;
}
转译出来的b.css样式：【关注微信公众号：wwwtangshuangnet】
【作者：唐霜】本文作者：唐霜，转载请注明出处。原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。@import "reset.css";
body {
background: #eee;
}
p {
background: #0982c1;
}
根据上面的代码可以看出，b.scss编译转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】后，reset.css继续保持impor【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.nett的方式，而a.scss则被整合进来了。
【原创不易，请尊重版权】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。注释转载请注明出处：www.tangshuang.net
【原创不易，请尊重版权】【原创不易，请尊重版权】未经授权，禁止复制转载。【作者：唐霜】【版权所有】唐霜 www.tangshuang.netsass有两种注释方式，一种是标准的cs本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。s注释方式/* */，另一种则是原创内容，盗版必究。//双斜杆形式的单行注释，不过这种单行注释不【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】会被转译出来。
标准的css注释本文作者：唐霜，转载请注明出处。
【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。/**我是css的标准注释*设置body内距*/
body{
padding:5px;
}
双斜杆单行注释【本文首发于唐霜的博客】
【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】【原创内容，转载请注明出处】【原创不易，请尊重版权】单行注释跟JavaScript语言中的注【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】释一样，使用又斜杠（//），但单行注释不会输入到CSS中。【转载请注明来源】
//我是双斜杠表示的单行注释
//设置body内距
body{
padding:5px; //5px
}
变量本文作者：唐霜，转载请注明出处。
【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】sass的变量必须是$开头，后面紧跟变量【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。名，而变量值和变量名之间就需要使用冒号(【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net:)分隔开（就像CSS属性设置一样），如著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】果值后面加上!default则表示默认值【作者：唐霜】著作权归作者所有，禁止商业用途转载。。
【关注微信公众号：wwwtangshuangnet】【本文受版权保护】原创内容，盗版必究。未经授权，禁止复制转载。普通变量本文作者：唐霜，转载请注明出处。
【转载请注明来源】【原创不易，请尊重版权】【版权所有，侵权必究】【本文受版权保护】定义之后可以在全局范围内使用。【关注微信公众号：wwwtangshuangnet】
【本文受版权保护】著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。原创内容，盗版必究。【本文首发于唐霜的博客】//sass style
//-------------------------------
$fontSize: 12px;
body{
font-size:$fontSize;
}
//css style
//-------------------------------
body{
font-size:12px;
}
变量默认值【未经授权禁止转载】
【关注微信公众号：wwwtangshuangnet】【作者：唐霜】本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】sass的默认变量仅需要在值后面加上【本文首发于唐霜的博客】!default即可。【关注微信公众号：wwwtangshuangnet】
//sass style
//-------------------------------
$baseLineHeight: 1.5 !default;
body {
line-height: $baseLineHeight;
}
//css style
//-------------------------------
body {
line-height:1.5;
}
sass的默认变量一般是用来设置默认值，未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。然后根据需求来覆盖的，覆盖的方式也很简单著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net，只需要在默认变量之前重新声明下变量即可
本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。//sass style
//-------------------------------
$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
line-height: $baseLineHeight;
}
//css style
//-------------------------------
body{
line-height:2;
}
可以看出现在编译后的【转载请注明来源】line-height为2，而不是我们默认的1.5。默认变量的未经授权，禁止复制转载。【本文首发于唐霜的博客】价值在进行组件化开发的时候会非常有用。
变量的#{}使用形式【未经授权禁止转载】
【版权所有，侵权必究】原创内容，盗版必究。【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】一般我们定义的变量都为属性值，可直接使用【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】，但是如果变量作为属性或在某些特殊情况下【未经授权禁止转载】未经授权，禁止复制转载。等则必须要以#{$variables}形式使用。本文作者：唐霜，转载请注明出处。
//sass style
//-------------------------------
$borderDirection: top !default;
$baseFontSize: 12px !default;
$baseLineHeight: 1.5 !default;
//应用于class和属性
.border-#{$borderDirection} {
border-#{$borderDirection}: 1px solid #ccc;
}
//应用于复杂的属性值
body {
font: #{$baseFontSize}/#{$baseLineHeight};
}
//css style
//-------------------------------
.border-top {
border-top:1px solid #ccc;
}
body {
font: 12px/1.5;
}
多值变量未经授权，禁止复制转载。
【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】多值变量分为list类型和map类型，简本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。单来说list类型有点像js中的数组，而【本文受版权保护】原创内容，盗版必究。map类型有点像js中的对象。
【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】原创内容，盗版必究。list【本文首发于唐霜的博客】
【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。【版权所有，侵权必究】【原创不易，请尊重版权】【原创内容，转载请注明出处】list数据可通过空格，逗号或小括号分隔原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。多个值，可用nth($var,$index)取值。关于list数据操作还有很多其他函【本文首发于唐霜的博客】原创内容，盗版必究。数如length($list)，【原创不易，请尊重版权】join($list1,$list2,[$separator])，著作权归作者所有，禁止商业用途转载。append($list,$value,[$separator])等，具体可参考【转载请注明来源】sass Functions【关注微信公众号：wwwtangshuangnet】（搜索【本文受版权保护】List Functions即可）【版权所有，侵权必究】
定义【转载请注明来源】
本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。//一维数据 $px: 5px 10px 20px 30px; //二维数据，相当于js中的二维数组 $px: 5px 10px, 20px 30px; $px: (5px 10px) (20px 30px);
使用本文版权归作者所有，未经授权不得转载。
转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】【原创内容，转载请注明出处】//sass style
//-------------------------------
$linkColor: #08c #333 !default;
//第一个值为默认值，第二个鼠标滑过值
a {
color:nth($linkColor,1);
&:hover{
color:nth($linkColor,2);
}
}
//css style
//-------------------------------
a{
color:#08c;
}
a:hover{
color:#333;
}
map【本文首发于唐霜的博客】
【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。【作者：唐霜】【原创不易，请尊重版权】map数据以key和value成对出现，原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。其中value又可以是list。格式为：$map: (key1: value1, key2: value2, key3: value3);。可通过未经授权，禁止复制转载。map-get($map,$key)取值。关于map数据还有很多其他函数如【原创内容，转载请注明出处】map-merge($map1,$map2)，【转载请注明来源】map-keys($map)，未经授权，禁止复制转载。map-values($map)等，具体可参考【原创内容，转载请注明出处】sass Functions本文作者：唐霜，转载请注明出处。（搜索【未经授权禁止转载】Map Functions即可）转载请注明出处：www.tangshuang.net
定义【本文首发于唐霜的博客】
原创内容，盗版必究。【未经授权禁止转载】原创内容，盗版必究。原创内容，盗版必究。$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);
使用【关注微信公众号：wwwtangshuangnet】
未经授权，禁止复制转载。【本文首发于唐霜的博客】【原创不易，请尊重版权】//sass style
//-------------------------------
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
#{$header} {
font-size: $size;
}
}
//css style
//-------------------------------
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
}
全局变量本文版权归作者所有，未经授权不得转载。
著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。在变量值后面加上转载请注明出处：www.tangshuang.net!global即为全局变量。这个目前还用不上，不过将会未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。在sass 3.4后的版本中正式应用。目本文版权归作者所有，未经授权不得转载。【转载请注明来源】前的sass变量范围饱受诟病，所以才有了本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】这个全局变量。
目前变量机制【作者：唐霜】
本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。在选择器中声明的变量会覆盖外面全局声明的【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。变量。(这也就人们常说的sass没有局部【转载请注明来源】【作者：唐霜】变量)
【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】【转载请注明来源】本文版权归作者所有，未经授权不得转载。//sass style
//-------------------------------
$fontSize: 12px;
body {
$fontSize: 14px;
font-size:$fontSize;
}
p {
font-size:$fontSize;
}
//css style
//-------------------------------
body {
font-size:14px;
}
p{
font-size:14px;
}
启用global之后的机制【本文首发于唐霜的博客】
转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。请注意，这个目前还无法使用，所以样式不是【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。真实解析出来的。
本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net//sass style
//-------------------------------
$fontSize: 12px;
$color: #333;
body {
$fontSize: 14px;
$color：#fff !global;
font-size: $fontSize;
color:$color;
}
p {
font-size: $fontSize;
color:$color;
}
//css style
//-------------------------------
body {
font-size:14px;
color:#fff;
}
p {
font-size:12px;
color:#fff;
}
这里设置了两个变量，然后在body里面重【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】新设置了下，有点不同的是对于$color变量，我们设置了【未经授权禁止转载】!global。通过编译后的css可以看到【作者：唐霜】font-size取值不同，而未经授权，禁止复制转载。color取值相同。与上面的机制对比就会发现默认在本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。选择器里面的变量为局部变量，而只有设置了!global之后才会成为全局变量。【原创内容，转载请注明出处】
本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】
关于变量的详细分析请查阅【原创不易，请尊重版权】sass揭秘之变量【本文首发于唐霜的博客】
嵌套(Nesting)本文作者：唐霜，转载请注明出处。
转载请注明出处：www.tangshuang.net原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。【本文受版权保护】sass的嵌套包括两种：一种是选择器的嵌【原创内容，转载请注明出处】【作者：唐霜】套；另一种是属性的嵌套。我们一般说起或用【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。到的都是选择器的嵌套。
本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net选择器嵌套和&未经授权，禁止复制转载。
著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net所谓选择器嵌套指的是在一个选择器中嵌套另原创内容，盗版必究。【作者：唐霜】一个选择器来实现继承，从而增强了sass【版权所有】唐霜 www.tangshuang.net【本文受版权保护】文件的结构性和可读性。
【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net
在选择器嵌套中，可以使用本文作者：唐霜，转载请注明出处。&表示父元素选择器【访问 www.tangshuang.net 获取更多精彩内容】
//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;
}
属性嵌套未经授权，禁止复制转载。
【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net【转载请注明来源】【版权所有】唐霜 www.tangshuang.net所谓属性嵌套指的是有些属性拥有同一个开始原创内容，盗版必究。原创内容，盗版必究。单词，如border-width，bor原创内容，盗版必究。【本文首发于唐霜的博客】der-color都是以border开头【版权所有，侵权必究】【作者：唐霜】。拿个官网的实例看下：
【未经授权禁止转载】【原创内容，转载请注明出处】未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net//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;
}
当然这只是个属性嵌套的例子，如果实际这样未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。使用，那估计得疯掉。
【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】@at-root未经授权，禁止复制转载。
【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。【转载请注明来源】【本文首发于唐霜的博客】sass3.3.0中新增的功能，用来跳出未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】选择器嵌套的。默认所有的嵌套，继承所有上【作者：唐霜】【本文首发于唐霜的博客】级选择器，但有了这个就可以跳出所有上级选【转载请注明来源】本文版权归作者所有，未经授权不得转载。择器。
未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。普通跳出嵌套【转载请注明来源】
【版权所有，侵权必究】【转载请注明来源】【原创内容，转载请注明出处】//sass style
//-------------------------------
//没有跳出
.parent-1 {
color:#f00;
.child {
width:100px;
}
}
//单个选择器跳出
.parent-2 {
color:#f00;
@at-root .child {
width:200px;
}
}
//多个选择器跳出
.parent-3 {
background:#f00;
@at-root {
.child1 {
width:300px;
}
.child2 {
width:400px;
}
}
}
//css style
//-------------------------------
.parent-1 {
color: #f00;
}
.parent-1 .child {
width: 100px;
}
.parent-2 {
color: #f00;
}
.child {
width: 200px;
}
.parent-3 {
background: #f00;
}
.child1 {
width: 300px;
}
.child2 {
width: 400px;
}
@at-root的without和wit转载请注明出处：www.tangshuang.net原创内容，盗版必究。h
原创内容，盗版必究。【未经授权禁止转载】【本文首发于唐霜的博客】原创内容，盗版必究。默认著作权归作者所有，禁止商业用途转载。@at-root只会跳出选择器嵌套，而不能跳出【本文受版权保护】@media或未经授权，禁止复制转载。@support，如果要跳出这两种，则需使用【原创不易，请尊重版权】@at-root (without: media)，【本文受版权保护】@at-root (without: support)。这个语法的关键词有四个：著作权归作者所有，禁止商业用途转载。all（表示所有），【作者：唐霜】rule（表示常规css），【版权所有】唐霜 www.tangshuang.netmedia（表示media），【版权所有，侵权必究】support（表示support，因为转载请注明出处：www.tangshuang.net@support目前还无法广泛使用，所以在此不表）。我们未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net默认的@at-root其实就是【本文受版权保护】@at-root (without:rule)。原创内容，盗版必究。
//sass style
//-------------------------------
//跳出父级元素嵌套
@media print {
.parent1{
color:#f00;
@at-root .child1 {
width:200px;
}
}
}
//跳出media嵌套，父级有效
@media print {
.parent2 {
color:#f00;
@at-root (without: media) {
.child2 {
width:200px;
}
}
}
}
//跳出media和父级
@media print {
.parent3 {
color:#f00;
@at-root (without: all) {
.child3 {
width:200px;
}
}
}
}
//css style
//-------------------------------
@media print {
.parent1 {
color: #f00;
}
.child1 {
width: 200px;
}
}
@media print {
.parent2 {
color: #f00;
}
}
.parent2 .child2 {
width: 200px;
}
@media print {
.parent3 {
color: #f00;
}
}
.child3 {
width: 200px;
}
@at-root与&配合使用本文作者：唐霜，转载请注明出处。
本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。【转载请注明来源】//sass style
//-------------------------------
.child {
@at-root .parent &{
color:#f00;
}
}
//css style
//-------------------------------
.parent .child {
color: #f00;
}
应用于@keyframe未经授权，禁止复制转载。
【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net//sass style
//-------------------------------
.demo {
...
animation: motion 3s infinite;
@at-root {
@keyframes motion {
...
}
}
}
//css style//-------------------------------
.demo {
...
animation: motion 3s infinite;
}
@keyframes motion {
...
}
混合(mixin)【关注微信公众号：wwwtangshuangnet】
著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】原创内容，盗版必究。sass中使用【访问 www.tangshuang.net 获取更多精彩内容】@mixin声明混合，可以传递参数，参数名以$符号开【版权所有，侵权必究】原创内容，盗版必究。始，多个参数以逗号分开，也可以给参数设置本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。默认值。声明的@mixin通过【关注微信公众号：wwwtangshuangnet】@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;
}
有参数mixin本文版权归作者所有，未经授权不得转载。
原创内容，盗版必究。原创内容，盗版必究。原创内容，盗版必究。//sass style
//-------------------------------
@mixin opacity($opacity:50) {
opacity: $opacity / 100;
filter: alpha(opacity=$opacity);
}
//css style
//-------------------------------
.opacity {
@include opacity; //参数使用默认值
}
.opacity-80 {
@include opacity(80); //传递参数
}
多个参数mixin【版权所有】唐霜 www.tangshuang.net
转载请注明出处：www.tangshuang.net【作者：唐霜】著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】调用时可直接传入值，如【未经授权禁止转载】@include传入参数的个数小于著作权归作者所有，禁止商业用途转载。@mixin定义参数的个数，则按照顺序表示，后面不足本文作者：唐霜，转载请注明出处。原创内容，盗版必究。的使用默认值，如不足的没有默认值则报错。本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。除此之外还可以选择性的传入参数，使用参数【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】名与值同时传入。
//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本文版权归作者所有，未经授权不得转载。
【本文首发于唐霜的博客】【转载请注明来源】【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。如果一个参数可以有多组值，如box-sh【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】adow、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);
}
@content著作权归作者所有，禁止商业用途转载。
【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net【转载请注明来源】@content在sass3.2.0中引入，可以用来解决未经授权，禁止复制转载。【本文受版权保护】css3的@media等带来的问题。它可【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net以使@mixin接受一整块样式，接受的样式从@conte未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。nt开始。
//sass style
//-------------------------------
@mixin max-screen($res) {
@media only screen and ( max-width: $res ) {
@content;
}
}
@include max-screen(480px) {
body { color: red }
}
//css style
//-------------------------------
@media only screen and (max-width: 480px) {
body { color: red }
}
PS：【作者：唐霜】@mixin通过【访问 www.tangshuang.net 获取更多精彩内容】@include调用后解析出来的样式是以拷贝形式存在的，【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。而下面的继承则是以联合声明的方式存在的，转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】所以从3.2.0版本以后，建议传递参数的【原创内容，转载请注明出处】未经授权，禁止复制转载。用@mixin，而非传递参数类的使用下面的继承【版权所有】唐霜 www.tangshuang.net%。【版权所有】唐霜 www.tangshuang.net
继承【原创不易，请尊重版权】
本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。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;
}
占位选择器%未经授权，禁止复制转载。
【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。【本文首发于唐霜的博客】从sass 3.2.0以后就可以定义占位【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。选择器%。这种选择器的优势在于：如果不调用则不会【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】有任何多余的css文件，避免了以前在一些著作权归作者所有，禁止商业用途转载。【转载请注明来源】基础的文件中预定义了很多基础的样式，然后【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。实际应用中不管是否使用了@extend去继承相应的样式，都会解析出来所有的样式【本文首发于唐霜的博客】未经授权，禁止复制转载。。占位选择器以%标识定义，通过【本文首发于唐霜的博客】@extend调用。著作权归作者所有，禁止商业用途转载。
//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;
}
如上代码，定义了两个占位选择器【原创不易，请尊重版权】%ir和【版权所有】唐霜 www.tangshuang.net%clearfix，其中【访问 www.tangshuang.net 获取更多精彩内容】%clearfix这个没有调用，所以解析出来的css样式也本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】就没有clearfix部分。占位选择器的【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。出现，使css文件更加简练可控，没有多余【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。。所以可以用其定义一些基础的样式文件，然【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。后根据需要调用产生相应的css。
ps未经授权，禁止复制转载。：在著作权归作者所有，禁止商业用途转载。@media中暂时不能本文作者：唐霜，转载请注明出处。@extend @media外的代码片段，以后将会可以。【未经授权禁止转载】
函数著作权归作者所有，禁止商业用途转载。
【本文受版权保护】转载请注明出处：www.tangshuang.net【本文受版权保护】【原创内容，转载请注明出处】sass定义了很多函数可供使用，当然你也本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】可以自己定义函数，以@fuction开始本文版权归作者所有，未经授权不得转载。【作者：唐霜】。sass的官方函数链接为：sass fuction【本文受版权保护】，实际项目中我们使用最多的应该是颜色函数转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。，而颜色函数中又以lighten减淡和d【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。arken加深为最，其调用方法为lighten($color,$amount)和【原创内容，转载请注明出处】darken($color,$amount)，它们的第一个参数都是颜色值，第二个参数未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。都是百分比。
//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;
}
关于【访问 www.tangshuang.net 获取更多精彩内容】@mixin，【关注微信公众号：wwwtangshuangnet】%，【未经授权禁止转载】@function更多说明可参阅：转载请注明出处：www.tangshuang.net
- sass揭秘之@mixin，%，@fun【作者：唐霜】【未经授权禁止转载】ction 【作者：唐霜】转载请注明出处：www.tangshuang.net【未经授权禁止转载】转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】
- Sass基础——颜色函数本文版权归作者所有，未经授权不得转载。 未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。
- Sass基础——Sass函数本文作者：唐霜，转载请注明出处。 转载请注明出处：www.tangshuang.net【转载请注明来源】【关注微信公众号：wwwtangshuangnet】
运算【未经授权禁止转载】
【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net【转载请注明来源】sass具有运算的特性，可以对数值型的V【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】alue(如：数字、颜色、变量等)进行加【原创不易，请尊重版权】【原创不易，请尊重版权】减乘除四则运算。请注意运算符前后请留一个【未经授权禁止转载】未经授权，禁止复制转载。空格，不然会出错。
【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。$baseFontSize: 14px !default; $baseLineHeight: 1.5 !default; $baseGap: $baseFontSize * $baseLineHeight !default; $halfBaseGap: $baseGap / 2 !default; $samllFontSize: $baseFontSize - 2px !default; //grid $_columns: 12 !default; // Total number of columns $_column-width: 60px !default; // Width of a single column $_gutter: 20px !default; // Width of the gutter $_gridsystem-width: $_columns * ($_column-width + $_gutter); //grid system width
条件判断及循环本文作者：唐霜，转载请注明出处。
【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。@if判断【本文首发于唐霜的博客】
著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】@if可一个条件单独使用，也可以和【版权所有】唐霜 www.tangshuang.net@else结合多条件使用【转载请注明来源】
//sass style
//-------------------------------
$lte7: true;
$type: monster;
.ib {
display:inline-block;
@if $lte7 {
*display:inline;
*zoom:1;
}
}
p {
@if $type == ocean {
color: blue;
}
@else if $type == matador {
color: red;
}
@else if $type == monster {
color: green;
}
@else {
color: black;
}
}
//css style
//-------------------------------
.ib {
display:inline-block;
*display:inline;
*zoom:1;
}
p {
color: green;
}
三目判断【访问 www.tangshuang.net 获取更多精彩内容】
本文作者：唐霜，转载请注明出处。【未经授权禁止转载】【未经授权禁止转载】语法为：转载请注明出处：www.tangshuang.netif($condition, $if_true, $if_false) 。三个参数分别表示：条件，条件为真的值著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。，条件为假的值。
if(true, 1px, 2px) => 1px if(false, 1px, 2px) => 2px
for循环【版权所有，侵权必究】
原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】for循环有两种形式，分别为：转载请注明出处：www.tangshuang.net@for $var from <start> through <end>和【未经授权禁止转载】@for $var from <start> to <end>。$i表示变量，start表示起始值，e【本文受版权保护】【原创不易，请尊重版权】nd表示结束值，这两个的区别是关键字th著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。rough表示包括end这个数，而to则【未经授权禁止转载】【本文受版权保护】不包括end这个数。
//sass style
//-------------------------------
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
//css style
//-------------------------------
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
.item-3 {
width: 6em;
}
@each循环【未经授权禁止转载】
【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net语法为：原创内容，盗版必究。@each $var in <list or map>。其中【未经授权禁止转载】$var表示变量，而list和map表示list【本文受版权保护】【版权所有，侵权必究】类型数据和map类型数据。sass 3.【原创内容，转载请注明出处】【本文受版权保护】3.0新加入了多字段循环和map数据循环未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net。
单个字段list数据循环未经授权，禁止复制转载。
【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】【作者：唐霜】【本文受版权保护】//sass style
//-------------------------------
$animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
//css style
//-------------------------------
.puma-icon {
background-image: url('/images/puma.png');
}
.sea-slug-icon {
background-image: url('/images/sea-slug.png');
}
.egret-icon {
background-image: url('/images/egret.png');
}
.salamander-icon {
background-image: url('/images/salamander.png');
}
多个字段list数据循环【本文首发于唐霜的博客】
转载请注明出处：www.tangshuang.net【未经授权禁止转载】【本文受版权保护】转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。//sass style
//-------------------------------
$animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move);
@each $animal, $color, $cursor in $animal-data {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
border: 2px solid $color;
cursor: $cursor;
}
}
//css style
//-------------------------------
.puma-icon {
background-image: url('/images/puma.png');
border: 2px solid black;
cursor: default;
}
.sea-slug-icon {
background-image: url('/images/sea-slug.png');
border: 2px solid blue;
cursor: pointer;
}
.egret-icon {
background-image: url('/images/egret.png');
border: 2px solid white;
cursor: move;
}
多个字段map数据循环未经授权，禁止复制转载。
本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】原创内容，盗版必究。【未经授权禁止转载】本文作者：唐霜，转载请注明出处。//sass style
//-------------------------------
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
#{$header} {
font-size: $size;
}
}
//css style
//-------------------------------
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
}
关于循环判断详细分析请查阅：【原创内容，转载请注明出处】sass揭秘之@if，@for，@eac著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。h
【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net如果你觉得本书对你有帮助，通过下方的二维码向我打赏吧，帮助我写出更多有用的内容。
2017-06-01
可以可以
多支持～