sass语法-CSDN博客

前言

最近在学习postcss，发现书里面很多用到了sass的语法。之前没接触过sass，所以专门看了一下sass，并做了个总结

sass文件后缀名

sass有两种后缀文件：一种后缀名sass，不使用大括号和分号；另一种是scss，和我们平时写的css文件格式差不多，使用大括号和分号

变量

普通变量

定义后可以在全局范围内使用

$fontSize: 12px;
body{ font-size:$fontSize; }
复制代码

默认变量

sass默认变量只需要在值后面加上!default即可。

$baseLineHeight: 1.5 !default;
body{ line-height: $baseLineHeight; }
复制代码

sass的默认变量一般是用来设置默认值，然后根据需求覆盖，覆盖的方式只需在默认变量之前重新声明变量即可。

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

//css style
body{ line-height: 2; }

复制代码

可以看出编译后line-height为2，而不是1.5.默认变量的价值在于进行组件化开发。

特殊变量

一般我们定义的变量都为属性值，可直接使用；但是如果变量作为属性或在某些特殊情况下必须要用 #{$variables} 形式使用。

$borderDirection: top !default;
$baseFontSize: 12px !default;
$baseLineHeight: 1.5 !default;

//应用于class和属性 
.border-#{$borderDirection}{ border-#{$borderDirection}: 1px solid #666; }

//应用于复杂的属性值
body{ font:#{$baseFontSize}/#{$baseLineHeight}; }
复制代码

多值变量

多值变量分为list类型（类似js的数组）和map类型（类似js的对象）。

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;

// 二维数据
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);
复制代码

使用

// sass
$linkColor: #08c #333 !default;//第一个值为默认值，第二个鼠标滑过的值
a{
    color:nth($linkColor,1);
    
    &:hover{
        color:nth($linkColor,2);
    }
}

// css
a{ color:#08c; }
a:hover{ color:#333; }
复制代码

map

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即可）。

定义

$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);
复制代码

使用

// sass
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings{
    #{$header}{
        font-size: $size;
    }
}

//css
h1{ font-size: 2em; }
h2{ font-size: 1.5em; }
h3{ font-size: 1.2em; }
复制代码

全局变量

在变量值后面加上!global即为全局变量。这个目前还用不上，不过将会在sass 3.4后的版本中正式应用。目前的sass变量范围饱受诟病，所以才有了这个全局变量。

目前变量机制

在选择器中声明的变量会覆盖外面全局声明的变量。(这也就人们常说的sass没有局部变量)

// sass
$fontSize: 12px;
body{ 
    $fontSize: 14px;
    font-size:$fontSize;
}
p{ font-size:$fontSize; }

// css
body{ font-size: 14px; }
p{ font-size: 14px; }
复制代码

启用global后机制

注意，这个目前还无法使用，所以样式不是真是解析出来的。

// sass
$fontSize: 12px;
$color: #333;
body{
    $fontSize: 14px;
    $color: #fff !global;
    font-size:$fontSize;
    color:$color;
}
p{ 
    font-size:$fontSize;
    color:$color;
}

// css
body{ 
    font-size: 14px;
    color:#fff;
}
p{
    font-size: 12px;
    color:#fff;
}
复制代码

这里设置了两个值，只有设置了!global才会成为全局变量

嵌套（Nesting）

sass的嵌套包括两种：一是选择器的嵌套；二是属性嵌套。我们一般说起或用到的都是选择器的嵌套。

选择器嵌套

选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强了sass文件的结构性和可读性。

在选择器嵌套中，可以使用 & 表示父元素选择器

// sass
#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
#top_nav{
    line-height: 40px;
    text-transform: capitalize;
    background-color: #333;
}
#top_nav li{ float: left; }
#top_nav a{
    display: block;
    padding: 0 10px;
    color:#fff;
}
#top_nav a:hover{ color:#ddd; }
复制代码

属性嵌套

所谓属性嵌套指的是有些属性拥有同一个开始的单词，如border-width、border-color都是以border开头。

// sass
.fakeshadow{
    border:{
        style: solid;
        left:{
            width: 4px;
            color: #888;
        }
        right:{
            width: 2px;
            color: #ccc;
        }
    }
}

// css
.fakeshadow{
    border-style: solid;
    border-left-width: 4px;
    border-left-color: #888;
    border-right-width: 2px;
    border-right-color: #ccc;
}
复制代码

这只是一个属性嵌套的例子，如果实际这样使用，估计会疯掉！！！

跳出选择器嵌套（@at-root）

sass3.3.0中新增的功能，用来跳出选择器嵌套。默认所有的嵌套继承所有上级选择器，但有了这个就可以跳出所有上级选择器。

普通跳出嵌套

// sass
// 没有跳出
.parent-1{
    color:#fff;
    .child{ width: 100px; }
}
// 单个选择器跳出
.parent-2{
    color:#fff;
    @at-root .child{ width: 200px; }
}
// 多个选择器跳出
.parent-3{
    background: #fff;
    @at-root{
        .child1{ width: 300px; }
        .child2{ width: 400px; }
    }
}

// css
.parent-1{ color:#fff; }
.parent-1 .child{ width: 100px; }
.parent-2{ color:#fff; }
.child{ width: 200px; }
.parent-3{ background: #fff; }
.child1{ width: 300px; }
.child2{ width: 400px; }
复制代码

@at-root(without:...) 和 @at-root(with:...)

默认 @at-root 只会跳出选择器嵌套，而不能跳出 @media 或 @support ，如果要跳出这两种，则需要使用@at-root(without:media)和@at-root(without:support)。

这语法有四个关键词：

all（所有）
rule（常规css）
media（media）
support（表示support，因为@support目前还无法广泛使用，所以在此不表）。

默认的 @at-root 就是 @at-root(without:rule) 。

// sass
// 跳出父级元素嵌套
@media print{
    .parent1{
        color:#fff;
        @at-root .child1{ width: 200px; }
    }
}
// 跳出media嵌套，父级有效
@media print{
    .parent2{
        color:#fff;
        @at-root (without: media){
            .child2{ width: 200px; }
        }
    }
}
// 跳出media和父级元素嵌套
@media print{
    .parent3{
        color:#fff;
        @at-root (without: all){
            .child3{ width: 200px; }
        }
    }
}

// css
@media print{
    .parent1{ color:#fff; }
    .child1{ width: 200px; }
}
@media print{
    .parent2{ color:#fff; }
}
.parent2 .child2{ width: 200px; }
@media print{
    .parent3{ color:#fff; }
}
.child3{ width: 200px; }
复制代码

@at-root 与 & 配合使用

// sass
.child{
    @at-root .parent &{ color:#fff; }
}
// css
.parent .child{ color:#fff; }
复制代码

@keyframe

// sass
.demo{
    animation: motion 3s infinite;
    
    @at-root{
        @keyframes motion{
            ...
        }
    }
}
// css
.demo{
    animation: motion 3s infinite;
}
@keyframes motion{
    ...
}
复制代码

混合（mixin）

sass中使用 @mixin 声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。生命的 @mixin 通过 @include 来调用。

无参数mixin

// sass
@mixin center-block{
    margin-left: auto;
    margin-right: auto;
}
.demo{ @include center-block; }

// css
.demo{
    margin-left: auto;
    margin-right: auto;
}
复制代码

有参数mixin

// sass
@mixin opacity($opacity:50){
    opacity: $opacity / 100 ;
    filter: alpha(opacity = $opacity );
}
.opacity{
	@include opacity;
}
.opacity-80{
	@include opacity(80);
}

// css
.opacity{
    opacity:.5;
    filter:alpha(opacity=50)
}
.opacity-80{
    opacity:.8;
    filter:alpha(opacity=80)
}
复制代码

多个参数mixin

调用时直接传入值，如 @include 传入参数的个数小于 @mixin 定义参数的个数。按照顺序表示，后面不足的使用默认值，如不足又没有默认值则报错。除此之外还可以选择性的传入参数，使用参数名与值同时传入。

// sass
@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
.imgtext-h li{
    border-bottom:1px solid #ccc;
    padding-top:10px;
    padding-bottom:10px;
}
.imgtext-h-product li{
    border-bottom:1px dashed #ccc;
    padding-top:15px;
    padding-bottom:15px;
}
复制代码

多组值参数mixin

如果一个参数可以有多组值，如box-shadow、transition等，那么参数则需要在变量后加三个点表示，如 $variables... 。

// sass
// 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 rbga(0,0,0,.3));
}

// css
.box{
    border:1px solid #ccc;
    -webkit-box-shadow:0 2px 2px rgba(0,0,0,0.3),
                       0 3px 3px rgba(0,0,0,0.3),
                       0 4px 4px rbga(0, 0, 0, 0.3);
    box-shadow:0 2px 2px rgba(0,0,0,0.3),
               0 3px 3px rgba(0,0,0,0.3),
               0 4px 4px rbga(0, 0, 0, 0.3)
}
复制代码

@content

@content 在sass3.2.0中引入，用来解决css3的@media等带来的问题，他可以使 @mixin 接受一整块样式，接受的样式从 @content开始。

// sass
@mixin max-screen($res){
    @media only screen and (max-width: $res){
        @content;
    }
}
@include max-screen(480px){
    body{
        color: #fff;
        background: #000;
    }
}

// css
@media only screen and (max-width: 480px){
    body{
        color:#fff;
        background:#000;
    }
}
复制代码

注： @mixin 通过 @include 调用后解析出来的样式是拷贝形式存在的，而下面继承是以联合声明形式存在。所以在3.2.0以后建议，传递参数用 @mixin ，而非传递参数类的使用下面的继承。

继承

sass中选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器继承要用关键词 @extend ，后面紧跟需要继承的选择器。

// sass
h1{ border: 4px solid #ddd; }
.speaker{ 
    @extend h1;
    border-width: 2px;
}

// css
h1,.speaker{ border:4px solid #ddd }
.speaker{ border-width:2px }
复制代码

占位选择器 %

从sass 3.2.0以后就可以定义占位选择器 % 。这种选择器的优势在于：如果不调用就不会有多余的css文件，避免以前在一些基础文件中预定义了很多基础的样式，然后实际应用中不挂是否使用了 @extend 去继承相应样式，都会解析出所有的样式。占位选择器以 % 标识定义，通过 @extend 调用。

// sass
$lte7: true;
%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
.ir{
    color:transparent;
    text-shadow:none;
    background-color:transparent;
    border:0
}
#header h1{width:300px}
复制代码

以上代码，定义了两个占位选择器 %ir 和 %clearfix ,其中 %clearfix 这个没有调用，所以也就没有clearfix部分。

占位选择器的出现，使css文件更加简练可控，没有多余。

注：在 @media 中暂时不能 @extend @media 外的代码片段，以后将会可以。

函数

sass定义了很多函数可供使用，当然也可以自己定义函数，以 @function 开始。sass的官方函数链接：sass function，实际中我们使用最多的应该是颜色函数，而颜色函数中以lighten减淡和darken加深为最，其调用方法为 lighten( color, amount) 和 darken( color, amount)，他们的第一个参数都是颜色值，第二个参数都是百分比。

// sass
$baseFontSize: 10px !default;
$gray: #ccc !default;

//将 px 转为 rem
@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
body{
    font-size:10px;
    color:#e6e6e6
}
.test{
    font-size:1.6rem;
    color:#b3b3b3
}
复制代码

关于 @mixin 、 % 和 @function 更多说明可参阅：

运算

sass具有运算的特性，可以对数值型的值（如：数字、颜色和变量等）进行加减乘除四则运算。请注意运算符前后请留一个空格，不然会出错。

// sass
$baseFontSize: 14px !default;
$baseLineHeight: 1.5 !default;
$baseGap: $baseFontSize * $baseLineHeight !default;
$halfBaseGap: $baseGap / 2 !default;
$smallFontSize: $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

.test1{
    font-size: $baseGap;
    width: $_gridsystem-width;
}

// css
.test1{font-size:21px;width:960px}
复制代码

条件判断及循环

@if判断

@if 可一个条件单独使用，也可以和 @else 结合多条件使用。

// sass
$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
.ib{
    display:inline-block;
    *display:inline;
    *zoom:1
}
p{ color:green }
复制代码

三目判断

语法为： if( condition, if_true, $if_false)。三个参数分别表示：条件、条件为真的值和条件为假的值。

// sass
p{
    color: if(true,#000,#fff) ;
}
p span{
    color: if(false,#000,#fff) ;
}

// css
p{color:#000}
p span{color:#fff}
复制代码

for循环

for循环有两种形式，

@for $var from through
@for $var from to

$var 表示变量；start 表示起始值；end 表示结束值，这两个区别是关键字through表示包括end的这个数，而to则表示不包括end的数。

// sass
@for $i from 1 through 3{
    .item-#{$i} { width: 2em * $i; }
}

// css
.item-1{width:2em}
.item-2{width:4em}
.item-3{width:6em}
复制代码

@each循环

语法为： @each var in < list or map >。其中 var 表示变量；而list和map表示list类型数据和map类型数据。sass 3.3.0新加入了多字段循环和map数据循环。

单个字段list数据循环

// sass
$animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list{
    .#{$animal}-icon{
        background-image: url("../images/#{$animal}.png");
    }
}

// css
.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
$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
.puma-icon{
    background-image:url("/images/puma.png");
    border:2px solid #000;
    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 #fff;
    cursor:move
}
复制代码

多个字段map数据循环

// sass
$heading:(h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $heading{
    #{$header} { font-size: $size; }
}
// css
h1{font-size:2em}
h2{font-size:1.5em}
h3{font-size:1.2em}
复制代码

关于循环判断详细分析请查阅：sass揭秘之@if，@for，@each