SASS详解

以前看到SASS之类的工具觉得应该比较难,今天接触了之后发现挺好用的,主要是方便了CSS的编写。在编写比较大的项目的时候,由于内容很多,因此

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

未登录用户
全部评论0
到底啦