Sass(Syntactically Awesome Stylesheets)是一种CSS预处理器,它扩展了CSS的功能,提供了变量、嵌套、混合、继承等高级功能,使CSS的编写更加灵活和模块化。Sass有两种语法格式:一种是Sass(缩进语法),另一种是SCSS(Sassy CSS)。
=>基本语法
变量
Sass允许你使用变量来存储值,如颜色、字体、间距等。
$primary-color: #333;
body {
color: $primary-color;
}
嵌套
Sass允许你在CSS规则中嵌套其他CSS规则,这样可以更清晰地表示层次结构。
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
混合(Mixins)
混合允许你定义可重用的CSS片段,并在需要时插入它们。
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }
继承
继承允许一个选择器继承另一个选择器的样式。
%message-shared {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.message { @extend %message-shared; }
.alert { @extend %message-shared; }
运算
Sass允许你在CSS中进行数学运算。
.container {
width: 100%;
margin-left: 10px;
margin-right: 10px;
width: calc(100% - 20px);
}
=>高级功能
函数
Sass允许你定义函数以返回值,并在样式表中使用这些函数。
@function px-to-rem($px, $base: 16) {
@return #{$px / $base}rem;
}
.container { font-size: px-to-rem(18); }
条件和循环
Sass支持条件语句和循环语句,允许你在样式表中使用逻辑。
@mixin theme-colors($themes) {
@each $name, $color in $themes {
.#{$name}-theme {
color: $color;
}
}
}
@include theme-colors((primary: #333, secondary: #666, success: #28a745));
导入和模块化
Sass允许你将样式分解成多个文件,然后在一个主文件中导入它们。
// _reset.scss
* {
margin: 0;
padding: 0;
}
// styles.scss
@import 'reset';
body { font-family: Arial, sans-serif; }
编译Sass
要将Sass文件编译成CSS文件,可以使用以下命令:
sass input.scss output.css
也可以设置Sass监听文件的变化:
sass --watch input.scss:output.css
=>示例
这是一个包含变量、嵌套、混合和继承的完整示例:
$primary-color: #3498db;
$padding: 16px;
@mixin box-shadow($x, $y, $blur, $color) {
-webkit-box-shadow: $x $y $blur $color;
-moz-box-shadow: $x $y $blur $color;
box-shadow: $x $y $blur $color;
}
%flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.container {
padding: $padding;
background-color: $primary-color;
@include box-shadow(0px, 0px, 10px, rgba(0, 0, 0, 0.1));
@extend %flex-center;
.content {
color: white;
text-align: center;
h1 {
font-size: 2em;
margin-bottom: 0.5em;
}
p {
font-size: 1em;
line-height: 1.5;
}
}
}
这段Sass代码会被编译成如下CSS:
.container {
padding: 16px;
background-color: #3498db;
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: center;
align-items: center;
}
.container .content {
color: white;
text-align: center;
}
.container .content h1 {
font-size: 2em;
margin-bottom: 0.5em;
}
.container .content p {
font-size: 1em;
line-height: 1.5;
}