标签:Scss

css

使用codeKit编译scss

使用codeKit编译scss
编译模式有两种 默认使用Dart Sass就可以了。 Dart Sass和Libsass的区别 输出模式 是Scss的四种输出风格 嵌套输出方式 nested 展开输出方式 expanded 紧凑输出方式 compact 压缩输出方式 compressed 其他配置 em...

yekong 3年前 (2021-08-29) 929℃ 0喜欢

css

Dart Sass和Libsass的区别

Dart Sass和Libsass的区别
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喜欢

css

Scss编译后保留注释信息

Scss编译后保留注释信息
Scss的注释在压缩编译后注释信息会被删除 那么如何保留注释信息呢? 在注释信息中添加叹号 /*! 注释信息 */ 编译前 编译后 ...

yekong 3年前 (2021-08-29) 972℃ 0喜欢

css

Scss @debug

Scss @debug
@debug 在 Sass 中是用来调试的,当你的在 Sass 的源码中使用了 @debug 指令之后,Sass 代码在编译出错时,在命令终端会输出你设置的提示 Bug: @debug 10em + 12em; 会输出: Line 1 DEBUG: 22em ...

yekong 3年前 (2021-08-20) 1459℃ 0喜欢

css

Scss @error

Scss @error
@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喜欢

css

Scss 跳出根元素

Scss 跳出根元素
@at-root 从字面上解释就是跳出根元素。当你选择器嵌套多层之后,想让某个选择器跳出,此时就可以使用 @at-root。 .a { color: red; .b { color: orange; .c { color: yellow; ...

yekong 3年前 (2021-08-20) 1372℃ 0喜欢

css

Scss @extend

Scss @extend
Sass 中的 @extend 是用来扩展选择器或占位符。比如: .error { border: 1px #f00; background-color: #fdd; } .error.intrusion { background-image: url("/...

yekong 3年前 (2021-08-20) 1294℃ 0喜欢

css

Scss @warn

Scss @warn
@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喜欢

css

Scss @media

Scss @media
Sass 中的 @media 指令和 CSS 的使用规则一样的简单,但它有另外一个功能,可以嵌套在 CSS 规则中。有点类似 JS 的冒泡功能一样,如果在样式中使用 @media 指令,它将冒泡到外面。来看一个简单示例: .sidebar { width: 300px; ...

yekong 3年前 (2021-08-20) 1389℃ 0喜欢

css

Scss 引入 SCSS 和 Sass 文件。

Scss 引入 SCSS 和 Sass 文件。
Sass 扩展了 CSS 的 @import 规则,让它能够引入 SCSS 和 Sass 文件。 所有引入的 SCSS 和 Sass 文件都会被合并并输出一个单一的 CSS 文件。 另外,被导入的文件中所定义的变量或 mixins 都可以在主文件中使用。 Sass 会在当前目录下...

yekong 3年前 (2021-08-20) 4057℃ 0喜欢

css

Scss 让颜色更加的透明

Scss 让颜色更加的透明
transparentize() 和 fade-out() 让颜色更加的透明。这两个函数会让透明值做减法运算,当计算出来的结果小于 0 时会以 0 计算,表示全透明。 >> transparentize(red,.5) rgba(255, 0, 0, 0.5) >...

yekong 3年前 (2021-08-20) 1423℃ 0喜欢

css

Scss对已有颜色的透明度做一个加法运算,会让颜色更加不透明

Scss对已有颜色的透明度做一个加法运算,会让颜色更加不透明
opacify fade-in( ) 这两个函数是用来对已有颜色的透明度做一个加法运算,会让颜色更加不透明。其接受两个参数,第一个参数是原始颜色,第二个参数是你需要增加的透明度值,其取值范围主要是在 0~1 之间。当透明度值增加到大于 1 时,会以 1 计算,表示颜色不具有任何透...

yekong 3年前 (2021-08-20) 1618℃ 0喜欢

css

Scss 修改颜色透明度

Scss 修改颜色透明度
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喜欢

css

Scss 让颜色变得更亮

Scss 让颜色变得更亮
lighten() 函数会让颜色变得更亮,与之相反的 darken() 函数会让颜色变得更暗。这个亮度值可以是 0~1 之间,不过常用的一般都在 3%~20% 之间。 $baseColor: #ad141e; 使用 lighten() 和 darken() 函数来修改 10% ...

yekong 3年前 (2021-08-19) 1971℃ 0喜欢

css

Scss 将一个颜色变成灰色

Scss 将一个颜色变成灰色
grayscale($color):将一个颜色变成灰色,相当于desaturate($color,100%); sass -i >> grayscale(#f36) //把#f36颜色变成灰色 #999999 //SCSS $baseColor: #ad141e; ...

yekong 3年前 (2021-08-19) 1207℃ 0喜欢