返回：唐霜｜书

sass语法入门

简单快捷的sass入门语法，十分钟上手基本用法。

前言本文版权归作者所有，未经授权不得转载。

转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】

本书是直接copy别人的内容，你可以在【访问 www.tangshuang.net 获取更多精彩内容】这里未经授权，禁止复制转载。读到原文，感谢原作者写出如此出色的入门语【未经授权禁止转载】转载请注明出处：www.tangshuang.net法介绍，花20分钟，就可以掌握基本的使用著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。方法。

本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。原创内容，盗版必究。

之所以要copy过来，是因为原文的知识体【本文受版权保护】本文版权归作者所有，未经授权不得转载。系不够便于快速检索。我博客的书目形式左侧【作者：唐霜】【版权所有】唐霜 www.tangshuang.net有文章索引，阅读和查阅的时候非常方便，所【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。以为了我自己使用方便，我把它转载过来，以【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。备日后查阅方便。

著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。

文件后缀名本文作者：唐霜，转载请注明出处。

sass有两种后缀名文件：一种后缀名为s著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netass，不使用大括号和分号；另一种就是我【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net们这里使用的scss文件，这种和我们平时【作者：唐霜】【版权所有】唐霜 www.tangshuang.net写的css文件格式差不多，使用大括号和分原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。号。而本教程中所说的所有sass文件都指【版权所有，侵权必究】【原创不易，请尊重版权】后缀名为scss的文件。在此也建议使用后【本文受版权保护】【本文受版权保护】缀名为scss的文件，以避免sass后缀【原创内容，转载请注明出处】【未经授权禁止转载】名的严格格式要求报错。

【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。【本文受版权保护】本文版权归作者所有，未经授权不得转载。

//文件后缀名为sass的语法
body 
  background: #eee
  font-size:12pxp
  background: #0982c1
//文件后缀名为scss的语法
body {
  background: #eee;
  font-size:12px;
}
p{
  background: #0982c1;
}

导入本文作者：唐霜，转载请注明出处。

sass的导入(【本文首发于唐霜的博客】@import)规则和CSS的有所不同，编译时会将原创内容，盗版必究。@import的scss文件合并进来只生成一个CSS文【未经授权禁止转载】【作者：唐霜】件。但是如果你在sass文件中导入css【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。文件如@import 'reset.css'，那效果跟普通CSS导入样式文件一样，导本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】入的css文件不会合并到编译后的文件中，【原创内容，转载请注明出处】【本文首发于唐霜的博客】而是以@import方式存在。转载请注明出处：www.tangshuang.net

本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。原创内容，盗版必究。【本文受版权保护】

著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。【作者：唐霜】【原创不易，请尊重版权】

//a.scss
//-------------------------------
body {
  background: #eee;
}

需要导入样式的sass文件b.scss：

本文作者：唐霜，转载请注明出处。【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。本文作者：唐霜，转载请注明出处。

@import "reset.css";
@import "a";
p {
  background: #0982c1;
}

未经授权，禁止复制转载。【未经授权禁止转载】未经授权，禁止复制转载。

@import "reset.css";
body {
  background: #eee;
}
p {
  background: #0982c1;
}

根据上面的代码可以看出，b.scss编译【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】后，reset.css继续保持impor【未经授权禁止转载】原创内容，盗版必究。t的方式，而a.scss则被整合进来了。

原创内容，盗版必究。【本文受版权保护】【本文首发于唐霜的博客】

注释【原创内容，转载请注明出处】

sass有两种注释方式，一种是标准的cs本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。s注释方式/* */，另一种则是【访问 www.tangshuang.net 获取更多精彩内容】//双斜杆形式的单行注释，不过这种单行注释不【原创不易，请尊重版权】【未经授权禁止转载】会被转译出来。

原创内容，盗版必究。【本文受版权保护】本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】【原创不易，请尊重版权】

标准的css注释【关注微信公众号：wwwtangshuangnet】

转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。【转载请注明来源】【原创不易，请尊重版权】

/**我是css的标准注释*设置body内距*/
body{
  padding:5px;
}

双斜杆单行注释著作权归作者所有，禁止商业用途转载。

本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。

//我是双斜杠表示的单行注释
//设置body内距
body{
  padding:5px; //5px
}

变量著作权归作者所有，禁止商业用途转载。

sass的变量必须是$开头，后面紧跟变量【转载请注明来源】【原创不易，请尊重版权】名，而变量值和变量名之间就需要使用冒号(【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。:)分隔开（就像CSS属性设置一样），如【本文受版权保护】转载请注明出处：www.tangshuang.net果值后面加上!default则表示默认值【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net。

未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net

普通变量【原创不易，请尊重版权】

【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】

定义之后可以在全局范围内使用。【关注微信公众号：wwwtangshuangnet】

转载请注明出处：www.tangshuang.net原创内容，盗版必究。【作者：唐霜】著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】

//sass style
//-------------------------------
$fontSize: 12px;
body{
  font-size:$fontSize;
}
//css style
//-------------------------------
body{
  font-size:12px;
}

变量默认值【本文首发于唐霜的博客】

转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net原创内容，盗版必究。

转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。

//sass style
//-------------------------------
$baseLineHeight: 1.5 !default;
body {
  line-height: $baseLineHeight; 
}
//css style
//-------------------------------
body {
  line-height:1.5;
}

//sass style
//-------------------------------
$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
  line-height: $baseLineHeight; 
}
//css style
//-------------------------------
body{
  line-height:2;
}

可以看出现在编译后的【本文受版权保护】line-height为2，而不是我们默认的1.5。默认变量的转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】价值在进行组件化开发的时候会非常有用。

【本文受版权保护】【本文受版权保护】【本文首发于唐霜的博客】【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。

变量的#{}使用形式本文作者：唐霜，转载请注明出处。

转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。

//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;
}

多值变量【转载请注明来源】

【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】【未经授权禁止转载】

多值变量分为list类型和map类型，简【作者：唐霜】【关注微信公众号：wwwtangshuangnet】单来说list类型有点像js中的数组，而【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。map类型有点像js中的对象。

转载请注明出处：www.tangshuang.net【本文受版权保护】【原创不易，请尊重版权】

list【版权所有，侵权必究】

list数据可通过空格，逗号或小括号分隔未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。多个值，可用nth($var,$index)取值。关于list数据操作还有很多其他函本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。数如length($list)，原创内容，盗版必究。join($list1,$list2,[$separator])，【本文首发于唐霜的博客】append($list,$value,[$separator])等，具体可参考原创内容，盗版必究。sass Functions本文版权归作者所有，未经授权不得转载。（搜索未经授权，禁止复制转载。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著作权归作者所有，禁止商业用途转载。

map数据以key和value成对出现，未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net其中value又可以是list。格式为：$map: (key1: value1, key2: value2, key3: value3);。可通过【原创不易，请尊重版权】map-get($map,$key)取值。关于map数据还有很多其他函数如著作权归作者所有，禁止商业用途转载。map-merge($map1,$map2)，转载请注明出处：www.tangshuang.netmap-keys($map)，未经授权，禁止复制转载。map-values($map)等，具体可参考【关注微信公众号：wwwtangshuangnet】sass Functions【转载请注明来源】（搜索【原创内容，转载请注明出处】Map Functions即可）【作者：唐霜】

【原创不易，请尊重版权】【未经授权禁止转载】本文作者：唐霜，转载请注明出处。

定义未经授权，禁止复制转载。

【转载请注明来源】本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。【作者：唐霜】

$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);

使用本文版权归作者所有，未经授权不得转载。

//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后的版本中正式应用。目转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。前的sass变量范围饱受诟病，所以才有了【版权所有】唐霜 www.tangshuang.net【作者：唐霜】这个全局变量。

目前变量机制【未经授权禁止转载】

【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。【本文受版权保护】

在选择器中声明的变量会覆盖外面全局声明的【转载请注明来源】【本文受版权保护】变量。(这也就人们常说的sass没有局部本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。变量)

【原创不易，请尊重版权】【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。

//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 获取更多精彩内容】

请注意，这个目前还无法使用，所以样式不是本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】真实解析出来的。

【未经授权禁止转载】【原创内容，转载请注明出处】【作者：唐霜】

//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里面重未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net新设置了下，有点不同的是对于$color变量，我们设置了【未经授权禁止转载】!global。通过编译后的css可以看到【访问 www.tangshuang.net 获取更多精彩内容】font-size取值不同，而著作权归作者所有，禁止商业用途转载。color取值相同。与上面的机制对比就会发现默认在未经授权，禁止复制转载。【作者：唐霜】选择器里面的变量为局部变量，而只有设置了!global之后才会成为全局变量。本文作者：唐霜，转载请注明出处。
著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。关于变量的详细分析请查阅【版权所有，侵权必究】sass揭秘之变量【关注微信公众号：wwwtangshuangnet】

本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net

嵌套(Nesting)原创内容，盗版必究。

sass的嵌套包括两种：一种是选择器的嵌转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。套；另一种是属性的嵌套。我们一般说起或用本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。到的都是选择器的嵌套。

【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。

选择器嵌套和&转载请注明出处：www.tangshuang.net

著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net原创内容，盗版必究。

所谓选择器嵌套指的是在一个选择器中嵌套另【版权所有】唐霜 www.tangshuang.net【本文受版权保护】一个选择器来实现继承，从而增强了sass【作者：唐霜】【本文受版权保护】文件的结构性和可读性。
著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。在选择器嵌套中，可以使用【关注微信公众号：wwwtangshuangnet】&表示父元素选择器【版权所有】唐霜 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;
}

属性嵌套本文作者：唐霜，转载请注明出处。

//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; 
}

当然这只是个属性嵌套的例子，如果实际这样著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。使用，那估计得疯掉。

转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。原创内容，盗版必究。【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】

@at-root【关注微信公众号：wwwtangshuangnet】

sass3.3.0中新增的功能，用来跳出【未经授权禁止转载】【作者：唐霜】选择器嵌套的。默认所有的嵌套，继承所有上本文版权归作者所有，未经授权不得转载。【作者：唐霜】级选择器，但有了这个就可以跳出所有上级选【原创不易，请尊重版权】原创内容，盗版必究。择器。

【未经授权禁止转载】【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】

普通跳出嵌套【版权所有】唐霜 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著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】h

本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。【本文首发于唐霜的博客】

默认【版权所有】唐霜 www.tangshuang.net@at-root只会跳出选择器嵌套，而不能跳出未经授权，禁止复制转载。@media或【原创不易，请尊重版权】@support，如果要跳出这两种，则需使用【转载请注明来源】@at-root (without: media)，著作权归作者所有，禁止商业用途转载。@at-root (without: support)。这个语法的关键词有四个：【转载请注明来源】all（表示所有），【本文首发于唐霜的博客】rule（表示常规css），【本文受版权保护】media（表示media），未经授权，禁止复制转载。support（表示support，因为【版权所有】唐霜 www.tangshuang.net@support目前还无法广泛使用，所以在此不表）。我们【本文受版权保护】【原创内容，转载请注明出处】默认的@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与&配合使用【关注微信公众号：wwwtangshuangnet】

//sass style
//-------------------------------
.child {
  @at-root .parent &{
    color:#f00;
  }
}
//css style
//-------------------------------
.parent .child {
  color: #f00;
}

【原创内容，转载请注明出处】原创内容，盗版必究。原创内容，盗版必究。

//sass style
//-------------------------------
.demo {
  ...
  animation: motion 3s infinite;
  
  @at-root {
    @keyframes motion {
      ...
    }
  }
}
//css style//-------------------------------
   .demo {
    ...
    animation: motion 3s infinite;
}
@keyframes motion {
  ...
}

混合(mixin)【未经授权禁止转载】

转载请注明出处：www.tangshuang.net【本文受版权保护】【本文首发于唐霜的博客】【本文受版权保护】【原创内容，转载请注明出处】

sass中使用【原创不易，请尊重版权】@mixin声明混合，可以传递参数，参数名以$符号开著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net始，多个参数以逗号分开，也可以给参数设置【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】默认值。声明的@mixin通过转载请注明出处：www.tangshuang.net@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原创内容，盗版必究。

未经授权，禁止复制转载。原创内容，盗版必究。【本文受版权保护】本文作者：唐霜，转载请注明出处。

调用时可直接传入值，如【原创内容，转载请注明出处】@include传入参数的个数小于【关注微信公众号：wwwtangshuangnet】@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【原创内容，转载请注明出处】【原创内容，转载请注明出处】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【转载请注明来源】【未经授权禁止转载】【作者：唐霜】

//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：【关注微信公众号：wwwtangshuangnet】@mixin通过转载请注明出处：www.tangshuang.net@include调用后解析出来的样式是以拷贝形式存在的，转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。而下面的继承则是以联合声明的方式存在的，未经授权，禁止复制转载。【本文受版权保护】所以从3.2.0版本以后，建议传递参数的【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】用@mixin，而非传递参数类的使用下面的继承转载请注明出处：www.tangshuang.net%。本文版权归作者所有，未经授权不得转载。

著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net【未经授权禁止转载】未经授权，禁止复制转载。

继承【本文受版权保护】

sass中，选择器继承可以让选择器继承另原创内容，盗版必究。原创内容，盗版必究。一个选择器的所有样式，并联合声明。使用选未经授权，禁止复制转载。【本文首发于唐霜的博客】择器的继承，要使用关键词@extend，后面紧跟需要继承的选择器。转载请注明出处：www.tangshuang.net

【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】

//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 3.2.0以后就可以定义占位【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net选择器%。这种选择器的优势在于：如果不调用则不会【转载请注明来源】原创内容，盗版必究。有任何多余的css文件，避免了以前在一些本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net基础的文件中预定义了很多基础的样式，然后【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】实际应用中不管是否使用了@extend去继承相应的样式，都会解析出来所有的样式著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。。占位选择器以%标识定义，通过未经授权，禁止复制转载。@extend调用。著作权归作者所有，禁止商业用途转载。

【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。

//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和未经授权，禁止复制转载。%clearfix，其中【版权所有】唐霜 www.tangshuang.net%clearfix这个没有调用，所以解析出来的css样式也原创内容，盗版必究。【未经授权禁止转载】就没有clearfix部分。占位选择器的【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】出现，使css文件更加简练可控，没有多余【关注微信公众号：wwwtangshuangnet】【作者：唐霜】。所以可以用其定义一些基础的样式文件，然【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。后根据需要调用产生相应的css。

ps【访问 www.tangshuang.net 获取更多精彩内容】：在本文作者：唐霜，转载请注明出处。@media中暂时不能转载请注明出处：www.tangshuang.net@extend @media外的代码片段，以后将会可以。【原创内容，转载请注明出处】

【本文首发于唐霜的博客】未经授权，禁止复制转载。未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。

函数【作者：唐霜】

转载请注明出处：www.tangshuang.net【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。

sass定义了很多函数可供使用，当然你也【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】可以自己定义函数，以@fuction开始【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。。sass的官方函数链接为：sass fuction本文作者：唐霜，转载请注明出处。，实际项目中我们使用最多的应该是颜色函数转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】，而颜色函数中又以lighten减淡和d原创内容，盗版必究。原创内容，盗版必究。arken加深为最，其调用方法为lighten($color,$amount)和本文版权归作者所有，未经授权不得转载。darken($color,$amount)，它们的第一个参数都是颜色值，第二个参数本文作者：唐霜，转载请注明出处。【作者：唐霜】都是百分比。

【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net

//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;
}

关于本文作者：唐霜，转载请注明出处。@mixin，【原创内容，转载请注明出处】%，著作权归作者所有，禁止商业用途转载。@function更多说明可参阅：【作者：唐霜】

sass揭秘之@mixin，%，@fun【原创不易，请尊重版权】【本文受版权保护】ction

本文版权归作者所有，未经授权不得转载。

【原创不易，请尊重版权】

【关注微信公众号：wwwtangshuangnet】

【本文首发于唐霜的博客】

Sass基础——颜色函数转载请注明出处：www.tangshuang.net

【作者：唐霜】

本文版权归作者所有，未经授权不得转载。

【作者：唐霜】

转载请注明出处：www.tangshuang.net

Sass基础——Sass函数【关注微信公众号：wwwtangshuangnet】

【转载请注明来源】

【关注微信公众号：wwwtangshuangnet】

【本文首发于唐霜的博客】

【转载请注明来源】

运算本文作者：唐霜，转载请注明出处。

【关注微信公众号：wwwtangshuangnet】【本文受版权保护】【访问 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

条件判断及循环未经授权，禁止复制转载。

著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】未经授权，禁止复制转载。

@if判断转载请注明出处：www.tangshuang.net

【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。

@if可一个条件单独使用，也可以和【作者：唐霜】@else结合多条件使用本文版权归作者所有，未经授权不得转载。

【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】

//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; 
}

三目判断本文版权归作者所有，未经授权不得转载。

语法为：【关注微信公众号：wwwtangshuangnet】if($condition, $if_true, $if_false) 。三个参数分别表示：条件，条件为真的值本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】，条件为假的值。

【本文受版权保护】本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】

if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px

for循环转载请注明出处：www.tangshuang.net

著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】未经授权，禁止复制转载。原创内容，盗版必究。

for循环有两种形式，分别为：【关注微信公众号：wwwtangshuangnet】@for $var from <start> through <end>和本文作者：唐霜，转载请注明出处。@for $var from <start> to <end>。$i表示变量，start表示起始值，e【未经授权禁止转载】未经授权，禁止复制转载。nd表示结束值，这两个的区别是关键字th【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】rough表示包括end这个数，而to则【版权所有】唐霜 www.tangshuang.net【本文受版权保护】不包括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循环【作者：唐霜】

【本文首发于唐霜的博客】【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】

语法为：【本文首发于唐霜的博客】@each $var in <list or map>。其中本文版权归作者所有，未经授权不得转载。$var表示变量，而list和map表示list本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net类型数据和map类型数据。sass 3.【转载请注明来源】转载请注明出处：www.tangshuang.net3.0新加入了多字段循环和map数据循环【作者：唐霜】本文作者：唐霜，转载请注明出处。。

著作权归作者所有，禁止商业用途转载。【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】

单个字段list数据循环【转载请注明来源】

//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数据循环【作者：唐霜】

【转载请注明来源】原创内容，盗版必究。原创内容，盗版必究。本文作者：唐霜，转载请注明出处。

//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数据循环【关注微信公众号：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【作者：唐霜】【转载请注明来源】

【版权所有，侵权必究】【原创内容，转载请注明出处】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。【转载请注明来源】【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】【作者：唐霜】【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】【未经授权禁止转载】【作者：唐霜】【本文受版权保护】【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net【作者：唐霜】未经授权，禁止复制转载。【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net【本文受版权保护】【版权所有，侵权必究】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net【本文受版权保护】【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。【未经授权禁止转载】原创内容，盗版必究。【未经授权禁止转载】【作者：唐霜】【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net

如果你觉得本书对你有帮助，通过下方的二维码向我打赏吧，帮助我写出更多有用的内容。

2017-06-01

已有2条评论

rudy 2018-10-26 16:53

可以可以

回复
- 否子戈 2018-10-26 21:23
  
  多支持～
  
  回复