返回：唐霜｜书

sass语法入门

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

前言【作者：唐霜】

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

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

【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】

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

文件后缀名【原创不易，请尊重版权】

sass有两种后缀名文件：一种后缀名为s本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netass，不使用大括号和分号；另一种就是我【转载请注明来源】【未经授权禁止转载】们这里使用的scss文件，这种和我们平时【转载请注明来源】原创内容，盗版必究。写的css文件格式差不多，使用大括号和分本文版权归作者所有，未经授权不得转载。【转载请注明来源】号。而本教程中所说的所有sass文件都指【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net后缀名为scss的文件。在此也建议使用后【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】缀名为scss的文件，以避免sass后缀【关注微信公众号：wwwtangshuangnet】【访问 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文【版权所有】唐霜 www.tangshuang.net【转载请注明来源】件。但是如果你在sass文件中导入css【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。文件如@import 'reset.css'，那效果跟普通CSS导入样式文件一样，导【版权所有，侵权必究】【原创不易，请尊重版权】入的css文件不会合并到编译后的文件中，【转载请注明来源】【转载请注明来源】而是以@import方式存在。本文版权归作者所有，未经授权不得转载。

原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】

【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。【未经授权禁止转载】

被导入sass文件a.scss：转载请注明出处：www.tangshuang.net

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

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

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

转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。

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

转译出来的b.css样式：【原创内容，转载请注明出处】

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

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

根据上面的代码可以看出，b.scss编译【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】后，reset.css继续保持impor未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】t的方式，而a.scss则被整合进来了。

注释未经授权，禁止复制转载。

本文作者：唐霜，转载请注明出处。原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。

标准的css注释本文版权归作者所有，未经授权不得转载。

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

双斜杆单行注释转载请注明出处：www.tangshuang.net

【转载请注明来源】转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net【本文受版权保护】

单行注释跟JavaScript语言中的注【未经授权禁止转载】【本文受版权保护】释一样，使用又斜杠（//），但单行注释不会输入到CSS中。未经授权，禁止复制转载。

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

变量【关注微信公众号：wwwtangshuangnet】

【关注微信公众号：wwwtangshuangnet】【本文受版权保护】【作者：唐霜】

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

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

定义之后可以在全局范围内使用。【未经授权禁止转载】

【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。【本文首发于唐霜的博客】【作者：唐霜】

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

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

未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。

sass的默认变量仅需要在值后面加上转载请注明出处：www.tangshuang.net!default即可。著作权归作者所有，禁止商业用途转载。

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

【原创不易，请尊重版权】【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】

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

可以看出现在编译后的未经授权，禁止复制转载。line-height为2，而不是我们默认的1.5。默认变量的本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】价值在进行组件化开发的时候会非常有用。

变量的#{}使用形式本文版权归作者所有，未经授权不得转载。

一般我们定义的变量都为属性值，可直接使用【作者：唐霜】本文版权归作者所有，未经授权不得转载。，但是如果变量作为属性或在某些特殊情况下【原创内容，转载请注明出处】【作者：唐霜】等则必须要以#{$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;
}

多值变量转载请注明出处：www.tangshuang.net

list【版权所有】唐霜 www.tangshuang.net

【原创不易，请尊重版权】【本文受版权保护】【作者：唐霜】原创内容，盗版必究。【作者：唐霜】

list数据可通过空格，逗号或小括号分隔【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net多个值，可用nth($var,$index)取值。关于list数据操作还有很多其他函【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】数如length($list)，本文作者：唐霜，转载请注明出处。join($list1,$list2,[$separator])，转载请注明出处：www.tangshuang.netappend($list,$value,[$separator])等，具体可参考转载请注明出处：www.tangshuang.netsass Functions原创内容，盗版必究。（搜索本文作者：唐霜，转载请注明出处。List Functions即可）本文版权归作者所有，未经授权不得转载。

未经授权，禁止复制转载。【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】

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

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

//一维数据
$px: 5px 10px 20px 30px;
//二维数据，相当于js中的二维数组
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);

使用【版权所有】唐霜 www.tangshuang.net

【关注微信公众号：wwwtangshuangnet】【本文受版权保护】【未经授权禁止转载】转载请注明出处：www.tangshuang.net【访问 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【本文首发于唐霜的博客】

map数据以key和value成对出现，【未经授权禁止转载】转载请注明出处：www.tangshuang.net其中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【关注微信公众号：wwwtangshuangnet】（搜索未经授权，禁止复制转载。Map Functions即可）本文版权归作者所有，未经授权不得转载。

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

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

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

全局变量【关注微信公众号：wwwtangshuangnet】

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

在变量值后面加上转载请注明出处：www.tangshuang.net!global即为全局变量。这个目前还用不上，不过将会本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。在sass 3.4后的版本中正式应用。目【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net前的sass变量范围饱受诟病，所以才有了【转载请注明来源】转载请注明出处：www.tangshuang.net这个全局变量。

【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。【转载请注明来源】

目前变量机制【转载请注明来源】

【本文首发于唐霜的博客】【未经授权禁止转载】未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】

//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之后的机制【关注微信公众号：wwwtangshuangnet】

【转载请注明来源】著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】

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

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

原创内容，盗版必究。【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。

嵌套(Nesting)转载请注明出处：www.tangshuang.net

本文作者：唐霜，转载请注明出处。【作者：唐霜】转载请注明出处：www.tangshuang.net

【本文受版权保护】本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。【作者：唐霜】转载请注明出处：www.tangshuang.net

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

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

所谓选择器嵌套指的是在一个选择器中嵌套另转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。一个选择器来实现继承，从而增强了sass【作者：唐霜】转载请注明出处：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;
}

属性嵌套【版权所有】唐霜 www.tangshuang.net

著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】

所谓属性嵌套指的是有些属性拥有同一个开始转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。单词，如border-width，bor原创内容，盗版必究。转载请注明出处：www.tangshuang.netder-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【本文受版权保护】

本文版权归作者所有，未经授权不得转载。【本文受版权保护】【访问 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原创内容，盗版必究。【本文首发于唐霜的博客】h

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

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

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

应用于@keyframe【本文受版权保护】

//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通过未经授权，禁止复制转载。@include来调用。【访问 www.tangshuang.net 获取更多精彩内容】

原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。【转载请注明来源】

无参数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 获取更多精彩内容】未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】

调用时可直接传入值，如【访问 www.tangshuang.net 获取更多精彩内容】@include传入参数的个数小于转载请注明出处：www.tangshuang.net@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【本文受版权保护】

如果一个参数可以有多组值，如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本文作者：唐霜，转载请注明出处。

【原创不易，请尊重版权】【本文受版权保护】本文版权归作者所有，未经授权不得转载。

@content在sass3.2.0中引入，可以用来解决【本文首发于唐霜的博客】【原创内容，转载请注明出处】css3的@media等带来的问题。它可【作者：唐霜】【本文受版权保护】以使@mixin接受一整块样式，接受的样式从@conte【原创不易，请尊重版权】【作者：唐霜】nt开始。

【访问 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：【转载请注明来源】@mixin通过【未经授权禁止转载】@include调用后解析出来的样式是以拷贝形式存在的，【未经授权禁止转载】【版权所有，侵权必究】而下面的继承则是以联合声明的方式存在的，【本文受版权保护】著作权归作者所有，禁止商业用途转载。所以从3.2.0版本以后，建议传递参数的【转载请注明来源】【版权所有，侵权必究】用@mixin，而非传递参数类的使用下面的继承【原创内容，转载请注明出处】%。【本文首发于唐霜的博客】

继承【转载请注明来源】

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

sass中，选择器继承可以让选择器继承另未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】一个选择器的所有样式，并联合声明。使用选未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。择器的继承，要使用关键词@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以后就可以定义占位原创内容，盗版必究。本文作者：唐霜，转载请注明出处。选择器%。这种选择器的优势在于：如果不调用则不会本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】有任何多余的css文件，避免了以前在一些【转载请注明来源】【原创不易，请尊重版权】基础的文件中预定义了很多基础的样式，然后【版权所有，侵权必究】【本文首发于唐霜的博客】实际应用中不管是否使用了@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;
}

如上代码，定义了两个占位选择器【关注微信公众号：wwwtangshuangnet】%ir和【未经授权禁止转载】%clearfix，其中未经授权，禁止复制转载。%clearfix这个没有调用，所以解析出来的css样式也本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】就没有clearfix部分。占位选择器的本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。出现，使css文件更加简练可控，没有多余本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】。所以可以用其定义一些基础的样式文件，然转载请注明出处：www.tangshuang.net【作者：唐霜】后根据需要调用产生相应的css。

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

函数【作者：唐霜】

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

【未经授权禁止转载】转载请注明出处：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;
}

关于转载请注明出处：www.tangshuang.net@mixin，【转载请注明来源】%，【关注微信公众号：wwwtangshuangnet】@function更多说明可参阅：本文版权归作者所有，未经授权不得转载。

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

sass揭秘之@mixin，%，@fun本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】ction

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

原创内容，盗版必究。

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

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

Sass基础——颜色函数【转载请注明来源】

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

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

Sass基础——Sass函数原创内容，盗版必究。

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

【转载请注明来源】

运算【未经授权禁止转载】

sass具有运算的特性，可以对数值型的V原创内容，盗版必究。【原创不易，请尊重版权】alue(如：数字、颜色、变量等)进行加【未经授权禁止转载】【转载请注明来源】减乘除四则运算。请注意运算符前后请留一个本文作者：唐霜，转载请注明出处。原创内容，盗版必究。空格，不然会出错。

$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

条件判断及循环【作者：唐霜】

@if判断【原创不易，请尊重版权】

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

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

//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.net本文作者：唐霜，转载请注明出处。

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

for循环【本文受版权保护】

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

for循环有两种形式，分别为：【原创内容，转载请注明出处】@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; 
}

本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】

语法为：著作权归作者所有，禁止商业用途转载。@each $var in <list or map>。其中【访问 www.tangshuang.net 获取更多精彩内容】$var表示变量，而list和map表示list【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。类型数据和map类型数据。sass 3.转载请注明出处：www.tangshuang.net【版权所有，侵权必究】3.0新加入了多字段循环和map数据循环【原创内容，转载请注明出处】未经授权，禁止复制转载。。

单个字段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数据循环【未经授权禁止转载】

//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.netsass揭秘之@if，@for，@eac著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】h

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

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

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

2017-06-01

已有2条评论

rudy 2018-10-26 16:53

可以可以

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