Sass(Syntactically Awesome Stylesheets)是一种CSS预处理器,它允许你使用变量、嵌套规则、混合(Mixin)、继承、函数和其他功能来编写CSS代码,从而使样式表更加易于组织、维护和扩展。Sass最终会被编译成标准的CSS代码,供浏览器使用。
以下是Sass的一些核心功能和明确的代码样例:
1. 变量(Variables)
Sass 使用 $
符号来定义变量,这可以帮助你维护颜色、字体、大小等常见的样式值。
// 定义一个颜色变量
$primary-color: #007bff;
// 使用变量
body {
background-color: $primary-color;
}
// 编译后的CSS
body {
background-color: #007bff;
}
2. 嵌套(Nesting)
Sass 允许你嵌套规则,从而更好地组织代码。
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
li {
display: inline-block;
a {
color: #fff;
text-decoration: none;
}
}
}
}
// 编译后的CSS
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav ul li {
display: inline-block;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
3. 混合(Mixin)
Mixin 允许你定义可重用的样式块,并在整个样式表中调用它们。
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.button {
@include border-radius(10px);
}
// 编译后的CSS
.button {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
4. 继承(Inheritance)
Sass 中的继承使用 @extend
指令,允许一个选择器继承另一个选择器的所有样式。
.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
// 编译后的CSS(可能略有不同,取决于Sass的实现和版本)
.error, .seriousError {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
border-width: 3px;
}
5. 运算(Operations)
Sass 支持在颜色和其他数值上进行基本的数学运算。
$width: 100px;
.container {
width: $width / 2;
padding: $width * 0.1;
}
// 编译后的CSS
.container {
width: 50px;
padding: 10px;
}
6. 函数(Functions)
Sass 提供了许多内置函数,用于处理颜色、字符串和其他值。
$base-font-size: 16px;
body {
font-size: $base-font-size;
line-height: $base-font-size * 1.5;
}
// 编译后的CSS
body {
font-size: 16px;
line-height: 24px;
}
7. 占位符(Placeholders)
Sass 占位符使用 %
符号定义,与Mixin相似,但不会立即生成代码,而是等待被 @extend
调用。
%message-shared {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend %message-shared;
border-color: green;
}
.error {
@extend %message-shared;
border-color: red;
}
// 编译后的CSS
.success, .error {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
在这个例子中,%message-shared
是一个占位符,它定义了一个共享的样式块。然后 .success
和 .error
通过 @extend
继承了这些样式,并添加了他们自己的样式。注意在编译后的 CSS 中,.success
和 .error
共享了相同的 border
、padding
和 color
样式,但是各自的 border-color
是不同的。
8. 插值(Interpolation)
Sass 提供了插值功能,允许你在选择器或属性名中使用变量。
$name: foo;
$attr: border;
.#{$name} {
#{$attr}-color: blue;
}
// 编译后的CSS
.foo {
border-color: blue;
}
在这个例子中,#{$name}
和 #{$attr}
分别插入了变量 $name
和 $attr
的值。
9. 控制指令(Control Directives)
Sass 支持一些控制指令,如 @if
、@for
、@each
和 @while
,用于编写更复杂的逻辑。
$types: 4;
$i: 0;
@while $i < $types {
.border-#{$i + 1} {
border: 1px solid nth($colors, $i + 1);
}
$i: $i + 1;
}
// 假设 $colors 是一个颜色列表
$colors: red, orange, yellow, green;
// 编译后的CSS
.border-1 {
border: 1px solid red;
}
.border-2 {
border: 1px solid orange;
}
.border-3 {
border: 1px solid yellow;
}
.border-4 {
border: 1px solid green;
}
在这个例子中,我们使用 @while
控制指令和变量 $i
来迭代 $types
次,每次迭代都会创建一个新的选择器 .border-#{$i + 1}
,并为其指定一个边框颜色,颜色来自 $colors
列表。
10. 导入(Import)
Sass 允许你通过 @import
指令导入其他 Sass 文件。
// 导入一个名为 _variables.scss 的 Sass 文件
@import 'variables';
// 使用变量
body {
background-color: $primary-color;
}
在这个例子中,我们导入了一个名为 _variables.scss
的 Sass 文件,并在当前文件中使用了该文件定义的变量 $primary-color
。注意,Sass 文件的命名通常以 _
开头,以避免在编译时生成单独的 CSS 文件。