Sass 快速入门教程

@import

若不想将scss编译成css文件，在scss文件名前面加上下划线_。

使用CSS @import指令
默认情况下@import在当前目录下需找scss文件加载，若想使用原生css的import指令可以使用下面四个规则：

1. 当@import后面跟上的文件名是以.css结尾的时候；

2. 当@import后面跟的是http://开头的字符串的时候；

3. 当@import后面跟的是一个url()函数的时候；

4. 当@import后面带有media queries的时候。

使用@import导入文件
使用@import导入下划线开头文件不需要添加下划线，compass会自动为文件名添加下划线导入。

父类选择器

a {
&:hover {
color: blue;
}
}
其中&符号表示连接父类，最终生成代码：

a:hover {
color: blue;
}

属性嵌套

.main-sec {
font-family: $main-sec-ff;

.headline {    font: {        family: $main-sec-ff;        size: 16px;    }}

}

变量

定义

$color-withe: # FFFFFF;
以$符号开头后面跟上字符串作为变量名，后跟上冒号:和变量值，冒号是分分隔符，分割变量名和变量值。
使用

.main {
background: $color-withe;
}
直接使用变量名引用即使用变量值。

函数

内置函数

称为functions

可重用代码块

minxin

使用时以复制拷贝存在，通过@include方式调用；

定义

@mixin col-6 {
width: 50%;
float: left;
}

// 使用
.webdemo-sec {
@include col-6;

&:hover {    background: $color-FFF;}

}
生成的代码：

.webdemo-sec {
width: 50%;
float: left;
}
.webdemo-sec:hover {
background: $color-FFF;
}
带参数函数

@mixin col ($width) {
width: $width;
float: left;
}
// 使用
.webdemo-sec {
@include col(30%);
}
带默认参数

@mixin col ($width: 50%) {
width: $width;
float: left;
}
// 使用
.webdemo-sec {
@include col();
}
使用时以组合声明方式存在，通过@extend方式调用。将继承者选择器插入到被继承者选择器出现的地方：

.error {
color: # F00;
}
.serious-error {
@extend: .error;
border: 1px # F00 solid;
}
注：extend不可以继承选择器序列。

使用%构建仅用来继承选择器：

%error {
color: # F00;
}
.serious-error {
@extend: %error;
border: 1px # F00 solid;
}

at-root

被嵌套内容输出到样式表顶层

.main-sec {
font-family: $main-sec-ff;

@at-root {    .main-sec-headline {        font: {            famili: $main-sec-ff;            size: 16px;        }    }    .main-sec-detail {        font-size: 12px;    }}

}
// 生成的代码
.main-sec {
font-family: $main-sec-ff;
}
.main-sec-headline {
font-family: sans;
font-size: 16px;
}
.main-sec-detail {
font-size: 12px;
}

推荐阅读：

巧用SASS之如何遍历n个子元素并为其设置属性

关键字：sass, width, 变量, import

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！