介绍

这是一篇对于sass的语法大全,欢送拜访我的博客

语法

变量

$color: #fff;/* 默认变量: */$color: #fff !default;$baseLineHeight: 2;$baseLineHeight: 1.5 !default;body{    line-height: $baseLineHeight;}

嵌套

    nav {        a {            color: red;            header & {                color:green;            }        }    }    // 编译后的css代码：    nav a {        color: red;    }    header nav a {        color: green;    }

属性嵌套

    .box {        border: {            top: 1px solid red;            bottom: 1px solid green;        }    }    编译后的css代码：    .box {        border-top: 1px solid red;        border-bottom: 1px solid green;    }

申明混合宏（复用的公共款式）

@mixin border-radius($radius: 5px){    -webkit-border-radius: $radius;    border-radius: $radius;}@mixin box-shadow($shadow...) {    /* @if @else 用法 */    @if length($shadow) >= 1 {        @include prefixer(box-shaow, $shadow);    } @else {        $shadow: 0 0 4px rgba(0, 0, 0, .3)        @include prefixer(box-shaow, $shadow);    }}

调用混合宏

button {    @include border-radius(3px);}

扩大和继承

.btn {    border: 1px solid #ccc;    padding: 6px 10px;    font-size: 14px;}.btn-primary {    background-color: #f36;    color: #fff;    @extend .btn;}

[sass]占位符%

编译进去的代码会将雷同的代码合并在一起

%mt5{    margin-top: 5px;}.btn {  @extend %mt5;}.block {  @extend %mt5;}//   编译后的css代码：.btn, .block {    margin-top: 5px;}

其余(插值: #{}, 逻辑运算: 加减乘除)

$col-width: 60px;$col-gap: 20px;/* for循环*@for $i from <start> through <end>*@for $i from <start> to <end>*through 示意包含 end 这个数，而 to 则不包含 end 这个数。*/@for $i from 1 through 12 {    .col-#{$i}{        width: ($col-width + $col-gap) * $i;    }}/*列表 用()示意一组列表*/$properties: (margin, padding);@mixin set-value($side, $value) {    /* each 遍历列表 */    @each $prop in $properties {        #{$prop}-#{$side}: $value;    }}.login-box {    @include set-value(top, 14px);}@mixin e($element, $content) {    background: 'yellow';    &__#{$element} {        color: 'black';        @each $k, $v in $content {            #{$k}: $v        }    }}@include e('content', ('display': flex, 'height': 100))/* while */$types: 4;$type-width: 20px;@while $types > 0 {    .while-#{$types} {        width: $type-width + $types;    }    $types: $types - 1;}/*色彩能够相加*/p{    color: #010203 + #040506 /* #050709; */}/*函数*/@function widthFn($n) {  @return $n * $twoWidth + ($n - 1) * $oneWidth;}/* 非凡函数* unquote($string) 删除字符串中的引号* quote($string) 给字符串增加引号* to-upper-case() 字符串小写字母转换成大写字母* to-lower-case() 字符串大写字母转换成小写字母* percentage() 将一个不带单位的数字转换成百分比模式* round() 函数能够将一个数四舍五入为一个最靠近的整数* ceil() 函数将一个数转换成最靠近于本人的整数* floor() 函数刚好与 ceil() 函数性能相同，其次要将一个数去除其小数局部* abs() 函数会返回一个数的绝对值* min()函数性能次要是在多个数之中找到最小的一个 min(1px,2,3px)* random() 获取一个随机数*//*列表函数* nth($list,$n) 用来指定列表中某个地位的值* join() 函数是将两个列表连贯合并成一个列表 join (10px) (20px)* length() 计算列表长度* append() 用来将某个值插入到列表中，并且处于最末位* index() 你找到某个值在列表中所处的地位 index(solid red, red)*/