Sass部分优点介绍

 

CSS是用来开发网页样式，为CSS加入编程元素，这被叫做"CSS预处理器"（css preprocessor）

SASS (Syntactically Awesome StyleSheets)是一种CSS的开发工具，可以用它来定义一套新的语法规则和函数，以加强和提升CSS。通过这种新的编程语言，可以使用最高效的方式，以少量的代码创建复杂的设计。

1、嵌套

如果要写一大串指向页面中同一块的样式时，css需要重复写选择器，一遍又一遍地写同一个ID：

#content article h1 { color: #333 }

#content article p { margin-bottom: 1.4em }

#content aside { ">而sass只写一遍，嵌套规则块。使样式可读性更高

#content {

  article {

    h1 { color: #333 }

    p { margin-bottom: 1.4em }

  }

  aside { background-color: #EEE }

}

2、变量

你可以把颜色值存储在变量中，然后用于整个网站的设计。

而且极大地确保了整个设计项目的可用性和一致性。

实用的：结构变量

 $pageWidth: 100%; $containerWidth: 960px;

描述的：颜色变量

$grey: #E3E3E3;

$blue: #1f605b;

3、混合宏

混合宏是小的代码片段（类似局部），你可以在项目中任何需要的地方，通过@include来复用它们。

（1）不带参数混合宏：
在 Sass 中，使用“@mixin”来声明一个混合宏。如：

 @mixin border-radius{

-webkit-border-radius: 5px;

    border-radius: 5px;

 }

（2）带参数混合宏：

除了声明一个不带参数的混合宏之外，还可以在定义混合宏时带有参数，如：

@mixin border-radius($radius:5px){

     -webkit-border-radius: $radius;

    border-radius: $radius;

 }

（3）复杂的混合宏：

@mixin box-shadow($shadow...) {

     @if length($shadow) >= 1 {

         @include prefixer(box-shadow, $shadow);

    } @else{

        $shadow:0 0 4px rgba(0,0,0,.3);

        @include prefixer(box-shadow, $shadow);

    }

}

4、数学函数

在样式表中使用数学函数。这在创建不同大小的网格时是特有用的，或者可以为实现更好的动态响应式设计。

5、其他

如隐藏注释，占位符选择器，数据类型，颜色操作，变量的默认值，扩展等。

 

转载于:https://www.cnblogs.com/MnineJane/p/7989721.html