一、安装使用
ruby ==> sass
二、编译
vscode配置
三、变量
1、基础的变量
$base_color:#1269b5;
.box {
color:$base_color;
}
2、在变量里面也可以引入其他的变量
$base_border:1px solid $base_color;
四、嵌套
正常嵌套
使用&
符号会引用父选择器
伪类
&:hover
属性的嵌套
body {
font-family: 'Courier New', Courier, monospace;
font-size: 15px;
font-weight: normal;
}
==>
body {
font: {
family: 'Courier New', Courier, monospace;
size: 15px;
weight: normal;
}
}
.nav {
border: 1px solid #000;
border-left: 0;
border-right: 0;
}
==>
.nav {
border: 1px solid #000 {
left: 0;
right: 0;
}
}
五、函数mixin
1、基础使用
@mixin alert {
color: red;
background-color: lime;
a {
color: blue;
}
}
.alert-test {
@include alert;
}
==>
.alert-test {
color: red;
background-color: lime;
}
.alert-test a {
color: blue;
}
2、带有参数的函数
定义函数 (传入两个变量 darken 是变深)
@mixin alert($text-color, $background) {
color: $text-color;
background-color: $background;
a {
color: darken($text-color, 10%);
}
}
两种调用方式
// 调用
.alert-warning {
@include alert(#8afdf1, #fcc689);
}
.alert-info {
@include alert($background: #fcc689, $text-color: #8afdf1);
}
六、继承extend
1、继承 会把选择器自己的样式和后代的选择器及样式全部继承
.alert {
padding: 15px;
}
.alert-info {
@extend .alert;
background-color: lime;
}
七、引入import 注意引入的如果是整体的一部分即partials,需要以下划线开头
// _base.scss
@import "base"
八、注释
如果希望在压缩后的min.css保留注释 就使用/*! */
九、内置函数
// 绝对值
abs()
// 四舍五入
round()
// 进位 退位
ceil() floor()
// 转化为百分号
percentage(650px / 1000px) ==> 65%
// 最大最小
max() min()
字符串函数
$greeting:'hello world'
to-upper-case($greeting)
to-lower-case($greeting)
str-length($greeting)
// 插入
str-insert($greeting,'.com',位置)
颜色函数
lighten 明度
darken 减小明度
十、控制指令
if
@if 条件 {
...
} @else if {
...
} @else {
...
}
@if $theme === dark {}
for(循环)
$columns: 4;
@for $i from 1 through $columns {
.col-#{$i} {
width: 100% / $columns * $i;
}
}
// through 包括最后项 1234 to不包括 123
.col-1 {
width: 25%;
}
.col-2 {
width: 50%;
}
.col-3 {
width: 75%;
}
.col-4 {
width: 100%;
}
each
@each $var in $list {
...
}
$icons: success error warning;
@each $var in $icons {
.icon-#{$var} {
background-image: url(../image/icons/#{$var}.png);
}
}
==>
.icon-success {
background-image: url(../image/icons/success.png);
}
.icon-error {
background-image: url(../image/icons/error.png);
}
.icon-warning {
background-image: url(../image/icons/warning.png);
}
while
@while