SCSS 日常用法

SCSS 日常用法

本文是以自己的理解起的结构,要看详细的帮助文档,参阅这里:https://sass-lang.com/documentation/

你需要了解的

lesssass 是两种 css 预编译语言,其目的是为了更快、更结构的编写 css 文件,是一种强大的 css 编译语言,都能使用 变量、运算符、判断、方法等等。

scsssass 的区别(这里先不讲 less ):

  • 先有的 sass 后有的 scss
  • scss 需要大括号{}和分号;
  • sass 什么都不用直接裸奔

感觉 sass 不如 scss 严谨,裸奔太狂野了,所以我们选用 scss

看个小例子

写一个 .btn 类并支持 :hover :active 样式

css

.btn {
/* btn 初始样式 */
}
.btn:hover{
/* :hover 样式 */
}
.btn:active{
/* :active 样式 */
}

scss

.btn{
// btn 初始样式
    &:hover{
        // hover 样式
    }
    &:active{
        // active 样式
    }
}

在scss, sass, less 中 & 都代指父类
上面这个例子中的 & 代指 .btn
可以看出 scss 的结构要比 css 清晰,并且写的也要更少。
下面的 scss 在使用中就会生成上面的 css
而这还只是皮毛,保证你用过 scss 之后就不会再用 css 写样式了。

变量

变量是以 $ 开头的,可以是颜色,长度,数值,等等。

像 js 的变量一样,scss 的变量也是有作用域的,也就是说内部声明的变量是无法在外面使用的,如果想让内部的变量在外部可访问,需要在变量值后面添加 !global 声明。

(还可以通过添加 !default 给变量设置默认值,这个在写一个样式库的时候比较实用,避免别人在没有给变量赋值之前使用)

$变量名: 变量值
// Colors
$red:       #CD594B !global;
$yellow:    #F8CE5E;
$green:     #4B9E65;
$yellow:    #5A8DEE;

// Unites
$btn-padding: 4px;
$btn-lineheight: 26px;

实际使用中:

scss

.btn-success {
    background-color: $green;
    line-height: $btn-lineheight;
    color: #fff;
}

生成 css

.btn-success {
    background-color: #4B9E65;
    line-height: 26px;
    color: #fff;
}

嵌入字符串

将变量直接嵌入字符串,需要用#{ 变量 } (类似 ES6 中模板字符串中的${ 变量 }

其实 #{} 中是可以插入任意东西的,这里只用到了插入变量,还可以插入方法等等,高级用法。

scss

$bg-path: "./img"

.card{
    background: url("#{$bg-path}/card-bg.png" center center);
}

css

.card{
    background: url("./img/card-bg.png" center center);
}

导入文件 @import

通过 @import 可以把多个文件结合到一起
有了这个功能,就可以通过功能拆分 scss 文件,使其更结构化,比如,可以分成:变量类,按钮类,列表类,字体类,排版类等等。

拆分成多个文件的时候,以 _开头命名的文件,不会被像 phpStorm 中的 file watcher 自动预编译成css文件,less 没有这效果,在这一点上 scss 很不错。

_variables.scss

$bg-btn: #ddd;
$color-btn: #444;

btn.scss

@import "_variables";

.btn{
    display: inline-block;
    padding: 3px 6px;
    background-color: $bg-btn; 
    color: $color-btn;
}

生成 css

.btn{
    display: inline-block;
    padding: 3px 6px;
    background-color: #ddd; 
    color: #444;
}

相互嵌入 @mixin @include

这个是最常用的,通过 @mixin 定义一个类或方法,在其它地方通过 @include 引用这个方法或类。

如果是方法,还可以定义默认值,也就是说可以某些时候,可以传部分参数。

直接看例子
scss

// @mixin 如果没有调用,不会被渲染

@mixin rounded($conor: 5px){ // 定义 mixin 并设置默认值 5px
  -webkit-border-radius: $conor;
  -moz-border-radius: $conor;
  border-radius: $conor;
}

.btn-rounded{
  @include rounded(); // 这里引用上面的 mixin,默认值 5px
}

.btn-big-rounded{
  @include rounded(10px); // 这里引用上面的 mixin,并设置值 10px
}

生成 css

.btn-rounded{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.btn-big-rounded{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

继承 @extend

有些时候,需要写的某个类里,包含另一个类的所有声明。
如: 警告按钮,包含所有警告颜色类的内容。

scss

.danger{
  background-color: #FF3B30;
}
.round{
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.btn{
  display: inline-block;
  padding: 3px 6px;
}

.btn-danger{
  @extend .danger, .round, .btn;
}

生成 css

.danger, .btn-danger {
  background-color: #FF3B30;
}
.round, .btn-danger {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.btn, .btn-danger {
  display: inline-block;
  padding: 3px 6px;
}

@extend 注意事项:
不能继承 @extend .danger.text 这种连续组合的类,应该写为 @extend .danger, .text

常用方法

详见:https://sass-lang.com/documentation/functions

不知道别人,反正我最常用的就是颜色方法了。列举常用的颜色方法

lighten     (颜色, 百分比)   // 调亮
darken      (颜色, 百分比)   // 调暗
saturate    (颜色, 百分比)   // 调高饱和度
desaturate  (颜色, 百分比)   // 降低饱和度

SCSS 日常用法

scss

$green: #4B9E65;


.green{
  background-color: $green;
}

.green-lighten{
  background-color: lighten($green,20%);
}

.green-darken{
  background-color: darken($green,20%);
}

.green-saturate{
  background-color: saturate($green,20%);
}

.green-desaturate{
  background-color: desaturate($green,20%);
}

生成 css

.green {
  background-color: #4B9E65;
}
.green-lighten {
  background-color: #88c79c;
}
.green-darken {
  background-color: #2a5939;
}
.green-saturate {
  background-color: #34b55c;
}
.green-desaturate {
  background-color: #62876e;
}

其它

方法 @function

方法以 @function 开头,以 @return 结尾,也就是说,方法的定义,必须要有返回值

详见:https://sass-lang.com/documentation/at-rules/function

调试方法 @error @warn @debug

像js一样,用于输出提示信息

  • @debug: 普通输出
  • @warn: 警告输出
  • @error: 错误输出

代码结构

声明

通用

  • 变量声明, $var: value
  • 控制声明,@if @each
  • @error@warn@debug

CSS

  • 样式,h1 { ... }
  • 样式@ @media @font-face
  • @at-root

*

  • 导入 @import
  • 混合 @mixin
  • 方法定义 @function

表达式

  • 数字 12 100px
  • 字符串 Helvetina Neue bold
  • 颜色 #ffffff blue
  • 布尔值 true false
  • null
  • 属性值组 border: 1px solid #ccc
  • Maps (“background”: red, “foreground”: pink)

运算符

  • == !=
  • + - * / %
  • < <= >=
  • and or not
  • + - / 连接字符
  • ( )

其它

  • 变量 $var
  • 方法调用 nth($list,1) var(--main-bg-color)
  • 特殊方法 calc(1px + 100%) url(http://myapp.com/assets/logo.png)
  • 父选择器 &
  • !important

注释

/*  多行注释
        可以多行
        在非压缩模式下,这种注释会被输出到 css 中
*/

// 单行注释
// 这种注释不会输出到 css 中

特殊方法

CSS 本身自带一些方法,大多数方法都能与SCSS方法和平共存,但有些会产生冲突,如url()

如果 url() 传入的参数是有效的带引号的url,sass不会处理它,但还可以往其中插入变量,如果不是有效的带引号的 url,带有方法或变量的,sass就把它当成正常的方式识别。如:

$bg-path: "./pics"

.card-bg{
    background: url("#{$bg-path}/card-bg.png") center center;
}

// 或
.card-bg{
    background: url($bg-path+"/card-bg.png") center center;
}

都会输出为

.card-bg{
    background: url("./pics/card-bg.png") center center;
}

例子 .btn

有时候,比如,你需要写一个按钮类 .btn-success, .btn-danger, .btn-default, .btn-warning,如果单个定义的话,会很麻烦,现在用了方法,就可以直接填参数完成了。

scss

$green:     #4B9E65;
$blue:      #5A8DEE;
$yellow:    #F8CE5E;
$red:       #CD594B;

@mixin btn-template($bgcolor,$fcolor:white){
// 定义了两个参数,第二个参数有默认值
// 也就是说这个方法可以值一个或两个参数
// 另外 带 () 参数的方法不会把自身渲染到 css 中,只有调用才会渲染
  color: $fcolor;
  border-color: darken($bgcolor, 3%);
  background-color: $bgcolor;
  &:hover {
    background-color: darken($bgcolor, 5%);
  }
  &:active {
    background-color: darken($bgcolor, 10%);
  }
}

.btn-success{
  @include btn-template($green)
}
.btn-primary{
  @include btn-template($blue)
}

.btn-warning{
  @include btn-template($yellow)
}

.btn-danger{
  @include btn-template($red)
}

上面的 scss 输出为下面的内容,有没有很厉害

.btn-success {
  color: white;
  border-color: #46945e;
  background-color: #4B9E65;
}
.btn-success:hover {
  background-color: #438d5a;
}
.btn-success:active {
  background-color: #3b7b4f;
}
.btn-primary {
  color: white;
  border-color: #4c83ed;
  background-color: #5A8DEE;
}
.btn-primary:hover {
  background-color: #437dec;
}
.btn-primary:active {
  background-color: #2c6de9;
}
.btn-warning {
  color: white;
  border-color: #f7ca4f;
  background-color: #F8CE5E;
}
.btn-warning:hover {
  background-color: #f7c746;
}
.btn-warning:active {
  background-color: #f6bf2d;
}
.btn-danger {
  color: white;
  border-color: #ca4e3f;
  background-color: #CD594B;
}
.btn-danger:hover {
  background-color: #c74737;
}
.btn-danger:active {
  background-color: #b34032;
}

学习 scss 最好的例子

就是去看 bootstrap v4 的样式源码,bootstrap v4 就是用 scss 写的

如果想学 less 可以看这篇 [ less基础用法 ] - SegmentFault -CSDNbootstrap v3 就是用 less 写的。

下载 bootstrap 的 scss 源码,看里面怎么写的,进步很快的。

上一篇:sass快速使用


下一篇:scss中文报错解决办法