一、sass有两种后缀名文件
- sass,不使用大括号和分号。
- scss,与css文件格式差不多,使用大括号和分号。
二、编译格式
- nested ----------- 嵌套
- compact ----------- 紧凑
- expanded ----------- 扩展
- compressed ----------- 压缩
配置修改
三、变量
sass使用 $ 符号来标识变量
// 声明变量
$color: #fff;
// 变量使用
div {
border: $color;
}
四、嵌套规则
选择器嵌套
nav {
height: 100px;
ul {
margin: 0;
li {
padding: 5px;
list-style: none;
}
}
}
父选择器的标识符 &
a {
color: blue;
&:hover {
color: red
}
}
属性嵌套
例如:border-styleborder-widthborder-color以及border-等属性的书写过于复杂。但在sass中,你只需敲写一遍border:
nav {
border: {
style: solid;
width: 1px;
color: #ccc;
}
}
五、样式复用 mixin
- 定义 mixin:使用 @mixin 加名称定义样式模块
语法
@mixin 名字 (参数1, 参数2...) { ... }
案例
@mixin button {
font-size: 1em;
padding: 0.5em 1.0em;
text-decoration: none;
color: #fff;
}
@mixin link {
a {
color: blue;
&:visited {
color: purple;
}
&:hover {
color: white;
}
&:active {
color: red;
}
}
}
2. 使用 @include 指令 调用 @mixin 样式模块
.button-green {
@include button;
background-color: green;
}
@mixin button-blue {
@include button;
@include link;
}
3. 参数使用
// 声明
@mixin button($background) {
font-size: 1em;
padding: 0.5em 1.0em;
text-decoration: none;
color: #fff;
background: $background;
}
// 调用
.button-green {
@include button(green);
}
参数设置默认值
@mixin button($background: green) {
font-size: 1em;
padding: 0.5em 1.0em;
text-decoration: none;
color: #fff;
background: $background;
}
六、样式继承 @extend
.box {
background-color: red;
}
div {
// 样式继承
@extend .box;
color: #fff;
}
七、引入sass文件 @import
@import "base";
八、控制指令
-
@if
// -------------- 语法 ------------
@if 条件 {
...
}
// -------------------
// 变量声明
$use-prefixes: true;
.rounded {
@if $use-prefixes {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
border-radius: 5px;
}
// 变量声明
$theme: "dark";
body {
@if $theme == dark {
background-color: black;
} @else @if $theme == light {
background-color: white;
} @else {
background-color: grey;
}
}
2. @for
// ------------ 语法 ------------
@for $var from <开始值> through <结束值> {
...
}
// -------------------------------
$columns: 4;
// through 包含4
@for $i from 1 through $columns{
.col-#{$i} {
width: 100% / $columns * $i;
}
}
// ------------ 语法 -------------
@for $var from <开始值> to <结束值> {
...
}
// -------------------------------
$columns: 4;
// to 不包含4
@for $i from 1 to $columns{
.col-#{$i} {
width: 100% / $columns * $i;
}
}
3. @each
@each $var in $list {
...
}
$icons: success error warning;
@each $icon in $icons {
.icon-#{$icon} {
background-image: url(./images/icons/#{$icon}.png)
}
}
4. @while
@while 条件 {
...
}
$i: 6;
@while $i > 0 {
.item-#{$i} {
width: 5px * $i;
}
$i: $i -2;
}
内容来源:稀土掘金
转载链接:https://juejin.cn/post/7165343063814963214