Sass常用语法
与Less对比
Sass相对于Less的优点
- 功能强大：Sass 提供了更多的功能，比如嵌套规则、变量、混合宏、继承等。
- SCSS 语法：Sass 提供了两种语法，一种是原始的 Sass 语法（缩进），另一种是 SCSS 语法（类似 CSS），大多数开发者更喜欢 SCSS 语法。
- 成熟稳定：Sass 自 2006 年发布以来，已经被广泛使用，并且有大量的支持和社区资源。
- 性能优化：Sass 支持更高效的编译和性能优化。
总体来说，如果你需要更高级的功能和更广泛的社区支持，Sass 可能是更好的选择。
导入
导入
@import "blue-theme.scss"嵌套导入
.blue-theme {
@import "blue-theme";
}变量
$nav-color: #F90;
nav {
$width: 100px;
width: $width;
color: $nav-color;
}编译后
nav {
width: 100px;
color: #F90;
}嵌套
#content {
article {
h1 { color: #333 }
p { margin-bottom: 1.4em }
}
aside { background-color: #EEE }
}编译后
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }选择器
父选择器的标识符&
article a {
color: blue;
&:hover { color: red }
}编译后
article a { color: blue }
article a:hover { color: red }同层选择器
同层相邻组合选择器+
选择header元素后紧跟的p元素：
header + p { font-size: 1.1em }同层全体组合选择器~
选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素：
article ~ article { border-top: 1px dashed #ccc }子选择器
子组合选择器>选择一个元素的直接子元素
article {
> section { background: #eee }
}混合器
基本用法
定义
@mixin rounded-corners {
-moz-border-radius: 16px;
-webkit-border-radius: 16px;
border-radius: 16px;
}@include调用会把混合器中的所有样式提取出来放在@include被调用的地方。
如果像下边这样写：
notice {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners;
}编译后
.notice {
background-color: green;
border: 2px solid #00aa00;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}混合器传参
个人不太推荐使用这种方式。
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}当混合器被@include时，你可以把它当作一个css函数来传参。
如果你像下边这样写：
a {
@include link-colors(blue, red, green);
}编译后
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }继承
//通过选择器继承继承样式
.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}编译后
.seriousError {
border: 1px solid red;
background-color: #fdd;
border-width: 3px;
}本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2024-07-25，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
