Sass常用属性合集

1、规则嵌套

Sass 允许将一套 css 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，例如：

#main p {
color: #00ff00;

width: 97%;

.redbox {
background-color: #ff0000;

color: #000000;

}

}

编译为：

#main p {
color: #00ff00;

width: 97%; }

#main p .redbox {
background-color: #ff0000;

color: #000000;

}

2、父选择器

在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，或者当 body 元素有某个 classname 时，可以用 & 代表嵌套规则外层的父选择器。

a {
font-weight: bold;

text-decoration: none;

&:hover { text-decoration: underline; }

body.firefox & { font-weight: normal; }

}

编译为

a {
font-weight: bold;

text-decoration: none; }

a:hover {
text-decoration: underline; }

body.firefox a {
font-weight: normal;

}

3、嵌套属性

有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中，例如：

.funky {
font: {
family: fantasy;

size: 30em;

weight: bold;

}

}

编译为

.funky {
font-family: fantasy;

font-size: 30em;

font-weight: bold;

}

4、变量 $ (variables: $)

SassScript 最普遍的用法就是变量，变量以美元符号开头，赋值方法与 CSS 属性的写法一样：

$width: 5em;

// 使用

#main {
width: $width;

}

编译为：

#main {
width: 5em

}

5、运算

SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。

p {
width: 1in + 8pt;

}

编译为

p {
width: 1.111in;

}

6、变量定义 !default (variable Defaults: !default)

可以在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。

$content: "First content";

$content: "Second content?" !default;

$new_content: "First time reference" !default;

#main {
content: $content;

new-content: $new_content;

}

编译为

#main {
content: "First content";

new-content: "First time reference";

}

7、@import

Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。

@import "foo.scss";

// 或

@import "foo";

Sass 允许同时导入多个文件，例如同时导入 rounded-corners 与 text-shadow 两个文件：

@import "rounded-corners", "text-shadow";

8、@media

Sass 中 @media 指令与 CSS 中用法一样，只是增加了一点额外的功能：允许其在 CSS 规则中嵌套。如果 @media 嵌套在 CSS 规则内，编译时，@media 将被编译到文件的最外层，包含嵌套的父选择器。这个功能让 @media 用起来更方便，不需要重复使用选择器，也不会打乱

@media screen {
.sidebar {
@media (orientation: landscape) {
width: 500px;

}

}

}

编译为

@media screen and (orientation: landscape) {
.sidebar {
width: 500px; }

}

9、@extend

在设计网页的时候常常遇到这种情况：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。通常会在 html 中给元素定义两个 class，一个通用样式，一个特殊样式。假设现在要设计一个普通错误样式与一个严重错误样式，一般会这样写：

.father{
color: yellow;

font-size: 18px;

}

.son{
@extend .father;

font-weight: bold;

}

编译为

.son{
color: yellow;

font-size: 18px;

font-weight: bold;

}

10、控制指令 @if

当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码：

p {
@if 1 + 1 == 2 { border: 1px solid; }

@if 5 < 3 { border: 2px dotted; }

@if null { border: 3px double; }

}

编译为

p {
border: 1px solid;

}

@if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。如果 @if 声明失败，Sass 将逐条执行 @else if 声明，如果全部失败，最后执行 @else 声明，例如：

$type: monster;

p {
@if $type == ocean {
color: blue;

} @else if $type == matador {
color: red;

} @else if $type == monster {
color: green;

} @else {
color: black;

}

}

编译为

p {
color: green; }

11、@for

@for 指令可以在限制的范围内重复输出格式，每次按要求(变量的值)对输出结果做出变动。这个指令包含两种格式：@for $var from through ，或者 @for $var from to ，区别在于 through 与 to 的含义：当使用 through 时，条件范围包含  与  的值，而使用 to 时条件范围只包含  的值不包含  的值。另外，$var 可以是任何变量，比如 $i； 和  必须是整数值。即through前闭后闭 to是前闭后开

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

}

编译为

.item-1 {
width: 2em; }

.item-2 {
width: 4em; }

.item-3 {
width: 6em; }

12、@each

@each 指令的格式是 $var in , $var 可以是任何变量名，比如 $length 或者 $name，而  是一连串的值，也就是值列表。

@each 将变量 $var 作用于值列表中的每一个项目，然后输出结果，例如：

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

}

}

编译为

.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'); }

13、@while

@while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for 更复杂的循环，只是很少会用到。例如：

$i: 6;

@while $i > 0 {
.item-#{$i} { width: 2em * $i; }

$i: $i - 2;

}

编译为

.item-6 {
width: 12em; }

.item-4 {
width: 8em; }

.item-2 {
width: 4em; }

14、定义混合样式指令 @mixin

混合指令的用法是在 @mixin 后添加名称与样式，比如名为 large-text 的混合通过下面的代码定义：

@mixin large-text {
font: {
family: Arial;

size: 20px;

weight: bold;

}

color: #ff0000;

}

混合也需要包含选择器和属性，甚至可以用 & 引用父选择器：

@mixin clearfix {
display: inline-block;

&:after {
content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

* html & { height: 1px }

}

引用混合样式 @include

.page-title {
@include large-text;

padding: 4px;

margin-top: 10px;

}

编译为

.page-title {
font-family: Arial;

font-size: 20px;

font-weight: bold;

color: #ff0000;

padding: 4px;

margin-top: 10px; }

资源搜索网站大全 https://www.renrenfan.com.cn

15、混合样式指令的参数

参数用于给混合指令中的样式设定变量，并且赋值使用。在定义混合指令的时候，按照变量的格式，通过逗号分隔，将参数写进圆括号里。引用指令时，按照参数的顺序，再将所赋的值对应写进括号：

@mixin sexy-border($color, $width) {
border: {
color: $color;

width: $width;

style: dashed;

}

}

p { @include sexy-border(blue, 1in); }

编译为

p {
border-color: blue;

border-width: 1in;

border-style: dashed;

}

16、函数指令 (Function Directives)

Sass 支持自定义函数，并能在任何属性值或 Sass script 中使用：

$grid-width: 40px;

$gutter-width: 10px;

@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;

}

#sidebar { width: grid-width(5); }

编译为

#sidebar {
width: 240px;

}