Sass 是一个 CSS 的扩展,它在 CSS 语法的基础上,允许使用变量 (variables), 嵌套规则 (nested rules), 混合 (mixins), 导入 (inline imports) 等功能,令 CSS 更加强大与优雅。使用 Sass 以及 Compass 样式库 有助于更好地组织管理样式文件,以及更高效地开发项目。—sass中文文档
以下是个人摘抄的sass的一些常用的知识点:
- 嵌套规则 :Sass 允许将一个 CSS 样式嵌套进另一个样式中
- 引用父选择器:& ,在css嵌套中使用&来明确地表示插入指定父选择器
例如:
.tab {
color: #ccc;
&:hover {
color: blue;
}
&.is-active {
color: blue;
}
}
编译为:
.tab {
color: #ccc;
}
.tab:hover {
color: blue;
}
.tab.is-active {
color: blue;
}
- 嵌套属性
例如:
.tab {
font: {
family: fantasy;
size: 18px;
weight: bold;
}
}
编译为:
.tab {
font-family: fantasy;
font-size: 18px;
font-weight: bold;
}
SassScript
- **变量: $ **
/* 定义sass变量 */
$width: 100px;
$height: 50px;
/* 属性中引用变量 */
.box1 {
width: $width;
heiht: $height;
}
.box2 {
width: $width;
height: 100px;
}
编译为:
.box1 {
width: 100px;
heiht: 50px;
}
.box2 {
width: 100px;
height: 100px;
}
变量的作用域:
变量仅在它定义的选择器嵌套层级的范围内可用。不在任何嵌套选择器内定义的变量则在可任何地方使用。定义变量的时候可以后面带上!global标志,在这种情况下,变量在任何地方可见。
- **运算 **
1、数字运算
p {
font: 10px/8px; // 原生的CSS,不作为除法
$width: 1000px;
width: $width/2; // 使用了变量, 作为除法
width: round(1.5)/2; // 使用了函数, 作为除法
height: (500px/2); // 使用了括号, 作为除法
margin-left: 5px + 8px/2px; // 使用了 +, 作为除法
font: (italic bold 10px/8px); // 在一个列表(list)中,括号可以被忽略。
}
编译为:
p {
font: 10px/8px;
width: 500px;
height: 250px;
margin-left: 9px;
}
2、字符串运算:+ 运算可用于连接字符串
p {
cursor: e + -resize;
}
编译为:
p {
cursor: e-resize;
}
控制指令和表达式
- if(): 内置的if()函数可在一个条件处理分支并返回两种可能结果,if函数只判断相对应的一个参数并且返回
if(true, 1px, 2px) => 1px
if(false, 1px, 2px) => 2px
- **@if: ** @if 指令需要一个SassScript表达和嵌套在它下面要使用的样式,如果表达式返回值不为 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;
}
- @for:@for指令重复输出一组样式。对于每次重复,计数器变量用于调整输出结果。该指令有两种形式:@for $var from through 和 @for
v
a
r
f
r
o
m
<
s
t
a
r
t
>
t
o
<
e
n
d
>
。
注
意
关
键
字
t
h
r
o
u
g
h
和
t
o
的
区
别
。
var from <start> to <end>。注意关键字through 和 to的区别。
varfrom<start>to<end>。注意关键字through和to的区别。var可以是任何变量名,比如
i
;
<
s
t
a
r
t
>
和
<
e
n
d
>
是
应
该
返
回
整
数
的
S
a
s
s
S
c
r
i
p
t
表
达
式
。
当
<
s
t
a
r
t
>
比
<
e
n
d
>
大
的
时
候
,
计
数
器
将
递
减
,
而
不
是
增
量
。
@
f
o
r
语
句
将
设
置
i;<start> 和 <end>是应该返回整数的SassScript表达式。当<start>比<end>大的时候,计数器将递减,而不是增量。@for语句将设置
i;<start>和<end>是应该返回整数的SassScript表达式。当<start>比<end>大的时候,计数器将递减,而不是增量。@for语句将设置var为指定的范围内每个连续的数值,并且每一次输出的嵌套样式中使用$var的值。对于from … through的形式,范围包括和的值,但from … to的形式从开始运行,但不包括的值。使用through语法,
例如:
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
编译为:
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
.item-3 {
width: 6em;
}
- @each: @each指令通常格式是@each v a r i n < l i s t o r m a p > 。 var in <list or map>。 varin<listormap>。var可以是任何变量名,像$length 或者 n a m e , 和 < l i s t o r m a p > 是 一 个 返 回 列 表 ( l i s t ) 或 m a p 的 S a s s S c r i p t 表 达 式 。 @ e a c h 规 则 将 name,和<list or map>是一个返回列表(list)或 map 的 SassScript 表达式。@each 规则将 name,和<listormap>是一个返回列表(list)或map的SassScript表达式。@each规则将var设置为列表(list)或 map 中的每个项目,输出样式中包含使用$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');
}
#混入指令#
混入(mixin)允许定义可以在整个样式表中重复使用的样式,而避免了使用无语意的类(class),比如 .float-left。混入(mixin)还可以包含所有的CSS规则,以及任何其他在Sass文档中被允许使用的东西。甚至可以带arguments,引入变量,只需少量的混入(mixin)代码就能输出多样化的样式。
定义混入样式
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}
引入混入样式
.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)可以用 SassScript 值作为参数,给定的参数被包括在混入(mixin)中并且作为为变量提供给混入(mixin)。当定义一个混入(mixin)的时候,参数被作为变量名,写到混入(mixin)名字后面的括号内,多个参数可以用逗号分隔。然后,当调用混入的时候,值通过对应的参数顺序被传递。 例如:
@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;
}
#函数指令#
Sass 支持自定义函数,并能在任何值或脚本上下文中使用。例如
$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;
}
函数可以访问任何全局定义的变量,以及接受参数,就像一个混入(mixin)。函数可以包含语句,并且必须调用@return来设置函数的返回值
》》》end:也抄的七七八八了١١(❛ᴗ❛)