sass的简单介绍

一直觉得都需要学习更多的知识来丰富自己，这样无疑是让自己的基础变得更强大，拓展领域更加宽阔。

近来了解的sass的强大功能，虽然听说它的存在已经很久了，但是在实际项目中还真的一次也没有用过。所以专门花点时间研究一下。

先来说一下什么事sass吧，它是一种css的开发工具，利用它，可以让css变得简单和可维护。

1.安装

window下面安装ruby

https://www.ruby-lang.org/en/documentation/installation/#homebrew

下载安装rubyinstaller.exe就可以了。

如果已经安装了node，那么输入 npm install sass  也可以安装sass了。

2.使用

sass提供了四种编译风格*nested:嵌套缩进；expanded:没有缩进，扩展的代码；compact:简洁格式；compressed:压缩后的代码。

一般使用最后一个选项。eg: sass --style compressed **.sass **.css

也可以用sass监听某个文件，一旦有变动，可以自动生成编译过后的。eg:sass --watch **.sass:**.css 或者sass --watch app/sass:public/stylesheets

3.用法

a.变量

允许使用变量，用$开头 ，如果变量镶嵌在字符串中，用#{}，eg:$zqy:left;.roud{border-#{$zqy}-radius:1px};

b.计算

body{margin:(10px/2);top:10px+20px;}

c.嵌套

div span{color:red;}--->div{span{color:red}}

属性也可以嵌套eg：p{border:{color:red;}}   ***:注意border后面加冒号！

d.注释

/*    */ 一般注释       /*! */  重要注释

e.继承

.zqy{font-size:12px;}

.zqy_1{@extend .zqy;color:red;}

f.可以重用的代码块

@mixin   eg:@mixin left{float:left;margin-left:10px;}  使用@include调用  eg:div {@include left;}

也可以指定参数和缺省值   eg:@mixin left($zqy:10px){float:left;margin-left:$zqy}       div{@include left(20px);}

g.引入外部文件

@import  "path/**.sass"

高级用法稍后会更新。