SASS详解

2019年9月7日 190次阅读 来源: 其遇

以前看到SASS之类的工具觉得应该比较难，今天接触了之后发现挺好用的，主要是方便了CSS的编写。在编写比较大的项目的时候，由于内容很多，因此样式表也会比较繁杂，如果要修改其中某一个的名字，就会维护起来很麻烦。因此才需要用到SASS这样的工具来优化CSS结构。

一般有SCSS和SASS两种，这两种的文件后缀名是不一样的，编写起来也会有差异。由于SCSS的写法更接近CSS，因此我比较喜欢SCSS的写法。（SASS是没有大括号的，仅仅用缩进来表示层次，这一点和python是很像的）

准备

安装

由于SCSS是需要编译的。我就直接简略关于编译配置方法的环节。

  1. 安装ruby。http://rubyinstaller.org/downloads

  2. 命令行安装SASS。

  3. 安装好了可以在命令行调用sass --version。如果显示版本号就是安装好啦。

具体可以看慕课网SASS教程

编译方法

在命令行输入

sass srcFile.scss:destFile.css//编译单个文件
sass srcDir/:css/;//编译整个srcDir文件夹到css文件夹

也就是sass [s]:[d]这样的语法（下文中我都这样写）。

使用

刚刚是一些基本用法，还有一些参数可以用。

编译参数

1.–watch

上面的写法其实比较麻烦，因为我们一般写css都是会反复修改的，那么我们每次改了SCSS都需要再次编译，显得很麻烦。因此我们可以使用--watch参数监视每一次的更改，这样在修改CSS之后都会自动编译。具体如下：

sass --watch [src]:[dest];//src和dest既可以是文件也可以是文件夹

如果我们修改了SCSS，控制台就会输出

 Change detected to: scss/test.scss
      write scss/css/test.css
      write scss/css/test.css.map

2. style

由于不同的同学写CSS都有自己的习惯，因此这个参数就是为了让编译后的CSS更美观。
语法是sass --watch [src]:[dest] --style property这个property就是下面描述的内容。

nested

默认就是nested编译结果是最常见的书写方法。

body{
    p{
        color:red;
    }
    ul{
        background-color:green;
    }
}

编译结果

body p{
    color:red;}
body ul{
    background-color:green;}
expanded

就是编译出来的右大括号会另起一行

compact

输出的css会少很多换行

compressed

没有空格没有换行

.box,.size{margin-left:5px}

变量

SASS类似与一些编程语言。会先定义一些变量并给他们赋值，然后再在样式表中调用。这样我们在维护CSS的时候就只需要把这些变量的值修改就可以了，比较方便。废话不多说直接看代码：

$varGlobal:500px;
.container{
    $varLocal:20px;
    width:$varGlobal;
    height:$varLocal;
}

看上面的代码就知道，SASS引入了局部变量和全局变量，和其他语言用法差不多的就不赘述了。

嵌套

先前已经提到了结构的嵌套。还支持属性嵌套和伪类嵌套。

属性嵌套

比如font就有很多属性：font-size、font-weight等。我们可以这样嵌套

font:{
    size://
    weight://
}

注意font后面有一个冒号，不然就和结构嵌套是一样的了

伪类嵌套

.clearfix{
    &:before,
    &:after {
        content:"";
        display: table;
      }
    &:after {
        clear:both;
        overflow: hidden;
      }
}

用法就是加一个&:
调用混合宏

混合宏

感觉这个是SASS的比较强大的地方，先看代码

@mixin border-radius{
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
button {
    @include border-radius;
}

这时候编译结果为

button {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

相当于就是一个代码块的调用。另外混合宏还可以传入参数

@mixin border-radius($radius){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

相当于是一个函数的写法了。在调用的时候传入参数即可

.box {
  @include border-radius(3px);
}

还可以给默认值

@mixin border-radius($radius：3px){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

注意css中都是用冒号表示相等。不用等号

带@的语句一般都不加冒号，直接空格

继承

.size{
    background-color:#777;
}
.box{
    @extend .size;
}

占位符

%placeholder

这种写法在不调用之前不会产生任何css代码。我个人感觉比较像是一个基类。用法就是和继承一样的。

.body{
    @extend %placeholder
}

这里贴一张慕课网拿到的表格。
《SASS详解》

SASS基础就先写到这里，还有很多高级用法以后再补充~

    原文作者：其遇
    原文地址: https://segmentfault.com/a/1190000007252060
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞