初识SCSS

上一个项目是自己决定用LESS来写css的,结果遇到了一个很纠结的问题,比如为了规范代码采用的是“一行一对属性:属性值”的格式,这就造成了整个项目有近几千行LESS源码,后面修改的时候十分不方便,如果拆分成多个文件,引入文件路径又十分麻烦。这时候同事就推荐了sass,就这样入了另外一个坑。

<!--more-->

在简单地查看了sass语法之后,却生出了一种十分蛋疼的感觉,sass采用了类似于python那样严格的缩进,甚至更为苛刻:

  • 没有分号与大括号,采用严格的缩进;
  • 使用两个空格的缩进来表示代码的嵌套;
  • 也可以使用四个空格缩进,整个文件需要统一;
  • 选择器的属性值与属性值之间需要一个空格;

之后为了减小学习成本,于是我就转向了SCSS。SCSS貌似是在原生sass的基础上转而采用类似与CSS的语法,使用大括号代替了缩进,与LESS相似但是具有更多的功能,大致摸索了一下,于是整理了下面的一点笔记。 参考资料:w3cplussass中国

1. 变量声明

$base-color:#000;
  • 与less中使用@来声明变量不一样,scss使用"$"符号来标识变量,因为"$"符号在CSS中并没有其他用途;
  • 变量不区分"-"和"_",采用这两种分隔符命名的变量会被认为是同一个变量。

2. 计算

类似与LESS,SCSS的属性值也是可以自动进行计算的,包括长宽,字体等,此外颜色还可以使用颜色函数进行调整。

3. 选择器嵌套

    .wrap {
        background: #ccc;
        h1 {
            color: red;
            a {
               text-decoration: none;
            }
        }
    }
  • 与LESS相同的嵌套规则,但是为了浏览器的解析效率,千万不要滥用嵌套;
  • 多类选择器使用"&"符号,群组选择器也会被正确解析;
  • 属性嵌套与选择器嵌套类似。

4. 拆分并导入Scss文件

可以将其他的scss文件引入到当前scss文件,即可以达到分模块编写css样式,然后统一编译为一个css文件中,甚至可以在多个项目中使用同个样式。支持拆分文件是我使用scss最主要的原因,这个功能能够十分清楚明白地组织项目css文件结构。大赞!

    @import "styleGroup/_wrap.scss";
  • 可以省略后缀名".scss"或者".sass";
  • 专门为import命令编写的scss文件,,可以在命名时以下划线开头,这样就不会在编译时生成单独的css文件;
  • 由于默认后定义的变量会覆盖先前定义的变量,因此可以在定义变量的时候使用!default,如果这个变量被声明赋值了,那就用它声明的值,否则就用这个默认值。

5. 混合器

    @mixin border-default($width,$style,$color,$r) {
        border: $width $style $color;
        border-radius: $r;
    }
    .wrap {
        @include border-default(1px,solid,#000,5px);
    }
  • 如果是属性值需要重用则可以使用变量,如果是一大段样式需要重用则可以使用混合;
  • 使用@minxin定义混合器,使用@include引用混合器
  • 混合器的命名应当充分表现该样式的作用,避免滥用混合器造成样式表的臃肿
  • 可以通过为混合器传参来建立不同的样式段代码
  • 可以通过$name : $value的形式来传参,这样可以不用记住参数的顺序
  • 可以为混合器参数设置默认值,即在设置参数时使用$name : $defaultValue形式

6. 继承

选择器继承指的是一个选择器可以继承另一个选择器的所有样式

@extends .wrap
  • 与混合器相比,继承生成的css代码相对更小
  • 继承存在样式重叠的问题,浏览器根据选择器权重值进行判断
  • 避免继承来自于后代选择器的样式,这样应用css规则的选择器情形无法判断

7. 最后

刚开始学习less的时候心里的那个关于选择器嵌套的疑惑算是解开了:跟使用的预编译器无关,选择器嵌套是完全由我们自己决定的,至于编译出来的N层嵌套,完全取决于我们在预编译的时候是否真正思考了嵌套的作用,那么问题来了:到底该用什么姿势来书写正确的CSS代码呢?

2018年五月面试发现的一些问题 BFC及其应用