Sass的常用语法

在学习阮一峰的SASS用法指南和网上一些视频，总结sass常用语法

基本用法

首先要下载Ruby语言（略）

1. 将scss生成css文件，在命令行输入

//直接生成压缩后的css文件
sass --style compressed new.scss new.min.css

//监视某个文件下的scss改变就会直接生成css
sass --watch new.scss:new.css

sass --watch new.scss:new.css --style compressed//compressed压缩版本

变量

1. 生成变量并且赋值，和less的差别是这个使用$符定义变量

$blue: #1875e7;
body {
    color: $blue;
}

$blue-sa: #1875e7;
body {
    color: $blue_sa;//获取变量的连接符可以是-或者_是一样的
    div {//支持变量的嵌套和less运用差不多
        margin: 0;
        padding: 0;
    }
}

2. 允许变量拼接和使用算式

$side : left;//允许变量拼接

.rounded {
    border-#{$side}-radius: 5px;
}

//允许变量使用算式
body {
    margin: (14px/2);
    top: 50px + 100px;
    right: $var * 10%;
}

//选择器，less也可以
.rounded {
    border-#{$side}-radius: 5px;
    & &-a {
        background: #000;
    }
}
//生成下面的，两个等价
.aa .aa-a{background:#000}

3. 多个同样前缀的属性可嵌套，less不行

//注释内容是原先的，scss简化后是下面的
.aa {
    /* font-size: 1px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700; */
    font: {
        size: 1px;
        family: Arial, "Helvetica Neue", Helvetica, sans-serif;
        weight: 700;
    }
    margin: 0;
}
.aa {
    /* border: 1px solid #1875e7;
    border-left: 1px;
    border-right: 1px; */
    border: 1px solid #1875e7 {
        right: 0;
        left: 0;
    }
}

@mixin函数

@mixin函数，定义公共调用的样式

/*@mixin函数*/
@mixin alert{
    ...
    a{
        ..
    }/*调用时相当于 .xxx a{}*/
}

.aa{
    @include alert;/*调用*/
}

/*定义参数,指定默认值*/
@mixin alert($color:0px, $text) {
    color: $color;
    font-size: $text;
    a {
        margin: 0;
    } /*调用时相当于 .xxx a{}*/
}

.aa {
    @include alert($text: '14px', $color: '#1875e7'); 
    /*调用时可以换顺序，会根据传递的值来赋值，但是记得写参数名*/
}

自定义函数

$color:(light:#fff, dark:#000);/*定义一个map值*/

@function double($key) {
    @return map-get($color, $key);
}
.b {
    background: double(light);/*=> background:#fff,调用函数*/
}


@function double($n) {
    @return $n * 2;
}

#sidebar {
    width: double(5px);
}

常用list列表函数

padding: 0 20px 10px 30px;/*这样的内容就是list*/

/*list函数*/
join($list1, $list2, [$separator]);/*：将两个列给连接在一起，变成一个列表；*/
append($list1, $val, [$separator]);/*：将某个值放在列表的最后；*/

继承@extend

/*
	继承 @extend
*/
.a {
    padding: 0;
    a {
        font-size: 0;
    }
}

.b {
    @extend .a;
    margin: 0;
}
//继承选择器,会把父类选择器的后代标签属性也继承给自身的后代标签
.a,.b{padding:0}.a a,.b a{font-size:0}.b{margin:0}

注释

1. 多行注释，压缩版本会没有//
2. 单行注释，编译后不会有 /**/
3. 强制注释，会存在，一般用于版权等，/*! */

参考阮一峰的网络日志的SASS用法指南，记录了一些自己觉得常用的语法，有错误的话欢迎指出