SASS是一种CSS预处理器(css preprocessor)。它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。
SASS提供四个编译风格的选项:
nested:嵌套缩进的css代码,它是默认值。
expanded:没有缩进的、扩展的css代码。
compact:简洁格式的css代码。
compressed:压缩后的css代码。
@import命令,用来导入外部文件。
@import "path/filename.scss";
如果导入的是.css文件,则等同于css的import命令。
sass有两种注释方式,一种是标准的css注释方式/* */,另一种则是//双斜杆形式的单行注释,不过这种单行注释不会被转译出来。
SASS允许使用变量,所有变量以$开头
普通变量
定义之后可以在全局范围内使用。
默认变量
sass的默认变量仅需要在值后面加上!default即可。
sass的默认变量一般是用来设置默认值,然后根据需求来覆盖的,覆盖的方式也很简单,只需要在默认变量之前重新声明下变量即可
默认变量的价值在进行组件化开发的时候会非常有用。
特殊变量
一般我们定义的变量都为属性值,可直接使用,但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。
多值变量
多值变量分为list类型和map类型,简单来说list类型有点像js中的数组,而map类型有点像js中的对象
全局变量
在变量值后面加上!global即为全局变量。这个目前还用不上,不过将会在sass 3.4后的版本中正式应用。目前的sass变量范围饱受诟病,所以才有了这个全局变量。
sass的嵌套包括两种:一种是选择器的嵌套;另一种是属性的嵌套。我们一般说起或用到的都是选择器的嵌套。
在选择器嵌套中,可以使用&表示父元素选择器
属性嵌套:所谓属性嵌套指的是有些属性拥有同一个开始单词,如border-width,border-color都是以border开头。
.fakeshadow { border: { style: solid; left: { width: 4px; color: #888; } right: { width: 2px; color: #ccc; } } }
@at-root:sass3.3.0中新增的功能,用来跳出选择器嵌套的。
sass中使用 @mixin 声明混合,可以传递参数,参数名以$符号开始,多个参数以逗号分开,也可以给参数设置默认值。声明的 @mixin 通过 @include 来调用
多个参数mixin
调用时可直接传入值,如 @include 传入参数的个数小于 @mixin 定义参数的个数,则按照顺序表示,后面不足的使用默认值,如不足的没有默认值则报错。除此之外还可以选择性的传入参数,使用参数名与值同时传入。
多组值参数mixin
如果一个参数可以有多组值,如box-shadow、transition等,那么参数则需要在变量后加三个点表示,如$variables...。
@content @content在sass3.2.0中引入,可以用来解决css3的@media等带来的问题。它可以使@mixin接受一整块样式,接受的样式从@content开始。 //sass style //------------------------------- @mixin max-screen($res){ @media only screen and ( max-width: $res ) { @content; } } @include max-screen(480px) { body { color: red } } //css style //------------------------------- @media only screen and (max-width: 480px) { body { color: red } }
** @mixin 通过 @include 调用后解析出来的样式是以拷贝形式存在的,而下面的继承则是以联合声明的方式存在的,所以从3.2.0版本以后,建议传递参数的用 @mixin ,而非传递参数类的使用下面的继承%。**
sass中,选择器继承可以让选择器继承另一个选择器的所有样式,并联合声明。使用选择器的继承,要使用关键词 @extend ,后面紧跟需要继承的选择器。
占位选择器%
从sass 3.2.0以后就可以定义占位选择器%。这种选择器的优势在于:如果不调用则不会有任何多余的css文件,避免了以前在一些基础的文件中预定义了很多基础的样式,然后实际应用中不管是否使用了 @extend 去继承相应的样式,都会解析出来所有的样式。占位选择器以%标识定义,通过 @extend 调用。
占位选择器的出现,使css文件更加简练可控,没有多余。所以可以用其定义一些基础的样式文件,然后根据需要调用产生相应的css。
//sass style //------------------------------- %ir{ color: transparent; text-shadow: none; background-color: transparent; border: 0; } %clearfix{ @if $lte7 { *zoom: 1; } &:before, &:after { content: ""; display: table; font: 0/0 a; } &:after { clear: both; } } #header{ h1{ @extend %ir; width:300px; } } .ir{ @extend %ir; } //css style //------------------------------- #header h1, .ir{ color: transparent; text-shadow: none; background-color: transparent; border: 0; } #header h1{ width:300px; }
在 @media 中暂时不能 @extend @media外的代码片段,以后将会可以。
sass定义了很多函数可供使用,当然你也可以自己定义函数,以 @fuction 开始。sass的官方函数链接为:sass fuction,实际项目中我们使用最多的应该是颜色函数,而颜色函数中又以lighten减淡和darken加深为最,其调用方法为lighten($color,$amount)和darken($color,$amount),它们的第一个参数都是颜色值,第二个参数都是百分比。
// pixels to rems @function pxToRem($px) { @return $px / $baseFontSize * 1rem; }
sass具有运算的特性,可以对数值型的Value(如:数字、颜色、变量等)进行加减乘除四则运算。请注意运算符前后请留一个空格,不然会出错。另外,要注意运算单位
@if判断
@if可一个条件单独使用,也可以和 @else 结合多条件使用
三目判断
if($condition, $if_true, $if_false)
for循环有两种形式,分别为:@for $var from
@each循环
语法为:@each $var in
多个字段list数据循环
//sass style //------------------------------- $animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move); @each $animal, $color, $cursor in $animal-data { .#{$animal}-icon { background-image: url('/images/#{$animal}.png'); border: 2px solid $color; cursor: $cursor; } } //css style //------------------------------- .puma-icon { background-image: url('/images/puma.png'); border: 2px solid black; cursor: default; } .sea-slug-icon { background-image: url('/images/sea-slug.png'); border: 2px solid blue; cursor: pointer; } .egret-icon { background-image: url('/images/egret.png'); border: 2px solid white; cursor: move; }
以上是关于SASS的学习总结的详细内容。更多信息请关注PHP中文网其他相关文章!