scss 定义对象变量，使用@each循环
$colorState: (
primary: #409EFF,
success: #67C23A,
warning: #E6A23C,
info: #909399,
danger: #F56C6C,
);
@each $type, $colorVal in $colorState {
.#{$type} {
color: $colorVal;
}
}
//scss提供的内置函数，实现颜色变暗
darken(#f00, 15%)
sassMagic
normalize重置样式
mixin 的使用，实现代码复用
$namespace: artist;
@mixin b($block) {
$B: $namespace+'-'+$block;
.#{$B} {
@content; //主要是继承定义在include后面的属性
}
}
//使用mixin
@include b(cart) {
font-size: 22px;
}
//@at-root //跳跃当前级，返回与父级同级
//!global 把局部变量强升为全局变量，可以把循环中的变量提取出来当作全局变量
使用dart-sass包调试sass文件，通过@debug或者@warn
sass基本函数使用
//unquote($string): 移除一个字符串里的引号，当然包括双引号以及单引号。
//如果字符串没有引号，则返回其本身。
unquote("foo") => foo
unquote(foo) => foo
//quote($string): 给一个字符串添加引号，如果这字符串是用了引号的形式，则返回其本身。
quote("foo") => "foo"
quote(foo) => "foo"
//str-length($string): 返回字符串中字符的个数.
str-length("foo") => 3
//str-insert($string, $insert, $index): 在字符串$string中 $index 位置插入$insert。
//注意，在Sass里，索引开始的数值为1.
str-insert("abcd", "X", 1) => "Xabcd"
str-insert("abcd", "X", 4) => "abcXd"
str-insert("abcd", "X", 5) => "abcdX"
//str-index($string, $substring): 返回$substring子字符串第
//一次在$string中出现的位置。如果没有匹配到子字符串，则返回null.
str-index(abcd, a) => 1
str-index(abcd, ab) => 1
str-index(abcd, X) => null
str-index(abcd, c) => 3
//str-slice($string, $start-at, [$end-at]): 从$string里提取
//出子字符串。子字符串从$start-at索引开始到$end-at索引位置结束。
//包含$start-at和$end-at，如果省略$end-at则一直提取到字符串结束.
str-slice("abcd", 2, 3) => "bc"
str-slice("abcd", 2) => "bcd"
str-slice("abcd", -3, -2) => "bc"
str-slice("abcd", 2, -2) => "bc"
//to-upper-case($string): 将字符串转换为大写.
//to-lower-case($string): 将字符串转换为小写.
inspect 将数字转成字符串
在选择器中使用&变量，相当于是取前面的选择器
.block {
$ele: &;
//$ele 相当于等于 .block;
}
在vue中，需要设置全局变量，才能使用，当在main中引入全局的scss变量，还是不能使用
//在vue.config.js中配置
module.exports = {
css: {
loaderOptions: {
sass: {
//依次导入的公用的scss变量，公用的scss混入，共用的默认样式
additionalData: `@import "@/style/common-ui/var.scss";`
},
},
},
}
BEM命名
block 块
element 元素
modifier 修饰符
- 常用mixins
@mixin box-center($justify:center, $align: center) {
display:flex;
@if($align !=false) {
align-items: $align;
}
@if($justify !=false) {
justify-content: $justify;
}
}
//文本超出省略号
@mixin ellipsis($lines: 1, $substract: 0) {
@if $lines == 1 {
white-space: nowrap;
text-overflow: ellipsis;
width: 100% - $substract;
overflow: hidden;
} @else {
overflow:hidden;
display:-webkit-box;
display:box;
-webkit-line-clamp: $lines;
line-clamp: $lines;
-webkit-box-orient: vertical;
box-orient: vertical;
}
}
初始化样式
sass提供了一个darken方法，实现把颜色变暗的效果
.clolor1 {
color: darken(#f00, 15%)
}
- 带下划线的scss文件，被称为parces的scss，只能被导入，不能使用
