编译模式有两种
默认使用Dart Sass就可以了。
Dart Sass和Libsass的区别
输出模式
是Scss的四种输出风格
嵌套输出方式 nested
展开输出方式 expanded
紧凑输出方式 compact
压缩输出方式 compressed
其他配置
em...
yekong
3年前 (2021-08-29) 929℃
0喜欢
Dart Sass和Libsass都是用来将sass编译成css的工具。
libsass
libsass 是用 node(调用 cpp 编写的 libsass)来编译 sass;
自动编译实时的
dart-sass
dart-sass 是用 drat VM 来编译 sass
需要...
yekong
3年前 (2021-08-29) 1486℃
0喜欢
Scss的注释在压缩编译后注释信息会被删除
那么如何保留注释信息呢?
在注释信息中添加叹号
/*!
注释信息
*/
编译前
编译后
...
yekong
3年前 (2021-08-29) 972℃
0喜欢
@debug 在 Sass 中是用来调试的,当你的在 Sass 的源码中使用了 @debug 指令之后,Sass 代码在编译出错时,在命令终端会输出你设置的提示 Bug:
@debug 10em + 12em;
会输出:
Line 1 DEBUG: 22em
...
yekong
3年前 (2021-08-20) 1459℃
0喜欢
@error 和 @warn、@debug 功能是如出一辙。
@mixin error($x){
@if $x < 10 {
width: $x * 10px;
} @else if $x == 10 {
width: $x;
} @else {...
yekong
3年前 (2021-08-20) 823℃
1喜欢
@at-root 从字面上解释就是跳出根元素。当你选择器嵌套多层之后,想让某个选择器跳出,此时就可以使用 @at-root。
.a {
color: red;
.b {
color: orange;
.c {
color: yellow;
...
yekong
3年前 (2021-08-20) 1372℃
0喜欢
Sass 中的 @extend 是用来扩展选择器或占位符。比如:
.error {
border: 1px #f00;
background-color: #fdd;
}
.error.intrusion {
background-image: url("/...
yekong
3年前 (2021-08-20) 1294℃
0喜欢
@warn 和 @debug 功能类似,用来帮助我们更好的调试 Sass。如:
@mixin adjust-location($x, $y) {
@if unitless($x) {
@warn "Assuming #{$x} to be in pixels...
yekong
3年前 (2021-08-20) 868℃
0喜欢
Sass 中的 @media 指令和 CSS 的使用规则一样的简单,但它有另外一个功能,可以嵌套在 CSS 规则中。有点类似 JS 的冒泡功能一样,如果在样式中使用 @media 指令,它将冒泡到外面。来看一个简单示例:
.sidebar {
width: 300px;
...
yekong
3年前 (2021-08-20) 1389℃
0喜欢
Sass 扩展了 CSS 的 @import 规则,让它能够引入 SCSS 和 Sass 文件。 所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一的 CSS 文件。 另外,被导入的文件中所定义的变量或 mixins 都可以在主文件中使用。
Sass 会在当前目录下...
yekong
3年前 (2021-08-20) 4057℃
0喜欢
transparentize() 和 fade-out() 让颜色更加的透明。这两个函数会让透明值做减法运算,当计算出来的结果小于 0 时会以 0 计算,表示全透明。
>> transparentize(red,.5)
rgba(255, 0, 0, 0.5)
>...
yekong
3年前 (2021-08-20) 1423℃
0喜欢
opacify
fade-in( )
这两个函数是用来对已有颜色的透明度做一个加法运算,会让颜色更加不透明。其接受两个参数,第一个参数是原始颜色,第二个参数是你需要增加的透明度值,其取值范围主要是在 0~1 之间。当透明度值增加到大于 1 时,会以 1 计算,表示颜色不具有任何透...
yekong
3年前 (2021-08-20) 1618℃
0喜欢
rgba 修改颜色透明度
第一个参数为颜色,第二个参数是你需要设置的颜色透明值。
>> rgba(red,.5)
rgba(255, 0, 0, 0.5)
>> rgba(#dedede,.5)
rgba(222, 222, 222, 0.5)
>&...
yekong
3年前 (2021-08-20) 1981℃
0喜欢
opacity 控制整个元素的透明度
>> alpha(red)
1
>> alpha(rgba(red,.8))
0.8
>> opacity(red)
1
>> opacity(rgba(red,.8))
0.8
...
yekong
3年前 (2021-08-19) 591℃
0喜欢
lighten() 函数会让颜色变得更亮,与之相反的 darken() 函数会让颜色变得更暗。这个亮度值可以是 0~1 之间,不过常用的一般都在 3%~20% 之间。
$baseColor: #ad141e;
使用 lighten() 和 darken() 函数来修改 10% ...
yekong
3年前 (2021-08-19) 1971℃
0喜欢
saturate($color,$amount):通过改变颜色的饱和度值,让颜色更饱和,从而创建一个新的颜色
sass -i
>> saturate(#f36,50%) //把#f36颜色饱和度提高50%
#ff3366
//SCSS
$baseColor: #ad...
yekong
3年前 (2021-08-19) 810℃
0喜欢
invert($color):反回一个反相色,红、绿、蓝色值倒过来,而透明度不变。
sass -i
>> invert(#f36)
#00cc99
...
yekong
3年前 (2021-08-19) 1191℃
0喜欢
complement($color):返回一个补充色,相当于adjust-hue($color,180deg);
sass -i
>> complement(#f36)
#33ffcc
...
yekong
3年前 (2021-08-19) 714℃
0喜欢
grayscale($color):将一个颜色变成灰色,相当于desaturate($color,100%);
sass -i
>> grayscale(#f36) //把#f36颜色变成灰色
#999999
//SCSS
$baseColor: #ad141e;
...
yekong
3年前 (2021-08-19) 1207℃
0喜欢
desaturate($color,$amount):通过改变颜色的饱和度值,让颜色更少的饱和,从而创建出一个新的颜色;
sass -i
desaturate(#f36,50%) //把#f36颜色饱和度降低50%
#cc667f
...
yekong
3年前 (2021-08-19) 683℃
0喜欢