sass常用语法

sass

在使用sass的时候我们一般使用.scss后缀名的文件，这个后缀名兼容我们经常写的css。

用软件 koala 编译的时候 如果 sass 出现中文会报错解决字符集问题

找到koala安装目录 C:\Program Files\Koala\rubygems\gems\sass-3.4.9\bin 下的 sass 文件放在所有的require XXXX 之后即可。Encoding.default_external = Encoding.find('utf-8')

sass 常用语法

在sass中是有全局变量和局部变量之分的，如果你了解js的全局变量和私有变量，那么sass的变量分类也不难理解，因为二者基本一样，全局变量可以在sass文件的任何地方使用，局部变量只能在定义的区域内有效。

全局变量

$bgColor:yellow;$color:pink;div{// 局部变量$color: green;background: $bgColor;color: $color;}p{color: $color;}以上代码编译出来就是：div{background: yellow;color: green;}p{color: yellow;}

嵌套

嵌套和less的使用方法是一样的，在方便开发的同时也有效防止了样式的冲突问题。div{width: 400px;height: 200px;.box{    background: yellow;}ul{    list-style: none;    li{        //  自己        &:hover{            background:red;        }        a{        }        a:hover{            color:red;        }    }}}编译之后：div {  width: 400px;  height: 200px;}div .box {  background: yellow;}div ul {  list-style: none;}div ul li:hover {  background: red;}div ul li a:hover {  color: red;}

混合：

所谓混合，就是在其他地方（全局）定义的样式可以拿过来自己用，它使用 @mixin 来定义，在使用的时候@include name()来混合使用。@mixin ab(){width: 200px;   height: 300px;}@mixin bc($color){width: 200px;   height: 300px;color: $color;}.box{@include ab();}.box1{background: pink;   @include ab();}.box2{width: 100px;height: 200px;@include bc(yellow);}编译后：.box {  width: 200px;  height: 300px;}.box1 {  background: pink;  width: 200px;  height: 300px;}.box2 {  width: 100px;  height: 200px;  width: 200px;  height: 300px;  color: yellow;}

函数 ：

我们可以在函数中进行计算和逻辑计算：通过@function定义函数，返回值用@return @function jsWidth($w){@return ($w/2)+100px;}.box3{width: jsWidth(960px);}编译后：.box3 {  width: 580px;}

继承：

继承定义是先在外部定义一个类，然后通过@extend进行继承 .item{width: 300px;height: 50px;border: 1px solid green;}.box4{background: pink;@extend .item;}编译后：.item, .box4 {  width: 300px;  height: 50px;  border: 1px solid green;}.box4 {  background: pink;}

占位符：

占位符就是不占位置，不会进行编译。%clear{clear: both;    }%mt10{margin-top: 10px;}div{@extend %clear;@extend %mt10;}编译后：div {  clear: both;}div {  margin-top: 10px;}