scss = Sass 3 靠括号继承
最后更新于：2022-04-02 03:18:27
[TOC]
## 安装
Windows 系统需要先安装 Ruby
##使用
`sass input.scss output.css`
### 监听整个目录
`sass --watch app/sass:public/stylesheets`
## CSS 功能拓展
### 嵌套规则
```
#main p {
color: #00ff00;
width: 97%;
.redbox {
background-color: #ff0000;
color: #000000;
}
}
```
### 父选择器 &
```
a {
font-weight: bold;
text-decoration: none;
&:hover { text-decoration: underline; }
body.firefox & { font-weight: normal; }
}
//or
#main {
color: black;
&-sidebar { border: 1px solid; }
}
```
### 属性嵌套
font-family, font-size, font-weight 都以 font 作为属性的命名空间
```
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
```
### 互动命令行
```
$ sass -i
>> "Hello, Sassy World!"
"Hello, Sassy World!"
>> 1px + 1px + 1px
3px
>> #777 + #777
#eeeeee
>> #777 + #888
white
```
### 变量 $
**变量支持块级作用域**，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加`!global`声明
```
$width: 5em;
#main {
width: $width;
}
//声明全局
#main {
$width: 5em !global;
width: $width;
}
#sidebar {
width: $width;
}
```
### 数据类型
* 数字，`1, 2, 13, 10px`
* 字符串，有引号字符串与无引号字符串，`"foo", 'bar', baz`
* 颜色，`blue, #04a3f9, rgba(255,0,0,0.5)`
* 布尔型，`true, false`
* 空值，`null`
* 数组 (list)，用空格或逗号作分隔符，`1.5em 1em 0 2em, Helvetica, Arial, sans-serif`
* maps, 相当于 JavaScript 的 object，`(key1: value1, key2: value2)`
#### 字符串 (Strings)
```
@mixin firefox-message($selector) {
body.firefox #{$selector}:before {
content: "Hi, Firefox users!";
}
}
@include firefox-message(".header");
```
### 运算
#### 数字运算
```
p {
width: 1in + 8pt;
}
//转为
p {
width: 1.111in;
}
```
#### 除法运算 /
```
p {
font: 10px/8px; // Plain CSS, no division
$width: 1000px;
width: $width/2; // Uses a variable, does division
width: round(1.5)/2; // Uses a function, does division
height: (500px/2); // Uses parentheses, does division
margin-left: 5px + 8px/2px; // Uses +, does division
}
```
#### 颜色值运算
```
p {
color: #010203 + #040506;
}
//计算 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09
p {
color: #050709;
}
```
#### 圆括号
圆括号可以用来影响运算的顺序：
```
p {
width: 1em + (2em * 3);
}
```
### 函数
SassScript 定义了多种函数，有些甚至可以通过普通的 CSS 语句调用：
```
p {
color: hsl(0, 100%, 50%);
}
//转
p {
color: #ff0000; }
```
### 插值语句 #{}
```
$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
//转
p.foo {
border-color: blue; }
```
### @import
```
@import "foo.scss";
//或
@import "foo";
```
### @extend
```
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
```
#### 多重
```
.error {
border: 1px #f00;
background-color: #fdd;
}
.attention {
font-size: 3em;
background-color: #ff0;
}
.seriousError {
@extend .error;
@extend .attention;
border-width: 3px;
}
```
#### 继续延伸
```
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
.criticalError {
@extend .seriousError;
position: fixed;
top: 10%;
bottom: 10%;
left: 10%;
right: 10%;
}
```
### @if
```
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
@if null { border: 3px double; }
}
```
```
$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; }
```
### @for
```
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
//转
.item-1 {
width: 2em; }
.item-2 {
width: 4em; }
.item-3 {
width: 6em; }
```
### @mixin
#### 定义混合指令
```
@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; }
```
#### 参数(可赋默认值)
```
@mixin sexy-border($color, $width:1in) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
p { @include sexy-border(blue, 1in); }
//转
p {
border-color: blue;
border-width: 1in;
border-style: dashed; }
```
##### 参数数课变
如 box-shadow
```
@mixin box-shadow($shadows...) {
-moz-box-shadow: $shadows;
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
}
.shadows {
@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
//转
.shadowed {
-moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
-webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}
```
### 函数指令
```
$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; }
```
';