SASS：CSS预处理器

1、安装

SASS是Ruby语言写的，但是两者的语法没有关系。先安装Ruby，然后再安装SASS。

Ruby安装好后，安装SASS：gem install sass

2、SASS有四种编译风格

nested：嵌套缩进的css代码，它是默认值。expanded：没有缩进的、扩展的css代码。compact：简洁格式的css代码。compressed：压缩后的css代码。

生产环境一般用最后一个：sass --style compressed test.sass test.css

3、使用

可以在屏幕上显示.scss文件转化的css代码sass test.scss

如果要将显示结果保存成文件，后面再跟一个.css文件名sass test.scss test.css

也可以让SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本

//watch a filesass --watch test.scss:test.css

//watch a directorysass --watch app/sass:public/stylesheets

4、变量

所有变量以$开头

$blue : #1875e7;div {color: $blue;
}

如果变量要镶嵌在字符串中，写在#{}中

$side : right;
$margin : 10px;div {margin-#{$side}: $margin;
} 

5、计算功能

SASS支持代码中使用算式

$var : 100px;div {margin: (20px/2);top: 100px + 20px;left: $var * 10%; 
}

6、嵌套

选择器嵌套

div {h1 {font-size: 12px;}
}

属性嵌套

p {background: {color: red;}
}

在代码块内，可以用&引用父元素

a {&:hover { color: red; }
}

7、注释

SASS注释风格

标准的CSS注释 /*comment*/，会保留到编译后的文件。单行注释 //comment ，只保留在SASS源文件中重要注释/*！comment*/，即使是压缩模式编译，也会保留，通常用于声明版本信息

8、继承

.class1 {color: red;
}使用@extend命令继承.class2 {@extend .class1;font-size:12px;
}

9、Mixin

使用@Mixin命令，定义一个代码块

@mixin left {float: left;margin-left: 10px;
}

使用@include命令，调用mixin

div {@include left;
}

mixin可以指定参数和缺省值

@mixin left($value: 10px) {float: left;margin-left: $value;
}使用的时候，根据需要加入参数div {@include left(20px);
}

生成浏览器前缀实例

@mixin rounded($vert, $horz, $radius: 10px) {border-#{$vert)-#{$horz}-radius: $radius;-moz-border-radius-#{$vart}-#{$horz}: $radius;-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}调用li {@include rounded(top, left);
}
p {@include rounded(top, left, 5px);
}

10、颜色函数

SASS提供了一些内置的颜色函数，以便生成系列颜色

lighten(#cc3, 10%) //#d6d65c
darken(#cc3, 10%)  //#a3a329
grayscale(#cc3)    //#808080
complement(#cc3)   //#33c

11、插入文件

@import命令，用来插入外部文件

@import "path/filename.scss";

如果插入的是css文件，等同于css的import命令

@import "foo.css";

12、条件语句

@if

p {@if 1 + 1 == 2 { border: 1px solid; }@if 1 < 0 { border: 2px dotted; }
}

@else

@if lightness($color) > 30% {background-color: #000;
} @else {background-color: #fff;
}

13、循环语句

for循环

@for $i form 1 to 10 {.border-#{$i} {border: #{$i}px solid blue;}
}

while循环

$i : 6;
@while $i > 0 {.item-#{$i} { width: 2em * $i; }$i: $i - 2;
}

each

@each $member in a, b, c, d {.#{$member} {background-image: url("/image/#{$member}.jpg");}
}

14、自定义函数

@function double($n) {@return $n * 2;
}#sidebar {width: double(5px);
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！