Sass基础

创建: 2018/09/30

完成: 2018/09/30

更新: 2019/04/14 增加中文网地址

更新: 2019/06/05 增加@import 文件名方面的说明

文档: https://sass-lang.com/documentation/

　　  https://www.sasscss.com/

 参数

 参数以$开头

// .scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
    font: 100% $font-stack;
    color: $primary-color;
}

相当于CSS的

// .css
body {
    font: 100% Helvetica, sans-serif;
    color: #333;
}

 

 阶层构造

 子元素可以直接嵌套着来进行设计

// .scss
nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    li {
        display: inline-block;
    }
    a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
    }
}

相当于

// .css
nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
nav li {
    display: inline-block;
}
nav a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
}

 

 部分模板

类似rails的部分模板，把一部分共用的单独分出一个文件
命名规则	_开头 例： _sample.scss  ● 加_和不加_的区别  加_则导入时保持sass, 不编译  若同时存在, 则优先不加_的
读取部分模板	@import 文件 @import "sample" // 可以省略_和文件后缀

 

 @mixin

 一次性设置很多值，还可以带参数

设置	用@mixin // .scss @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); }
读取	@include
@content	获取代码块内容替代@content

 

 继承

 

@extend 元素名	@extend .sample
例	.sample { ... } .sample--active { @extend .sample color: $my-color; }

 

 运算

 传送门