返回：唐霜｜书

sass语法入门

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

前言【未经授权禁止转载】

著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】

【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net

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

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

文件后缀名【关注微信公众号：wwwtangshuangnet】

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

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

//文件后缀名为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转载请注明出处：www.tangshuang.net件。但是如果你在sass文件中导入css转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net文件如@import 'reset.css'，那效果跟普通CSS导入样式文件一样，导【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net入的css文件不会合并到编译后的文件中，【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】而是以@import方式存在。未经授权，禁止复制转载。

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

所有的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样式：【访问 www.tangshuang.net 获取更多精彩内容】

未经授权，禁止复制转载。【本文受版权保护】原创内容，盗版必究。未经授权，禁止复制转载。【转载请注明来源】

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

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

注释【未经授权禁止转载】

【转载请注明来源】转载请注明出处：www.tangshuang.net【未经授权禁止转载】【未经授权禁止转载】

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

标准的css注释【原创不易，请尊重版权】

【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】【原创内容，转载请注明出处】

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

双斜杆单行注释【原创不易，请尊重版权】

单行注释跟JavaScript语言中的注未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。释一样，使用又斜杠（//），但单行注释不会输入到CSS中。本文作者：唐霜，转载请注明出处。

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

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

本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。【本文受版权保护】【作者：唐霜】

sass的变量必须是$开头，后面紧跟变量著作权归作者所有，禁止商业用途转载。【转载请注明来源】名，而变量值和变量名之间就需要使用冒号(【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】:)分隔开（就像CSS属性设置一样），如【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。果值后面加上!default则表示默认值【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。。

【原创不易，请尊重版权】原创内容，盗版必究。【本文首发于唐霜的博客】

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

定义之后可以在全局范围内使用。【原创内容，转载请注明出处】

未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。

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

变量默认值本文版权归作者所有，未经授权不得转载。

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

sass的默认变量一般是用来设置默认值，【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】然后根据需求来覆盖的，覆盖的方式也很简单本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。，只需要在默认变量之前重新声明下变量即可

【本文受版权保护】未经授权，禁止复制转载。【本文受版权保护】【本文首发于唐霜的博客】【未经授权禁止转载】

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

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

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

变量的#{}使用形式【本文受版权保护】

一般我们定义的变量都为属性值，可直接使用原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】，但是如果变量作为属性或在某些特殊情况下原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。等则必须要以#{$variables}形式使用。原创内容，盗版必究。

【转载请注明来源】【关注微信公众号：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;
}

多值变量原创内容，盗版必究。

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

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

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

【作者：唐霜】转载请注明出处：www.tangshuang.net原创内容，盗版必究。

list数据可通过空格，逗号或小括号分隔转载请注明出处：www.tangshuang.net原创内容，盗版必究。多个值，可用nth($var,$index)取值。关于list数据操作还有很多其他函【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】数如length($list)，转载请注明出处：www.tangshuang.netjoin($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);

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

//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数据还有很多其他函数如转载请注明出处：www.tangshuang.netmap-merge($map1,$map2)，本文作者：唐霜，转载请注明出处。map-keys($map)，转载请注明出处：www.tangshuang.netmap-values($map)等，具体可参考【关注微信公众号：wwwtangshuangnet】sass Functions【本文受版权保护】（搜索【访问 www.tangshuang.net 获取更多精彩内容】Map Functions即可）【版权所有，侵权必究】

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

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

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

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

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

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

//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】

在变量值后面加上【原创内容，转载请注明出处】!global即为全局变量。这个目前还用不上，不过将会本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】在sass 3.4后的版本中正式应用。目【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】前的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之后的机制未经授权，禁止复制转载。

请注意，这个目前还无法使用，所以样式不是本文作者：唐霜，转载请注明出处。【转载请注明来源】真实解析出来的。

//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可以看到【版权所有，侵权必究】font-size取值不同，而未经授权，禁止复制转载。color取值相同。与上面的机制对比就会发现默认在【本文首发于唐霜的博客】【转载请注明来源】选择器里面的变量为局部变量，而只有设置了!global之后才会成为全局变量。未经授权，禁止复制转载。
未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net 关于变量的详细分析请查阅【关注微信公众号：wwwtangshuangnet】sass揭秘之变量未经授权，禁止复制转载。

【转载请注明来源】【转载请注明来源】【作者：唐霜】转载请注明出处：www.tangshuang.net

嵌套(Nesting)著作权归作者所有，禁止商业用途转载。

【关注微信公众号：wwwtangshuangnet】【访问 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;
}

属性嵌套【作者：唐霜】

【未经授权禁止转载】【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。

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

sass3.3.0中新增的功能，用来跳出转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】选择器嵌套的。默认所有的嵌套，继承所有上本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】级选择器，但有了这个就可以跳出所有上级选本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。择器。

【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。

普通跳出嵌套【关注微信公众号：wwwtangshuangnet】

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

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

【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】

//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原创内容，盗版必究。始，多个参数以逗号分开，也可以给参数设置著作权归作者所有，禁止商业用途转载。【本文受版权保护】默认值。声明的@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;
}

有参数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 获取更多精彩内容】原创内容，盗版必究。【本文受版权保护】

调用时可直接传入值，如【版权所有，侵权必究】@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

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

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

继承【访问 www.tangshuang.net 获取更多精彩内容】

【原创内容，转载请注明出处】未经授权，禁止复制转载。【本文受版权保护】

sass中，选择器继承可以让选择器继承另【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】一个选择器的所有样式，并联合声明。使用选【转载请注明来源】本文版权归作者所有，未经授权不得转载。择器的继承，要使用关键词@extend，后面紧跟需要继承的选择器。本文作者：唐霜，转载请注明出处。

本文版权归作者所有，未经授权不得转载。转载请注明出处：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以后就可以定义占位【未经授权禁止转载】未经授权，禁止复制转载。选择器%。这种选择器的优势在于：如果不调用则不会【作者：唐霜】未经授权，禁止复制转载。有任何多余的css文件，避免了以前在一些【原创内容，转载请注明出处】【原创不易，请尊重版权】基础的文件中预定义了很多基础的样式，然后【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】实际应用中不管是否使用了@extend去继承相应的样式，都会解析出来所有的样式【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net。占位选择器以%标识定义，通过【关注微信公众号：wwwtangshuangnet】@extend调用。【版权所有】唐霜 www.tangshuang.net

【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net【作者：唐霜】

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

如上代码，定义了两个占位选择器转载请注明出处：www.tangshuang.net%ir和本文作者：唐霜，转载请注明出处。%clearfix，其中【访问 www.tangshuang.net 获取更多精彩内容】%clearfix这个没有调用，所以解析出来的css样式也【版权所有，侵权必究】【未经授权禁止转载】就没有clearfix部分。占位选择器的著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】出现，使css文件更加简练可控，没有多余【本文受版权保护】本文版权归作者所有，未经授权不得转载。。所以可以用其定义一些基础的样式文件，然【作者：唐霜】【本文受版权保护】后根据需要调用产生相应的css。

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

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

【作者：唐霜】著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。

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

【转载请注明来源】【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net【访问 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;
}

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

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

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

Sass基础——颜色函数未经授权，禁止复制转载。

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

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

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

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

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

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

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

【本文首发于唐霜的博客】【访问 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判断【本文首发于唐霜的博客】

【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net

@if可一个条件单独使用，也可以和转载请注明出处：www.tangshuang.net@else结合多条件使用未经授权，禁止复制转载。

【作者：唐霜】【原创不易，请尊重版权】【访问 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原创内容，盗版必究。

语法为：转载请注明出处：www.tangshuang.netif($condition, $if_true, $if_false) 。三个参数分别表示：条件，条件为真的值【原创不易，请尊重版权】【原创内容，转载请注明出处】，条件为假的值。

【转载请注明来源】本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】

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

for循环【关注微信公众号：wwwtangshuangnet】

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

for循环有两种形式，分别为：【原创不易，请尊重版权】@for $var from <start> through <end>和【本文首发于唐霜的博客】@for $var from <start> to <end>。$i表示变量，start表示起始值，e【原创不易，请尊重版权】【本文受版权保护】nd表示结束值，这两个的区别是关键字th原创内容，盗版必究。转载请注明出处：www.tangshuang.netrough表示包括end这个数，而to则【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net不包括end这个数。

【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。【本文受版权保护】【关注微信公众号：wwwtangshuangnet】【本文受版权保护】

//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 $var in <list or map>。其中【原创内容，转载请注明出处】$var表示变量，而list和map表示list【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。类型数据和map类型数据。sass 3.著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】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数据循环【访问 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数据循环【本文受版权保护】

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

//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【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.neth

原创内容，盗版必究。【本文首发于唐霜的博客】【关注微信公众号：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著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net【作者：唐霜】【本文首发于唐霜的博客】【本文受版权保护】未经授权，禁止复制转载。【本文受版权保护】原创内容，盗版必究。【未经授权禁止转载】【本文受版权保护】【本文受版权保护】

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

2017-06-01

已有2条评论

rudy 2018-10-26 16:53

可以可以

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