剑客
关注科技互联网

SASS详解

以前看到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-sizefont-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基础就先写到这里,还有很多高级用法以后再补充~

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址