前言
Sass是CSS预处理器，Sass是一种易于使用的样式语言，可帮助减少传统CSS的许多重复性和可维护性挑战。学习Sass可以编写出可重复使用的样式效，也是在工作和面试要求中不可或缺的一项技能了。
基本概念
什么是Sass？
-
Sass与所有版本的CSS完全兼容。 - 文件后缀名是
.scss，意思为Sassy CSS。 -
Sass是CSS的扩展，Sass是CSS预处理器。 -
Sass减少了CSS的重复，因此节省了时间。 -
Sass文件就是普通的文本文件，里面可以直接使用CSS语法。 -
Sass由Hampton Catlin设计，由Natalie Weizenbaum在2006年开发
为什么使用Sass？
- 随着项目开发样式表越来越大，越来越复杂并且难以维护。这是
CSS预处理程序可以提供帮助的地方。 -
Sass使您可以使用CSS中不存在的功能，例如变量，嵌套规则，混合，导入，继承，内置函数和其他内容。
Sass与Less、Stylus有何区别
- 均具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性
-
Scss和Less语法较为严谨，Less要求一定要使用大括号{}，Scss和Stylus可以通过缩进表示层次与嵌套关系 -
Scss无全局变量的概念，Less和Stylus有类似于其它语言的作用域概念 -
Sass是基于Ruby语言的，而Less和Stylus可以基于NodeJS NPM下载相应库后进行编译；
基本用法
1、使用注释
支持/** **/ 和 //两种方式
/* Block comments */
// Line comments
2、引入样式
引入外部样式可以使用@import关键字。
@import './other_sass_file`;
文件的.scss或.sass扩展名是可选的。
3、声明变量
以$符号来声明变量。
$red: #833;
body {
color: $red;
}
如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
$side : left;
.rounded {
border-#{$side}-radius: 5px;
}
4、使用嵌套
在嵌套的代码块内，可以使用&引用父元素，属性也可以嵌套，比如border-color属性。注意，border后面必须加上冒号
.markdown-body {
p {
color: blue;
}
&:hover {
color: red;
}
}
p {
border: {
color: red;
}
}
最后编译的结果为
.markdown-body p {
color: blue;
}
.markdown-body :hover {
color: red;
}
p {
border-color: red
}
5、使用继承
继承另外一个标签的属性可以使用@extend关键字。
.button {
···
}
.push-button {
@extend .button;
}
6、Mixin
Mixin一般用来编写公共可复用的样式，如定位上下左右居中、背景图片地址和大小。使用@Mixin关键字来声明，应用使用@include关键字
@mixin heading-font {
font-family: sans-serif;
font-weight: bold;
}
h1 {
@include heading-font;
}
带参数的声明和引用
@mixin font-size($n) {
font-size: $n * 1.2em;
}
body {
@include font-size(2);
}
具有默认值
@mixin pad($n: 10px) {
padding: $n;
}
body {
@include pad(15px);
}
带有默认变量
// 设置默认的值
$default-padding: 10px;
@mixin pad($n: $default-padding) {
padding: $n;
}
body {
@include pad(15px);
}
7、颜色函数
rgba
rgb(100, 120, 140)
rgba(100, 120, 140, .5)
rgba($color, .5)
Mixing
mix($a, $b, 10%) // 10% a, 90% b
RGB
red($color) // → 0..255
green($color)
blue($color)
调整颜色
lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c
高级用法
1、循环语句
使用for循环。
@for $i from 1 through 4 {
.item-#{$i} { left: 20px * $i; }
}
each循环（简单），作用与for类似。
@each $item in $menu-items {
.photo-#{$item} {
background: url('images/#{$item}.jpg');
}
}
each循环（嵌套）
$backgrounds: (home, 'home.jpg'), (about, 'about.jpg');
@each $id, $image in $backgrounds {
.photo-#{$id} {
background: url($image);
}
}
While循环
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
2、条件语句
@if可以用来判断，配套@else命令。
@if $position == 'left' {
position: absolute;
left: 0;
}
@else {
position: static;
}
3、自定义函数
Sass允许用户编写自己的函数。
@function double($n) {
@return $n * 2;
}
#sidebar {
width: double(5px);
}
其他特性
1、List
$list: (a b c);
nth($list, 1) // starts with 1
length($list)
@each $item in $list { ... }
2、Map
$map: (key1: value1, key2: value2, key3: value3);
map-get($map, key1)
网友评论